为何左侧SVG矩形可成功旋转，右侧矩形却无法实现该效果？

问题场景 #

以下SVG代码里，左侧正方形能正常旋转，右侧正方形却无法旋转：

<svg id="work_window" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 30">
    <defs>
        <style>
            #rectangle1 {
                fill: blue;
            }
            
            #rectangle2 {
                fill: blue;
                transform: rotate(30,0,10); <!-- scale here -->
            }
        </style>
        <rect id="rectangle1" height="10" width="10" transform="rotate(30,0,10)"/> <!-- scale here -->
        <rect id="rectangle2" height="10" width="10" />
    </defs>
    <use href="#rectangle1" x="20" y="10"/>
    <use href="#rectangle2" x="50" y="10"/>
</svg>

但改用scale变换时，两侧正方形都能正常缩放：

<svg id="work_window" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 30">
    <defs>
        <style>
            #rectangle1 {
                fill: blue;
            }
            
            #rectangle2 {
                fill: blue;
                transform: scale(2); <!-- scale here -->
            }
        </style>
        <rect id="rectangle1" height="10" width="10" transform="scale(2)"/> <!-- scale here -->
        <rect id="rectangle2" height="10" width="10" />
    </defs>
    <use href="#rectangle1" x="20" y="10"/>
    <use href="#rectangle2" x="50" y="10"/>
</svg>

测试发现fill属性在样式中设置对两个矩形都有效，说明样式本身能作用到<use>引用的元素上。

失效原因 #

核心问题是SVG属性的rotate和CSS的transform: rotate()语法不兼容：

• SVG元素的transform属性里，rotate()支持三个参数：rotate(角度, 旋转中心X, 旋转中心Y)，比如代码里的rotate(30,0,10)是合法的。
• 但CSS的transform: rotate()只接受单个角度参数（必须带deg单位，比如rotate(30deg)），额外的参数会被浏览器直接忽略，导致整个rotate变换不生效。

而scale变换在两种写法中语法兼容：

• SVG属性的scale(2)和CSS的transform: scale(2)参数格式一致，都是接受缩放比例值，所以样式中的scale能正常生效。

解决方法 #

如果要在CSS样式中实现带旋转中心的旋转效果，需要拆分两步：

1. 用rotate()指定旋转角度（必须加deg单位）
2. 用transform-origin指定旋转中心坐标

修改后的样式代码如下：

#rectangle2 {
    fill: blue;
    transform: rotate(30deg);
    transform-origin: 0 10;
}

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