Question

我们已经实施了一个带有SVG插图的网页，该插图由Javascript代码操纵。它在所有主流浏览器中都有效。 CSS 过渡属性用于为状态之间的转换设置动画：

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支持。

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

1 个答案: