svg多个g组合自动挨着排列不重叠

在SVG中，如果你想要多个`<g>`（图形组）元素按照特定方式排列且彼此不重叠，你可以直接控制它们的位置和尺寸。每个`<g>`元素内部可以包含多个路径(`<path>`)或其他SVG元素，而这些元素会按顺序显示在同一层级。

下面是一个简单的例子，假设你有三个`<g>`元素，你想让他们并排放置在一行上：

<svg width="400" height="100">
  <g transform="translate(0, 0)"> <!-- 第一组 -->
    <rect x="10" y="10" width="100" height="80" fill="#f00" /> <!-- 元素1 -->
  </g>
  <g transform="translate(120, 0)"> <!-- 第二组 -->
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="none" /> <!-- 元素2 -->
  </g>
  <g transform="translate(240, 0)"> <!-- 第三组 -->
    <polygon points="50,50 150,50 100,100" stroke="green" fill="none" /> <!-- 元素3 -->
  </g>
</svg>

在这个例子中，每组都有独立的`transform`属性，`translate(x,y)`用于移动元素到指定的X和Y坐标。

如果你想让所有`<g>`元素紧密排列在一起，只需调整它们之间的`x`值，比如减少它们的`translate`属性中的`x`增量。如果需要保持固定间距，可以为每个`<g>`加上相同的偏移量。