由于某种原因元素
<svg width="1000" height="500" transform="rotate(180)">...</svg>
在Safari 11中显示为未旋转。
Chrome 63正确呈现。
有什么问题？
谢谢！
答案 0 :(得分：4)
在SVG 1.1 <svg>元素did not support transform attributes中。在SVG 2中，它是proposed that they should。
Chrome和Firefox实现了SVG 2规范的这一部分，Safari还没有这样做。
您可以在不支持此SVG 2功能的浏览器中获得相同的结果，方法是将<svg>元素替换为<g>元素，或者创建<g>子元素<svg>元素并将变换放在<g>元素上。
答案 1 :(得分：3)
浏览器允许您在SVG元素上使用CSS，因此一个简单的解决方法是改为使用CSS转换。
<!-- ( works on all elements ) -->
<path style="transform:rotate(180deg)" />