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所建议）。

data()

根据内容将SVG视图框X和Y居中

1 个答案: