Firefox игнорирует встроенный CSS в SVG, Chrome отображает его

Question

Я работал над анимированным логотипом в SVG, все довольно просто. Я запускаю его с помощью функции JavaScript, animate ().

Когда я запускаю animate () в Chrome, стили успешно применяются, и отображается логотип, но когда я делаю то же самое в 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

Ширина, высота, x и y прямоугольных элементов являются свойствами CSS, которые можно анимировать с помощью CSS-анимации, - это новая функция спецификации SVG 2. В SVG 1.1 такие вещи были атрибутами и могли быть анимированы только с помощью javascript и SMIL.

К счастью, Firefox только что реализовал эту часть SVG 2, и с Firefox 69 это будет работать, как вы пожелаете. Вы можете попробовать по ночам прямо сейчас, если хотите протестировать его.

Вы можете подождать или преобразовать анимацию в SMIL.

Answer 2

Поскольку Роберт Лонгсон упоминает его ответ, сейчас вы не можете анимировать высоту SVG-элементов с помощью CSS.

Вот как вы можете сделать это, используя 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>