html - 更改 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> )，但这或多或少是一个黑客，因为 g 的真正中心。没有改变。

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

rect {
    fill: red;
}

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

Answer 1

这可能适合您作为翻译吗？

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>