SVG加载动画 - 我可以组合<use>和<def>以及<animate>?</animate> </def> </use>

时间:2013-08-01 00:33:48

标签: svg svg-animate

我有一个基于SVG的加载动画,又名“spinning weasel”,但我想知道我是否可以通过利用基本动画(淡出属性)并在我{{{{ 1}}标签?

<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>属性每次都会更改,其余属性相同。

我尝试了各种对我来说似乎合理的方法,但都没有用,所以我希望这里有一位SVG大师可以指出我正确的方向。或者我基本上被迫重复每个标签上的所有动画属性?

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

感谢。

--> Fiddle

1 个答案:

答案 0 :(得分:1)

我认为你不能完全按照自己的意图去做,因为begin是动画元素的属性,而不是可以从用途继承的属性。

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

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

这是一个较小的文件,但是动画不是很流畅,因为我们只是旋转微调器,而不是动画不透明度。