更改svg组元素中心 [英] Change svg group element center

问题描述

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

I want to translate the center of a svg group to its left top corner:

而不是：

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

因此，对于以下svg：

So, for following 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 / code>）。

The rect element should be on absolute position: 0, 50 (200 - 400 / 2, 300 - 500 / 2).

我知道我可以设置 x 和 / code>属性为 rect 元素（< rect width =400height =500x = - 200y = - 250>< / rect> ），但这或多或少是黑客，因为 g

I know I can set x and y attributes to rect element (<rect width="400" height="500" x="-200" y="-250"></rect>), but this is more or less a hack since the real center of g is not changed.

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

What's the proper way to change the center of a <g> SVG element?

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>

推荐答案

这个作品可以作为 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>

这篇关于更改svg组元素中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！