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功能，尚未被Chrome和Safari完全实现。我认为在 SVG 1.1 中，转换属性对<svg>无效。现在只需将 transform 属性应用于 <path> 元素，它也适用于 Chrome 和 Safari：

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

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