SVG 变换 =“旋转（180）”在 Safari 11 中不起作用

Question

由于某种原因元素

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

在 Safari 11 中显示为未旋转。

Chrome 63 可以正确渲染它。

有什么问题吗？

谢谢！

Answer 1

在 SVG 1.1 中

<svg>

元素不支持变换属性。在 SVG 2 中，建议它们应该。

Chrome 和 Firefox 实现了 SVG 2 规范的这一部分，Safari 尚未这样做，IE11 永远不会。

您可以在不支持此 SVG 2 功能的浏览器中实现相同的结果，方法是将

<svg>

元素替换为

<g>

元素，或者在

<g>

元素上创建

<svg>

子元素并进行变换在

<g>

元素上。

Answer 2

浏览器允许您在 SVG 元素上使用 CSS，因此一个简单的解决方法是使用 CSS 转换。

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

Answer 3

另一种选择是不在

transform

元素上使用

<svg

，如下所示：

<svg version="1.1" transform="rotate(90)" 

将其设置在

<path

元素上（例如），如下所示：

<path transform="rotate(90 18 18)"

请注意，您需要设置 x,y 旋转中心（在我的示例中我使用

viewBox="0 0 36 36"

）