Question

我一直在研究SVG中的动画徽标，这非常简单。我使用javascript函数animate（）触发了它。

当我在chrome中运行animate（）时，样式将成功应用并显示徽标，但是当我在Firefox中执行相同操作时，它将失败。

我还注意到，无论我将其放置在文档中的什么位置，都不会应用我的SVG中的内联块，因此，我得出结论认为内联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

具有rect元素的width，h，x和y是CSS属性，可以使用CSS动画进行动画处理，这是SVG 2规范的新功能。在SVG 1.1中，这些东西是属性，只能使用javascript和SMIL进行动画处理。

幸运的是，Firefox刚刚实现了SVG 2的这一部分，而从Firefox 69开始，它将按您的意愿运行。如果您想测试nightly，可以立即尝试。

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

Answer 2

正如罗伯特·朗森（Robert Longson）提到的那样，现在，您无法使用CSS设置SVG元素的高度。

这是使用SMIL动画的方法：

<svg viewBox="0 0 100 100" id="svg8">

   <style type="text/css">
        <![CDATA[
        .rect{
    stroke:black;}
        ]]> 
  </style>

  <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" height="0" transform="rotate(-165)" opacity=".71" fill="#ff584a">
      <animate 
       attributeName="height"
       attributeType="XML"
       values="0;83.055"
       dur=".5s"
       fill="freeze"/>
    </rect>
    <rect class="rect" id="logo-1" width="16.611" x="-40.446" y="205.589" ry="8.305" height="0"  transform="rotate(-15)" opacity=".71" fill="#ff584a">
      <animate 
       attributeName="height"
       attributeType="XML"
       values="0;83.055"
       dur=".5s"
       fill="freeze"/>
    </rect>
    <rect class="rect" id="logo-3" width="16.611" x="-6.786" y="214.383" ry="8.305" height="0" transform="rotate(-15)" opacity=".71" fill="#0a3fa6">
      <animate 
       attributeName="height"
       attributeType="XML"
       values="0;83.055"
       dur=".5s"
       fill="freeze"/>
    </rect>
  </g>
  

</svg>

Firefox会忽略SVG中的嵌入式CSS，Chrome会显示出来

2 个答案: