SVG定位

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

要移动内容，只需将转换放在 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

上一个答案有一个更短的替代方案。 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 值。

See http://tutorials.jenkov.com/svg/svg-element.html。

正如另一条评论中提到的，g 元素上的 transform 属性是您想要的。使用 transform="translate(x,y)" 移动 g，g 内的东西将相对于 g 移动。

有两种方法可以对多个 SVG 形状进行分组并定位该组：

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

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

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

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

我知道这是旧的，但 <svg> 组标签和 <g> 都没有解决我面临的问题。我需要调整一个 <g> 标记的 y 位置，它上面也有动画。

解决方案是同时使用 <svg> 和 <g> 标记：

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>