SVG transform =“ rotate（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>元素上来实现相同的结果。

刚刚遇到这个问题。这个响应是好的，但值得注意的是，对组进行旋转将使元素从其 (0,0) 坐标旋转。在 SVG 上执行此操作会使其从中心旋转。所以尝试类似的方法：`transform="rotate(180 500 250)"`。 (2认同)
另外，当在包含的元素上旋转时，需要一个“height”值，添加到@Gabriel的观点，如果您的尺寸是动态的，您可以将“transform-origin =“center””添加到元素 (2认同)

Answer 2

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

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