SVG将x，y（0,0）左上角更改为图像的中心

Question

如何更改svg文件的中心？

实际上，当我设置svg图像的X或Y属性时，这些坐标基于我图像的左上角，我想用图像的中心设置它们。

有什么想法吗？

PS：我使用扩展名为.svg的图像

Answer 1

在您的SVG中，将viewBox设置为-{width / 2}, -{height / 2}, width, height。如果宽度为600且高度为400，则SVG将包含viewBox="-300 -200 600 400"。

<强> JSFiddle example using the HTML5 logo

Answer 2

假设svg元素的宽度为W且其高度为H。 您可以使用以下模式：

<svg width="W" height="W">
    <g transform="matrix(1 0 0 -1 W/2 H/2)">
        ...
    </g>
</svg>

<svg width="200" height="200" style="border: 1px solid gray;">
    <g transform="matrix(1 0 0 -1 100 100)">
        <circle cx="0" cy="0" r="25" fill="red"></circle>
        <circle cx="50" cy="50" r="10" fill="blue"></circle>
    </g>
</svg>