為什么這段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>

你在CSS中使用SVG語法，這是行不通的。等效的CSS語法是

transform: rotate(30deg);
transform-origin: 0 10px;

<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(30deg);
                transform-origin: 0 10px;
            }
        </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>