SVG 变换旋转只适用于 FF
SVG transform rotate just works in FF
我需要使用 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。
我该如何解决？
这是 not yet fully implemented by Chrome and Safari 的 SVG 2 功能。我认为在 SVG 1.1 中，transform 属性对 <svg> 无效。
现在只需将 transform 属性应用于 <path> 元素，它在 Chrome 和 Safari 中也有效：
<button onclick="document.querySelector('#mySVG path').setAttribute('transform','rotate(30,20,20)');"></button>
您可能想要创建更大的视图框以适应旋转后的路径。
我需要使用 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。 我该如何解决？
这是 not yet fully implemented by Chrome and Safari 的 SVG 2 功能。我认为在 SVG 1.1 中，transform 属性对 <svg> 无效。
现在只需将 transform 属性应用于 <path> 元素，它在 Chrome 和 Safari 中也有效：
<button onclick="document.querySelector('#mySVG path').setAttribute('transform','rotate(30,20,20)');"></button>
您可能想要创建更大的视图框以适应旋转后的路径。