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

Question

For some reason element

is shown as not rotated in Safa

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.

Answer 2

Browsers allow you to use CSS on the SVG-elements, so an easy fix is to use the CSS transform instead.

<!-- ( works on all elements ) -->
<path style="transform:rotate(180deg)" />