css - SVG transform="rotate(180)" does not work in Safari 11

Question

For some reason element

<svg width="1000" height="500" transform="rotate(180)">...</svg>

is shown as not rotated in Safari 11.

Chrome 63 renders it properly.

What's the problem?

Thanks!

Answer 1

In SVG 1.1 <svg> elements did not support transform attributes. In SVG 2 it is proposed that they should.

Chrome and Firefox implement this part of the SVG 2 specification, Safari does not yet do so and IE11 never will.

You can achieve the same result in browsers that do not support this SVG 2 feature either by replacing the <svg> element by a <g> element or by creating an <g> child element on the <svg> element and putting the transform on the <g> element.