javascript - Firefox 忽略 SVG 中的内联 CSS，chrome 显示它

Question

我一直在用 SVG 制作动画 Logo ，它非常简单。我使用 JavaScript 函数 animate() 触发它。

当我在 chrome 中运行 animate() 时，样式成功应用并显示 Logo ，但是当我在 firefox 中执行相同操作时，它失败了。

我还注意到我的 SVG 中的内联 block 没有应用，无论我将它放在文档中的什么位置，因此我断定这一定是内联 CSS 的问题。

这是我当前的代码:

<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" id="svg8">
<defs>
  <style>
  .rect{
  height:0px;
  transition:height 1s ease;}
  </style>
</defs>
  <g id="layer1" transform="translate(0 -197)" fill-opacity=".617" stroke-width="13.229">
    <rect class="rect" id="logo-2" width="16.611" x="-120.759" y="-266.945" ry="8.305" transform="rotate(-165)" opacity=".71" fill="#ff584a"/>
    <rect class="rect" id="logo-1" width="16.611" x="-40.446" y="205.589" ry="8.305" transform="rotate(-15)" opacity=".71" fill="#ff584a"/>
    <rect class="rect" id="logo-3" width="16.611" x="-6.786" y="214.383" ry="8.305" transform="rotate(-15)" opacity=".71" fill="#0a3fa6"/>
  </g>
  <script>
  function animate(){
    document.getElementById('logo-1').style="height:83.055px;";
    document.getElementById('logo-2').style="height:83.055px;";
    document.getElementById('logo-3').style="height:83.055px;";
    console.log("IT WORKS");
  }
  </script>

</svg>

有趣的是，在 firefox 检查器中，应用了 CSS，但是在文档本身中没有任何变化......

我不确定这是 Firefox 的错误还是预期的行为，或者我在我的代码中做错了什么，非常感谢任何帮助!

Answer 1

让矩形元素的宽度、高度、x 和 y 成为可以使用 CSS 动画进行动画处理的 CSS 属性是 SVG 2 规范的一项新功能。在 SVG 1.1 中，此类内容是属性，只能使用 javascript 和 SMIL 进行动画处理。

幸运的是，Firefox 刚刚实现了 SVG 2 的这一部分，从 Firefox 69 开始，这将如您所愿地工作。你可以试试 nightly如果您想测试它，现在就开始。

您可以等待或将动画转换为 SMIL。