SVG定位答案 - 爱码网

【问题标题】：SVG PositioningSVG定位
【发布时间】：2009-01-26 12:11:15
【问题描述】：

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

大多数人如何定位一组您希望串联移动的元素？
有没有相对定位的概念？例如相对于其父项

【问题讨论】：

【解决方案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

【讨论】：

是的，这行得通。如果元素属性以 % 比率获得，则将出现完美的位置。

【解决方案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.

【讨论】：

对，SVG元素也可以是分组元素。我想指出，SVG 元素默认实现了裁剪（至少目前在 Chrome 中是这样）。这意味着任何溢出都将不可见。与“g”元素不同。只需设置溢出 =“可见”，如果这让你感到厌烦，你就可以重新开始工作了。
如果你想用百分比翻译一组元素，这很有用：stackoverflow.com/a/17103928/470117
用svg代替g有什么缺点吗？

【解决方案3】：

正如另一条评论中提到的，g 元素上的transform 属性是您想要的。使用transform="translate(x,y)" 移动g，g 内的东西将相对于g 移动。

【讨论】：

【解决方案4】：

有两种方法可以对多个 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> 元素完全相反。

【讨论】：

为什么没有 x 和 y 属性，而所有其他 svg 标签都有？这意味着位置在
开源委员会就是这样。
我同意...这似乎是一个糟糕的设计选择。简单地增加一个组的 X 变换需要编写一个可能很复杂的字符串并将所有变量存储在其他地方
@user1952009：有一个机会——只是一个机会——你实际上并不了解 SVG 的设计选择。
用于分组。它本身并不代表任何形状，因此它具有位置或大小是没有意义的。不过，拥有一个 transform 属性是有意义的，您可以将其读作“将此转换应用于整个组”。

【解决方案5】：

我知道这是旧的，但 <svg> 组标签和 <g> 都没有解决我面临的问题。我需要调整一个 <g> 标签的 y 位置，它上面也有动画。

解决方案是同时使用<svg> 和<g> 标签：

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

【讨论】：