SVG的transform="rotate(180)"在Safari 11不生效，Chrome 63正常，求原因

这个问题我之前排查过，本质是Safari 11对SVG根元素的transform属性支持存在兼容性局限——它不认可直接写在<svg>标签上的transform属性，而Chrome 63及以上的现代浏览器已经兼容这种写法了。

具体原因拆解：

• 早期SVG规范里，transform属性原本是为SVG内部元素（比如<rect>、<circle>、<g>）设计的，Safari 11严格遵循了旧版规范，没有将该属性的支持范围扩展到根<svg>元素。
• Chrome 63提前跟进了新版SVG规范，允许在根<svg>标签上直接使用transform属性做变换。

给你几个实用的解决方案：

1. 将变换移到内部<g>容器上
   把整个SVG内容包裹在一个<g>标签中，给这个<g>添加transform属性，Safari就能正常识别了。记得加上旋转中心坐标，避免元素偏移：

   <svg width="1000" height="500">
     <g transform="rotate(180 500 250)"> <!-- 500 250是SVG宽高的一半，作为旋转中心 -->
       <!-- 你的SVG内容 -->
     </g>
   </svg>
   

2. 用CSS的transform属性替代
   给<svg>标签添加CSS样式实现旋转，这种方式Safari 11完全支持：

   svg {
     transform: rotate(180deg);
     transform-origin: center; /* 可选，确保旋转中心在SVG中央 */
   }
   

   也可以直接写在标签的style属性里：

   <svg width="1000" height="500" style="transform: rotate(180deg);">
     <!-- 你的SVG内容 -->
   </svg>
   

3. 调整viewBox属性（适合简单场景）
   如果你的SVG是基于viewBox布局的，也可以通过修改viewBox的取值实现旋转效果，但这种方式仅适用于结构简单的SVG，通用性不如前两种方案。

内容的提问来源于stack exchange，提问作者LaBrie