SVG定位

我正在玩SVG，在定位方面遇到了一些问题。我有一系列的形状，它们包含在

g

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

大多数人是如何定位一组您希望串联移动的元素的

有没有相对定位的概念？e、 g.相对于其母公司

---

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

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

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

---

链接：从

中，如其他注释所述，

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值不同

---

.

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

第一个将

与

transform

属性一起使用，如Aaron所写。但是不能只在

元素上使用

x

属性

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

另一种方法是使用嵌套的

元素

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

---

通过这种方式，#group1 svg嵌套在#父svg中，

x=10

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

元素上使用

transform

属性，这与

元素正好相反。

我知道这是旧的，但是

组标记和

都没有修复我所面临的问题。我需要调整

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

解决方案是同时使用

和

标签：

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

没错，SVG元素也可以是分组元素。我想指出，SVG元素在默认情况下实现了剪裁（至少目前在Chrome中是这样）。这意味着任何溢出都将不可见。与“g”元素不同。只需设置overflow=“visible”就可以重新开始工作，如果这会影响您的话。如果您想用百分比转换一组元素，这很有用：使用svg而不是g有什么缺点吗？为什么没有x和y属性，而所有其他svg标记都有呢？这意味着在一个世界里，位置总是绝对的。。。没有相对的立场，开源委员会就是这样。我同意。。。这似乎是一个糟糕的设计选择。简单地增加组的X变换需要编写一个潜在的复杂字符串并将所有变量存储在某个位置else@user1952009：有一种可能——只是有一种可能——您并不真正理解SVG中的设计选择。用于分组。它本身并不表示任何形状，因此它没有位置或大小的意义。不过，有一个transform属性是有意义的，您可以读作“将此转换应用于整个组”。