SVG преобразование поворота просто работает в FF

Question

мне нужно повернуть SVG с JavaScript, я могу сделать это в 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> 

Но этот код не будет работать в других браузерах, таких как: ХРОМ, IE, SAFARI. Как я могу это исправить?

Answer 1

Это функция SVG 2, которая является not yet fully implemented by Chrome and Safari. Я думаю, что в SVG 1.1 атрибут transform недействителен для <svg>. На данный момент просто применить атрибут преобразования к <path> элемента, он работает в Chrome и Safari, а также:

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

Вы можете создать большую ViewBox, чтобы соответствовать повернутого пути.