Html SVG动画<；使用>；在FireFox&；游猎

我有一个过渡动画，我想在一个组元素中的SVG元素的宽度上触发。动画似乎只在Chrome浏览器上工作

.grow{
-webkit转换：1.5s；
-moz转换：1.5s；
-o-过渡：1.5s；
过渡期：3s；
宽度：10px；
}

（（）=>{
设置超时（（）=>{
const rect1=document.getElementById（'rect-1'）；
rect1.classList.add（'grow'）；
const rect2=document.getElementById（'rect-2'）；
rect2.classList.add（'grow'）；
}, 1000);
})();

要复制此内容，请在Safari或Firefox中打开。 您将看到第二个矩形的过渡无法正常工作

在SVG组中，是否有任何方法可以让转换动画为特定元素工作？

使用： 元素从SVG文档中获取节点，并且 在其他地方复制它们

因此，没有必要使用

use

，因为您没有复制它

（（）=>{
设置超时（（）=>{
const rect1=document.getElementById（'rect-1'）；
rect1.classList.add（'grow'）；
const rect2=document.getElementById（'rect-2'）；
rect2.classList.add（'grow'）；
}, 1000);
})();
.grow{
-webkit转换：1.5s；
-moz转换：1.5s；
-o-过渡：1.5s；
过渡：宽度3s；
宽度：10px；
}
将动画标记嵌套在圆内如何


总结一下，一个解决方法是退回到SMIL SVG动画，而不是使用CSS

请参阅根据我的原始问题改编的



（（）=>{
设置超时（（）=>{
const rect1=document.getElementById（'rect-1'）；
rect1.classList.add（'grow'）；
constgrouprect=document.getElementById（'g-rect'）；
const grownanimation=document.createElements（'http://www.w3.org/2000/svg“，”设置动画“）
grownanimation.setAttribute（'attributeName'，'width'）；
grownanimation.setAttribute（'from'，'400'）；
grownanimation.setAttribute（'to'，'10'）；
grownanimation.setAttribute（'dur'，'3s'）；
grownanimation.setAttribute（'fill'，'freeze'）；
grownanimation.setAttribute（'begin'，'unfinite'）；
groupRect.appendChild（growAnimation）；
growAnimation.beginElement（）；
}, 1000);
})();
啊，废话，然后有人真的看了整个svg，可能把它搞定了：D+1我正要发布这个答案！谢谢@mahan。然而，我的问题中的代码是一个用例的简化版本，我实际上需要复制我的组并将动画应用到我定义的组的所有实例。因此，我需要一个解决方法来使用问题中描述的组。@Ynnckth更新了我的答案。如果你真的不需要它们，只需删除
use
，
defs
，就像@mahan提到的那样。谢谢，但这不是我对@mahan答案的评论中提到的选项。我相应地更新了我的问题。谢谢@Miller Cy Chan。使用SVG SMIL动画确实是一种有效的退路。我为我的问题添加了一个答案，包括从JS代码动态触发动画。