SVG变换旋转只适用于FF

Question

我需要使用javascript旋转SVG，我可以使用以下代码在Firefox中执行：

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

但是这段代码在其他浏览器中不起作用，例如：CHROME，IE，SAFARI。 我该如何解决这个问题？

Answer 1

这是一个SVG 2功能，not yet fully implemented by Chrome and Safari。我认为在SVG 1.1中，transform属性对<svg>无效。 现在只需将transform属性应用于<path>元素，它也适用于Chrome和Safari：

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

您可能想要创建一个更大的视图框以适合旋转的路径。