英文:
Transforming svg objects
问题
为什么这个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); <!-- 这里进行旋转 -->
}
</style>
<rect id="rectangle1" height="10" width="10" transform="rotate(30,0,10)"/> <!-- 这里进行旋转 -->
<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); <!-- 这里进行缩放 -->
}
</style>
<rect id="rectangle1" height="10" width="10" transform="scale(2)"/> <!-- 这里进行缩放 -->
<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放置的对象设置样式，但在这两种情况下都成功设置了颜色。
英文:
Why does this SVG code successfully rotate the left square but not the right?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
This is not an issue if you try a scale transform instead.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
I included the fill attribute as a test to see if objects placed by use couldn't be styled in this way, but the coloring was successful in both cases.
答案1
得分: 4
你在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)"/> <!-- 在此处缩放 -->
<rect id="rectangle2" height="10" width="10" />
</defs>
<use href="#rectangle1" x="20" y="10"/>
<use href="#rectangle2" x="50" y="10"/>
</svg>
英文:
You're using the SVG syntax in CSS, this won't work. The equivalent CSS syntax is
transform: rotate(30deg);
transform-origin: 0 10px;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论