javascript - 根据内容将SVG View 框X和Y居中

假设我有以下SVG：

 <svg width="640" height="480" viewbox="0 0 640 480" style="border: 1px dotted black;">
		<line x1="0" y1="0" x2="100" y2="0" stroke="black"></line>
		<line x1="100" y1="0" x2="100" y2="100" stroke="black"></line>
		<line x1="100" y1="100" x2="0" y2="100" stroke="black"></line>
		<line x1="0" y1="100" x2="0" y2="0" stroke="black"></line>
	</svg>

这将在SVG的左上角绘制一个正方形。

如果要移动视图框以使正方形居中，则可以这样更改视图框X和Y：

<svg width="640" height="480" viewbox="-270 -190 640 480" style="border: 1px dotted black;">
		<line x1="0" y1="0" x2="100" y2="0" stroke="black"></line>
		<line x1="100" y1="0" x2="100" y2="100" stroke="black"></line>
		<line x1="100" y1="100" x2="0" y2="100" stroke="black"></line>
		<line x1="0" y1="100" x2="0" y2="0" stroke="black"></line>
	</svg>

我的问题是，在不更改视图框X和Y或线Xs和Ys的情况下能否获得相同的结果？

最佳答案

是。使用转换（如@sean建议）。

<svg width="640" height="480" viewbox="0 0 640 480" style="border: 1px dotted black;">
  <g transform="translate(270, 190)">
    <line x1="0" y1="0" x2="100" y2="0" stroke="black"></line>
    <line x1="100" y1="0" x2="100" y2="100" stroke="black"></line>
    <line x1="100" y1="100" x2="0" y2="100" stroke="black"></line>
    <line x1="0" y1="100" x2="0" y2="0" stroke="black"></line>
  </g>
</svg>