为什么这个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
放置的对象是否不能以这种方式进行样式化,但是在这两种情况下着色都是成功的。
1条答案
按热度按时间ijnw1ujt1#
你在CSS中使用SVG syntax,这将不起作用。等价的CSS syntax是