Firefox忽略SVG中的内联CSS，Chrome将其显示

Question

I've been working on an animated logo in SVG, it's pretty simple. I trigger it with a javascript function, animate().

When i run animate() in chrome, the styles successfully apply and the logo displays, but when i do the same in firefox it fails.

i also noted that the inline block in my SVG is not applied, regardless of where i place it in the document, hence i concluded it must be a problem with inline CSS.

Here is my current code :

 <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> 

Interestingly in the firefox inspector, the CSS is applied, however in the document itsself nothing changes...

I'm not sure if this is a bug with firefox or intended behavior, or i'm doing something wrong in my code, any help would be much appreciated !

Answer 1

Having width, height, x and y of rect elements be CSS properties that can be animated with CSS animations is a new feature of the SVG 2 specification. In SVG 1.1 such things were attributes and could only be animated with javascript and SMIL.

Fortunately Firefox has just implemented this part of SVG 2 and from Firefox 69 this will work as you wish. You can try a nightly right now if you wish to test it.

You can either wait or convert the animation to SMIL.

Answer 2

As Robert Longson mention is his answer, for now you can't animate the height of SVG elements using CSS.

This is how you can do it using SMIL animations:

 <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>