Javascript Firefox不会设置SVG大小更改的动画

我们已经实现了一个带有SVG插图的网页，它由Javascript代码操纵。它在所有主流浏览器中都能正常工作。CSS transition属性用于设置状态间转换的动画：

svg rect {
   transition: 0.6s ease;
}

它适用于所有主流浏览器。但是，Firefox只对颜色变化进行动画处理，而不对SVG元素的大小和位置进行动画处理

我在JS Fiddle中设置了一个最小的示例：。它会增大和缩小矩形，同时更改颜色

这是Firefox的已知限制吗？或者如何解决这个问题

---

HTML:

Javascript代码：

var rect = document.getElementById("svg").children[0];

document.getElementById("bt-grow").addEventListener("click", function () {
  rect.setAttribute("y", "0");
  rect.setAttribute("height", 300);
  rect.setAttribute("fill", "#090");
  return false;
});

document.getElementById("bt-shrink").addEventListener("click", function () {
  rect.setAttribute("y", "200");
  rect.setAttribute("height", 100);
  rect.setAttribute("fill", "#000");
  return false;
});

---

不能使用CSS动画设置属性的动画，在SVG1.1（Firefox实现）中，y和宽度是属性。在SVG2中，它们是CSS属性。Chrome（及其克隆Opera）是目前唯一实现SVG2这一部分的UA

---

对于Firefox支持，您必须使用SMIL。在Chrome中添加SMIL支持有很多方法

嗯，如果我错了，请纠正我，但你不是在JS中设置HTML属性，而不是CSS属性吗？我有点惊讶这在任何浏览器中都能起作用，我也用

rect.y.baseVal.value=0尝试过它而不是
rect.setAttribute（“y”，“0”）。但行为完全相同。如何更改Javascript的位置和大小？它是SVG，在设计样式时有自己的规则（它只尊重有限的CSS，因为它是一种图形语言，所以有很多元素属性用于设计样式），因此您可以使用SVG动画代码。类似于-创建一个
（作为初始虚拟对象或使用带有SVG命名空间的
document.createElements（）
），然后将其附加到需要制作动画的元素中。您所指的动画类型是SMIL动画。他们被弃用了。Chrome例如警告：“SVG的SMIL动画（‘动画’、‘设置’等）已被弃用，将被删除。请改用CSS动画或Web动画。”是的，他们是这么说的，所以你可能不得不同时做这两件事。告诉我们FF至少在下一个季度仍然完全支持它，基于Blink/WebKit的浏览器也是如此（尽管他们给了你这个警告），所以你可能需要做JS功能检测来决定使用哪一个。我不知道Firefox在让CSS转换用于SVG元素属性方面是否存在缺陷（尽管我认为他们希望如此）
svg rect {
  transition: 0.6s ease;
}

svg {
  margin: 0 auto;
}

p {
  text-align: center;
}

var rect = document.getElementById("svg").children[0];

document.getElementById("bt-grow").addEventListener("click", function () {
  rect.setAttribute("y", "0");
  rect.setAttribute("height", 300);
  rect.setAttribute("fill", "#090");
  return false;
});

document.getElementById("bt-shrink").addEventListener("click", function () {
  rect.setAttribute("y", "200");
  rect.setAttribute("height", 100);
  rect.setAttribute("fill", "#000");
  return false;
});