Safari 11中SVG transform="rotate(180)"无法使用

Question

由于某种原因，元素

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

在Safari 11中，它显示为未旋转。

Chrome 63可以正确渲染它。

问题出在哪里？

谢谢！

- LaBrie

Answer 1

在 SVG 1.1 中，<svg>元素不支持变换属性。在 SVG 2 中，建议支持该功能。

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

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

- Robert Longson

---

刚遇到这个问题。这个回复是正确的，但值得注意的是，在组上进行旋转将会从其（0,0）坐标旋转元素。在SVG上进行旋转将会从中心旋转。因此，可以尝试像这样做：transform="rotate(180 500 250)"。 - Gabriel

另外需要补充的是，在对包含元素进行旋转时，需要指定一个 height 值。此外，针对 @Gabriel 的观点，如果您的尺寸是动态的，可以在元素上添加 transform-origin="center"。 - AntG

在Safari中，动画还需要提供from {}和to {}。只有使用{}在Chrome中可以工作，但动画在Safari中不起作用。 - Rockie Yang

感谢@RobertLongson的出色回答和亮点。虽然问题中没有包含动画部分，但您的答案大多解决了我在动画方面遇到的问题。刚刚意识到在Safari中也不能缩写起始状态。 - Rockie Yang

也许你应该提出一个 Webkit 错误报告。似乎不太可能有任何动画问题的人会看到这个问题。或者提出并自己回答另一个问题，除非已经有一个适合的 Safari 动画问题。 - Robert Longson

Answer 2

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

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

- arc

---

在我的情况下，我直接将样式应用于<svg>元素。没有transform-origin，只有transform:rotate(180deg)，如下所示：<svg width="1000" height="500" style="transform:rotate(180deg)">... - Juan Castano

这个 CSS 在 Safari 中不起作用，这也是这个问题的核心。被投票否决了。 - E10