SVG定位

Question

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

1. 大多数人如何定位一组你希望同时移动的元素？
2. 有相对定位的概念吗？例如,相对于其父母

Answer 1

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

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

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

链接:实施例从该SVG 1.1规范

Answer 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值.

请参见http://tutorials.jenkov.com/svg/svg-element.html.

Answer 3

正如其他注释中所提到的,元素的transform属性g就是你想要的.使用transform="translate(x,y)"移动g内部和周围的事物g会相对于移动g.

Answer 4

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

第一个<g>与transform属性一起使用的Aaron写道.但是你不能只x在<g>元素上使用一个属性.

另一种方法是使用嵌套<svg>元素.

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

这样,#group1 svg嵌套在#parent中,并且x=10相对于父svg.但是,你不能transform在<svg>元素上使用属性,这与<g>元素完全相反.