javascript - Firefox 不会动画化 SVG 大小的变化

Question

我们实现了一个带有 SVG 插图的网页，该网页由 Javascript 代码操作。它适用于所有主要浏览器。 CSS transition 属性用于动画状态之间的转换:

svg rect {
   transition: 0.6s ease;
}

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

我在 JS Fiddle 中建立了一个最小的例子:https://jsfiddle.net/gvswzghf/ .它扩大和缩小一个矩形并同时改变颜色。

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

---

HTML:

<div>
  <svg id="svg" viewBox="0 0 400 300">
    <rect x="50" y="200" width="300" height="100" fill="#000"></rect>
  </svg>
</div>
<p>
  <button id="bt-grow">Grow</button>
  <button id="bt-shrink">Shrink</button>
</p>

样式表:

svg rect {
  transition: 0.6s ease;
}

svg {
  margin: 0 auto;
}

p {
  text-align: center;
}

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;
});

Answer 1

您不能使用 CSS 动画为属性设置动画，在 SVG 1.1(Firefox 实现)中，y 和 width 是属性。在 SVG 2 中，它们是 CSS 属性。 Chrome(及其克隆的 Opera)是目前唯一实现了这部分 SVG 2 的 UA。

要获得 Firefox 支持，您必须使用 SMIL。有polyfills为 Chrome 添加 SMIL 支持。