Chrome中SVG元素使用rotate和transform-origin旋转异常的问题咨询

这不是你的操作失误，而是SVG元素和普通HTML元素在transform-origin行为上的差异导致的预期外效果。

为什么会出现这个问题？ #

普通HTML元素的transform-origin默认会基于元素自身的边界框计算，但SVG元素的默认坐标系统是基于整个SVG画布（viewport）的。默认情况下，transform-origin的参考框是整个SVG视口，而非单个元素的边界框——所以你设置transform-origin: center时，实际是把旋转中心设为了SVG画布的中心，而非元素自身的中心。

可行的解决方案 #

方案1：使用SVG原生的transform属性（兼容性最好） #

直接在SVG元素上使用SVG自带的transform属性，手动指定旋转中心的坐标。比如你要旋转一个<rect x="10" y="10" width="50" height="50"/>，它的中心坐标是10+50/2=35、10+50/2=35，那么可以这样写：

<rect x="10" y="10" width="50" height="50" transform="rotate(45 35 35)" />

这种方法不需要依赖CSS，所有支持SVG的浏览器都能正常工作。

方案2：用CSS的transform-box属性（适合坚持用CSS的场景） #

CSS新增了transform-box属性，用来指定transform-origin的参考框。对于SVG元素，设置transform-box: fill-box就能让transform-origin基于元素自身的边界框计算。你只需要在CSS里添加这一行：

.your-svg-element {
  transform: rotate(45deg);
  transform-origin: center;
  transform-box: fill-box;
}

你的Chrome 65版本已经支持这个属性（Chrome从64版本开始支持），不需要加前缀就能生效。

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