SVG 定位

Question

我正在使用 SVG，但在定位方面遇到了一些问题。我有一系列形状包含在

g

组标签中。我希望像容器一样使用它，这样我就可以设置它的 x 位置，然后该组中的所有元素也会移动。但这似乎不可能。

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

Answer 1

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

要移动内容，只需将转换放入 g 元素即可：

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

链接：示例来自 SVG 1.1 规范

Answer 2

对于之前的答案，还有一个更短的替代方案。 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

正如其他评论中提到的，

transform

元素上的

g

属性就是您想要的。使用

transform="translate(x,y)"

移动

g

，

g

内的物体将相对于

g

移动。

Answer 4

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

第一个使用

<g>

和

transform

属性，如 Aaron 所写。但您不能只在

x

元素上使用

<g>

属性。

另一种方法是使用嵌套的

<svg>

元素。

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

这样，#group1 svg 嵌套在#parent 中，

x=10

是相对于父 svg 的。但是，您不能在

transform

元素上使用

<svg>

属性，这与

<g>

元素完全相反。

Answer 5

我知道这已经很旧了，但是

<svg>

组标签和

<g>

都没有解决我面临的问题。我需要调整

<g>

标签的 y 位置，该标签上也有动画。

解决方案是同时使用

<svg>

和

<g>

标签：

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