css 转换SVG对象

r1zhe5dt  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(193)

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

ijnw1ujt

ijnw1ujt1#

你在CSS中使用SVG syntax,这将不起作用。等价的CSS syntax

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>

相关问题