SVG定位

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

1. 大多数人如何定位您希望一并移动的一组元素？
2. 有相对定位的概念吗？例如相对于其父级

g元素中的所有内容都相对于当前变换矩阵定位。

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

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

链接：实施例从该SVG 1.1规范

有一个比先前答案更短的选择。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。

如另一条评论中所述transform，g元素上的属性就是您想要的。使用transform="translate(x,y)"来回移动，遗嘱中的g事物g会相对于g。

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

正如Aaron所写，第一个<g>与transform属性一起使用。但是您不能只x在<g>元素上使用属性。

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

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

这样，＃group1 svg嵌套在#parent中，并且x=10相对于父svg。但是，您不能transform在<svg>element 上使用属性，这与<g>element 完全相反。