更改svg组元素中心

Question

我想将svg组的中心翻译到左上角：

而不是：

+-----------------+       x-----------------+
|                 |       |                 |
|                 |       |                 |
|                 |       |                 |
|        x        | ----> |                 |
|                 |       |                 |
|                 |       |                 |
|                 |       |                 |
+-----------------+       +-----------------+

所以，关注svg：

<svg width="900" height="900">
    <g transform="translate(200,300)">
        <rect width="400" height="500"></rect>
    </g>
</svg>

rect元素应位于绝对位置：0, 50（200 - 400 / 2，300 - 500 / 2）。

我知道我可以将x和y属性设置为rect元素（<rect width="400" height="500" x="-200" y="-250"></rect>），但这或多或少是一个黑客，因为{{{{ 1}}没有改变。

更改g SVG元素中心的正确方法是什么？

<g>

rect {
    fill: red;
}

Answer 1

这可能对您有用translate吗？

rect {
    fill: red;
}

<svg width="900" height="900">
  <g transform="translate(200,300)">
    <g transform="translate(-200, -250)">
      <rect width="400" height="500"></rect>    
    </g>
  </g>
</svg>