为什么这个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>

如果您尝试缩放变换，则这不是问题。

<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放置的对象是否不能以这种方式进行样式化，但是在这两种情况下着色都是成功的。