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

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?


1 answer

  • answered 2018-01-14 10:58 Robert Longson

    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.

    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.