我正在玩SVG，在定位方面有一些问题。我有一系列包含在g组标签中的形状。我希望像使用容器一样使用它，所以我可以设置它的x位置，然后该组中的所有元素也会移动。但这似乎不可能。
大多数人如何定位一组元素，你希望在一起移动? 有相对定位的概念吗?例如，相对于它的父结点
当前回答
正如在另一条评论中提到的，g元素上的transform属性就是您想要的。使用transform="translate(x,y)"来移动g, g内的东西就会相对于g移动。
其他回答
正如在另一条评论中提到的，g元素上的transform属性就是您想要的。使用transform="translate(x,y)"来移动g, g内的东西就会相对于g移动。
有两种方法对多个SVG形状进行分组和定位:
第一个是使用<g>和transform属性，就像Aaron写的那样。但是不能只在<g>元素上使用x属性。
另一种方法是使用嵌套的<svg>元素。
<svg id="parent">
<svg id="group1" x="10">
<!-- some shapes -->
</svg>
</svg>
通过这种方式，#group1 svg嵌套在#parent中，x=10相对于父svg。但是，您不能在<svg>元素上使用transform属性，这与<g>元素完全相反。
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。
我知道这是旧的，但无论是<svg>组标记还是<g>都不能解决我所面临的问题。我需要调整<g>标签的y位置，它也有动画。
解决方案是同时使用<svg>和<g>标签:
<svg y="1190" x="235">
<g class="light-1">
<path />
</g>
</svg>
