html - 在 HTML 中调整 SVG 大小而不调整画布大小

Question

我试图通过更改高度和宽度参数来增加 SVG 图像的大小，但它不起作用，而是画布的大小发生变化并出现导航栏。还有两份高度和宽度参数。我不知道要改哪些。

<svg xmlns:.... 
     width="85.75438690185547" 
     height="75.7368392944336" 
     xml:space="preserve" 
     inkscape:version="0.48.4 r9939" 
     sodipodi:docname="output.svg" 
     style=""><rect 
     id="backgroundrect" 
     width="100%" 
     height="100%" 
     x="0" y="0" 
     fill="none" 
     stroke="none"/>
     ...
 </svg>

标签： htmlcsssvg

Answer 1

svg要在不改变svg画布尺寸的情况下调整形状大小，请添加viewBox

我添加了一个红框来显示 svg 画布的边框。

style="border:1px solid red;"

在下面的示例中，svg画布width ="85"的height ="75"大小等于
viewBox = "0 0 85 75"

因此，矩形按原样显示，而不改变其大小。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 85 75" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	

• 要在不改变画布大小的情况下增加矩形的大小，svg您需要减小viewBox="0 0 42 35"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 42 35" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	 

• 要减小矩形的大小而不改变画布的大小，svg您需要增加viewBox = "0 0 170 150"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 170 150" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	 

我希望这可以帮助你。