0

我有一个基于 SVG 的加载动画，又名“旋转鼬鼠”，但我想知道是否可以通过使用基本动画（淡出属性）并在我的<use>标签中引用它来更有效地编写代码？

      <defs>
        <line 
            id="bit"
            x1="50" 
            y1="25" 
            x2="50" 
            y2="10"  
            stroke="#000000">
        </line>
    </defs>
<g>
    <use 
            xlink:href="#bit" 
            opacity="0.8"
            transform="rotate(0 50 50)">
            <animate 
                attributeName="opacity"
                values="1;0.2" 
                dur="2.4s" 
                repeatCount="indefinite"
                begin="0.0s" 
            />
        </use>
    </g>

这些标签有 12 个，<use>为简洁起见，我在这里省略了它们。在动画标签中，每次只有属性变化，其余的都是一样的。begin

我尝试了各种对我来说似乎合理的方法，但都没有奏效，所以我希望这里的一些 SVG 专家可以为我指明正确的方向。还是我基本上被迫在每个标签上重复所有动画属性？

对 SVG 有一点了解，我意识到有很多方法可以实现相同的结果。

谢谢。

--> 小提琴

4

1 回答 1

1

我认为您不能完全按照您的要求做，因为begin它是动画元素的属性，而不是可以从使用中继承的属性。

根据您所说的“更高效”的含义，还有其他方法可以达到类似的效果。例如，您可以使用脚本：

http://jsfiddle.net/rzAwV/1/

这是一个较小的文件，但动画并不那么流畅，因为我们只是在旋转微调器，而不是为不透明度设置动画。

于 2013-08-01T02:10:16.043 回答