更改 svg 组元素中心答案

【问题标题】：Change svg group element center更改 svg 组元素中心
【发布时间】：2014-12-25 00:51:22
【问题描述】：

我想将 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>)，但这或多或少是一个 hack，因为 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>

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：

我想要一种不依赖组宽/高的更原生的方式。
我认为你也可以使用百分比。