Search code examples
javascriptdomsvgsvg-animate

SVG transform rotate just works in FF

I need to rotate a SVG with javascript , i can do it in Firefox with this code :

<button onclick="document.getElementById('mySVG').setAttribute('transform','rotate(30,20,20)');">rotate It</button>
<svg id="mySVG" viewBox="0 0 24 24" width="33"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

But this code won't work in other browsers like : CHROME , IE, SAFARI. How can i fix that?

Solution

  • It's an SVG 2 feature which is not yet fully implemented by Chrome and Safari. I think in SVG 1.1 the transform attribute is not valid for <svg>. For now just apply the transform attribute to the <path> element, it works in Chrome and Safari as well:

    <button onclick="document.querySelector('#mySVG path').setAttribute('transform','rotate(30,20,20)');"></button>

    You may want to create a larger viewbox to fit the rotated path.