我正在尝试在<use />
元素内创建带有动画的SVG:
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
height="100"
width="100"
>
<defs>
<path id="id1_clipper" d="M 0 0 L 100 10 V0 Z">
<animate
id="id1_animate"
attributeName="d"
from="M 0 0 L 100 10 V0 Z"
to="M 0 0 L 100 100 V0 Z"
begin="indefinite"
end="indefinite"
dur="2s"
fill="freeze"
/>
</path>
<clipPath id="id1_clipPath">
<use xlink:href="#id1_clipper" />
</clipPath>
</defs>
<rect
top="0"
left="0"
width="100"
height="100"
fill="#999999"
clip-path="url(#id1_clipPath)"
/>
</svg>
但是动画不能在Firefox中播放。
在this demo中,左元素的动画在Firefox中无效,在chrome中有效。右元素与左元素相同,但没有<use ... />
,并且在两种浏览器中都可以正常工作。
James Newton在此this主题中指出
元素中的CSS动画在Firefox中实际上不起作用
有没有办法在复杂的SVG中重用带有动画的SVG的某些部分,并且可以在Firefox中使用?
如果不可能,将来是否有希望像现在在chrome中那样在Firefox中工作?