javascript - 基于内容将 SVG viewbox X 和 Y 居中

Question

假设我有以下 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 的左上角绘制一个正方形。

如果我想移动 View 框使正方形居中，我可以像这样更改 View 框 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 的情况下实现相同的结果？

Answer 1

是的。使用转换(如@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>