SVG定位

我正在玩SVG，并且在定位时遇到了一些问题。 我有一系列g组标签中包含的形状。 我希望像容器一样使用它，所以我可以设置它的x位置，然后该组中的所有元素也将移动。 但这似乎不可能。

1. 大多数人如何定位一系列你想要一起移动的元素？
2. 有没有相对定位的概念？ 例如相对于其父母

Answer 1

g元素中的所有元素都相对于当前的变换matrix进行定位。

要移动内容，只需将转换放在g元素中：

 <g transform="translate(20,2.5) rotate(10)"> <rect x="0" y="0" width="60" height="10"/> </g> 

链接：来自SVG 1.1规范的 示例

Answer 2

有一个较短的select前一个答案。 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值。

请参阅http://tutorials.jenkov.com/svg/svg-element.html 。

Answer 3

正如在其他评论中提到的那样， g元素的transform属性就是你想要的。 使用transform="translate(x,y)"移动g内的内容将相对于g移动。

Answer 4

有两种方法可以组合多个SVG形状并定位组：

像Aaron写的那样，首先将<g>和transform属性一起使用。 但是你不能在<g>元素上使用x属性。

另一种方法是使用嵌套的<svg>元素。

 <svg id="parent"> <svg id="group1" x="10"> <!-- some shapes --> </svg> </svg> 

这样，＃group1 svg嵌套在#parent中， x=10是相对于父svg的。 但是，不能在<svg>元素上使用transform属性，这与<g>元素相反。