Центрируйте 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.

Если я хочу переместить окно просмотра так, чтобы квадрат был отцентрирован, я могу изменитьокна просмотра 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>