如何围绕中心旋转SVG图标？旋转偏移问题求助

踩过无数次这个坑！你遇到的偏移问题，核心原因是SVG的变换默认以画布左上角(0,0)为原点，而不是你图标自身的中心。直接用rotate(180)或者顺序不对的translate+rotate，都会让图标绕着画布原点转，自然就飞出去了。

两种快速解决方法： #

方法1：手动调整变换顺序（最稳妥，兼容性好）

SVG的变换是从右往左执行的，所以要实现“围绕自身中心旋转后放到目标位置”，需要按以下逻辑写变换：

1. 先把图标平移，让它的中心对齐到画布原点（translate(-图标宽/2, -图标高/2)）
2. 然后旋转180度（rotate(180)）
3. 最后平移到目标位置（translate(目标x, 目标y)）

你的图标width是18，height是32，所以中心偏移量是(9,16)。修改后的<use>标签如下：

<use xlink:href="#ToiletVertical" width="18.0" height="32.0" fill="none" stroke="black" class="icon 5" transform="translate(481,447) rotate(180) translate(-9,-16)"/>

方法2：用transform-origin直接指定旋转中心（更直观）

现代浏览器支持transform-origin属性，直接把旋转中心设为图标的中心，这样旋转就会绕着自身中心转，不需要手动计算偏移。你可以保留原来的x/y属性，加上这两个设置：

<use xlink:href="#ToiletVertical" x="481" y="447" width="18.0" height="32.0" fill="none" stroke="black" class="icon 5" transform-origin="center center" transform="rotate(180)"/>

也可以写具体数值transform-origin="9px 16px"（对应宽高的一半），效果完全一致。

为什么你之前的尝试失败？ #

你用translate(481, 448) rotate(180)时，SVG会先执行rotate(180)（绕(0,0)转），再执行translate，旋转后的图标已经偏离了原来的位置，平移后自然就不对了。变换顺序搞反，是这个问题最常见的误区！

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