更改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

可能這對你的作品作爲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>