Question

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

大多数人如何定位一组你希望同时移动的元素？
有相对定位的概念吗？例如相对于其父母

Answer 1

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

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

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

链接：Example来自the SVG 1.1 spec

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值。

See 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>都没有解决我所面临的问题。我需要调整还带有动画的标签的y位置。

解决方案是同时使用和标签：

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

SVG定位

5 个答案: