SVG定位

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

我和SVG玩过一场比赛,在定位上也有一些问题。我有一系列的形状,这些形状包含在g团体标签。我希望能像容器一样使用它,所以我可以设置它的x位置,然后这个组中的所有元素也会移动。但这似乎是不可能的。

  1. 大多数人是如何定位一组你想要同时移动的元素的?
  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值。

用户回答回答于

g元素中的所有内容都是相对于当前转换矩阵定位的。

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

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

扫码关注云+社区