关于位置：SVG定位


SVG Positioning

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

  • 大多数人如何定位您希望一并移动的一组元素？
  • 有相对定位的概念吗？ 例如 相对于其父代

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

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

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

    链接：SVG 1.1规范中的示例

    有一个比先前答案更短的选择。 SVG元素也可以通过嵌套svg元素进行分组：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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。

    相关讨论

    如另一条注释中所述，g元素上的transform属性就是您想要的。使用transform="translate(x,y)"移动g，g中的内容将相对于g移动。

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

    正如Aaron所写，第一个将与transform属性一起使用。但是，您不能只在元素上使用x属性。

    另一种方法是使用嵌套的元素。

    1
    2
    3
    4
    5
    <svg id="parent">
       <svg id="group1" x="10">
          <!-- some shapes -->
       </svg>
    </svg>

    这样，＃group1 svg嵌套在#parent中，而x=10相对于父svg。但是，不能在元素上使用transform属性，这与元素完全相反。

    相关讨论