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

时间:2019-06-30 13:50:57

标签: javascript css svg

我一直在研究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的错误或预期的行为,或者我在代码中做错了什么,任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

正如罗伯特·朗森(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>