SVG定位

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

  1. 大多数人如何定位一组元素，你希望在一起移动?
  2. 有相对定位的概念吗?例如，相对于它的父结点
266611 次浏览
小开

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

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

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

链接:例子 from SVG 1.1规范

小开

正如在另一个注释中提到的，g元素上的transform属性就是你想要的。使用transform="translate(x,y)"来移动g，并且g中的内容将相对于g移动。

小开

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

小开

有两种方法对多个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>

提交答案