SVG定位
SVG定位
提问于 2009-01-26 12:11:16
我正在使用SVG，并且在定位方面有一些问题。我有一系列的形状，它们包含在g组标签中。我希望像使用容器一样使用它，这样我就可以设置它的x位置，然后该组中的所有元素也会移动。但这似乎是不可能的。
- 大多数人是如何定位一组你希望同时移动的元素的？
- 有相对定位的概念吗？例如，相对于其父
回答 5
Stack Overflow用户
发布于 2009-01-26 12:33:02
G元素中的所有内容都是相对于当前变换矩阵进行定位的。
要移动内容，只需将转换放入g元素：
<g transform="translate(20,2.5) rotate(10)">
<rect x="0" y="0" width="60" height="10"/>
</g>链接:来自the SVG 1.1 spec的Example
Stack Overflow用户
发布于 2012-11-29 03:59:28
对于前面的答案，有一个更短的替代方案。SVG元素也可以通过嵌套svg元素进行分组：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
</svg>
</svg>这两个矩形是相同的(除了颜色)，但父svg元素具有不同的x值。
Stack Overflow用户
发布于 2009-02-18 14:32:31
正如在另一个注释中提到的，g元素上的transform属性就是您想要的。使用transform="translate(x,y)"移动g，g中的内容将相对于g移动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/479591
复制相关文章
相似问题