SVG：<use>，javascript和动画

所以我有一个简单的嵌入式SVG图像。我使用的是JavaScript的beginElement()以提示特定部件的动画：SVG：<use>，javascript和动画

<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>元素获取鼠标悬停事件。因为他们都在重复使用相同的路径，所以如果我提示该动画，那么所有元素都会生成动画。

有没有什么办法可以将第二个表示的简洁性与第一个表示的个体动画性融为一体？

来源

2012-01-03 rampion

蛮力方法是用脚本生成SVG代码。

可能更优雅的是有两条路径 - 一条静态和一条动画，并在需要时通过Javascript更改href属性。

来源

2012-01-03 15:31:55 zch

是的，它看起来像svg一代通过JavaScript是目前最好的解决方案。 – rampion 2012-01-04 19:53:11

SVG：<use>，javascript和动画

回答

相关问题