SVG transform="rotate(180)" 在 Safari 11 中不起作用

Posted 2023-03-06

【中文标题】SVG transform="rotate(180)" 在 Safari 11 中不起作用

【英文标题】：SVG transform="rotate(180)" does not work in Safari 11

【发布时间】：2018-06-23 05:30:19

【问题描述】：

由于某种原因元素

<svg   transform="rotate(180)">...</svg>

在 Safari 11 中显示为未旋转。

Chrome 63 可以正确呈现它。

有什么问题？

谢谢！

【参考方案1】：

在 SVG 1.1 中 <svg> 元素 did not support transform attributes。在 SVG 2 中，它是 proposed that they should。

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

在不支持此 SVG 2 功能的浏览器中，您可以通过将 <svg> 元素替换为 <g> 元素或在 <svg> 元素上创建 <g> 子元素并将<g> 元素上的变换。

【讨论】：

我想用 svg 上的父 div 来做这件事，但这让它更简单、更快捷。非常感谢！

IE11是一样的

刚刚遇到这个问题。这个响应很好，但值得注意的是，对组进行旋转将使元素从其 (0,0) 坐标旋转。在 SVG 上执行此操作会将其从中心旋转。所以试试类似的东西：transform="rotate(180 500 250)".

另外添加，当在包含的元素上旋转时，height 值是必需的，加上@Gabriel 的观点，如果您的尺寸是动态的，您可以将transform-origin="center" 添加到元素

【参考方案2】：

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

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

【讨论】：

在我的例子中，我将样式直接应用于