將整個SVG圖像縮放爲新尺寸而不必更新其中所有對象的尺寸

我有一個指定特定高度和寬度的SVG圖像。創建SVG圖像中的所有對象以使用此寬度和高度。事情是這樣的：將整個SVG圖像縮放爲新尺寸而不必更新其中所有對象的尺寸

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600"> 
    <g> 
    <circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/> 
    </g> 
</svg>

這點讓600像素的紅圈，並帶有黑色邊框：

600 pixel red circle with black border

如何調整這個SVG圖像（說200×200），而不必經歷和更新其中包含的所有對象（本例中只是紅色圓圈）？

來源

2014-10-02 Stephen Ostermiller

要調整SVG圖像的大小，您需要引入一個包含原始大小像素的viewBox屬性。然後，您可以將寬度和高度更改爲任何您想要的。

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 600 600"> 
    <g> 
    <circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/> 
    </g> 
</svg>

這樣，繪製圖像的座標系仍然是原始的600x600，但圖像顯示縮放爲200x200。

200 pixel red circle with black border

來源

2014-10-02 09:45:13

-1

替代方法：假定所有這些SVG圖像是單個文件，您可以使用<object>，<embed>或<img>標籤引用該SVG文件，然後設置width=200和height=200重新調整它。

例如：<img src="path/to/somefile.svg" width="200" height="200"...../>

來源

2014-10-03 00:12:59

將整個SVG圖像縮放爲新尺寸而不必更新其中所有對象的尺寸

回答

相關問題