如何在保持縱橫比的同時縮放SVG矩形？

這可能是一個愚蠢的問題，但我今天剛剛開始使用SVG，並且遇到了一個問題。我不確定我是否只是在錯誤地思考它，或者如果我正在嘗試做一些無法工作的事情。如何在保持縱橫比的同時縮放SVG矩形？

我想要做的是創建一個高度爲其寬度30％的SVG矩形。我希望這個SVG在<div>範圍內縮放，但我似乎無法使其工作。

理想情況下，我希望能夠爲SVG設置最大高度和寬度，以便在此範圍內（1500x450）。

此外，我試圖不使用JavaScript來完成這件事。

SVG具有preserveAspectRatio屬性。你堅持它在<svg>元素，並給它一個合適的值，這取決於你希望如何保持寬高比，它會爲你做所有事情，不需要JavaScript。您還需要設置viewBox屬性，否則將忽略preserveAspectRatio。

2013-10-21 21:28:58

謝謝！ viewBox與preserveAspectRatio結合正是我所期待的。 –

爲了使SVG正確縮放，它們需要具有viewBox屬性。 viewBox屬性描述了內容的邊界。沒有它，渲染器（瀏覽器等）就無法解決如何縮放SVG來填充父項。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"> 

    <rect x="0" y="0" width="100" height="30" fill="orange" /> 

</svg>

2013-10-22 05:00:42

回答