SVG: <use>, JavaScript и анимация - PullRequest
Новая
       11

SVG: <use>, JavaScript и анимация

3 голосов
/ 03 января 2012

Итак, у меня есть простое встроенное изображение SVG. Я использую javascript beginElement() для анимации отдельных частей: 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
      jQuery(function(){ $('path').mouseover(function(){ $('animateTransform', this)[0].beginElement(); }); });
    </script>
  </head>
  <body>
    <svg 
      version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400"
      height="400"
    > 
      <g transform="translate(200,200)" stroke="black">
        <g>
        <g transform="rotate(0)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(24)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(48)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(72)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(96)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(120)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(144)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(168)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(192)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(216)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(240)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(264)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(288)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(312)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
        <g transform="rotate(336)">
          <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
            <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
          </path>
        </g>
      </g>
      </g>
    </svg> 
  </body>
</html>

Само изображение довольно повторяющееся - я мог бы упростить его с помощью тегов <use>: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs>
    <path id="plume" d="M 0 0 L -20.791169081775931 97.81476007338057 A 2 2 0 0 0 20.791169081775931 97.81476007338057 Z" >
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0"/>
    </path>
    <g id="fifth">
      <g transform="rotate(0.0)">
        <use xlink:href="#plume" fill="red"/>
      </g>
      <g transform="rotate(24.0)">
        <use xlink:href="#plume" fill="green"/>
      </g>
      <g transform="rotate(48.0)">
        <use xlink:href="#plume" fill="blue"/>
      </g>
    </g>
  </defs>
  <g transform="translate(200,200)" stroke="black">
    <use xlink:href="#fifth" transform="rotate(0.0)"/>
    <use xlink:href="#fifth" transform="rotate(72.0)"/>
    <use xlink:href="#fifth" transform="rotate(144.0)"/>
    <use xlink:href="#fifth" transform="rotate(216.0)"/>
    <use xlink:href="#fifth" transform="rotate(288.0)"/>
  </g>
</svg>

Но тогда я больше не могу регистрировать события наведения мыши для отдельных элементов <path>, так как они не видны. Теперь элементы <use> получают события наведения мыши. И поскольку все они используют один и тот же путь, если я назову эту анимацию, то все элементы будут анимированы.

Можно ли как-то объединить краткость второго представления с индивидуальной одушевленностью первого?

1 Ответ

1 голос
/ 03 января 2012

Метод грубой силы состоит в том, чтобы генерировать код SVG со сценарием.

Вероятно, более элегантно иметь два пути - один статический и один анимированный и при необходимости изменять атрибут href через Javascript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...