2016-10-17 70 views
0

我有下面的SVG圖形,當窗口調整大小時,它正在縮放,但縱橫比保持不變。我怎麼能得到這個只能在X軸上縮放,並保持在80px的Y?如何使SVG僅在X軸上縮放?

<svg width="100%" viewBox="0 0 300 80"> 
    <rect x="0" y="0" fill="yellow" height="80" width="100"/> 
    <rect x="100" y="0" fill="blue" height="80" width="100"/> 
    <rect x="200" y="0" fill="red" height="80" width="100"/> 
</svg> 

謝謝

回答

1

你有幾個選項。首先,你可以簡單地指定圖形的高度,例如使用CSS。

svg { 
    height: 80px; 
    width: 100%; 
} 

如果這不是你想要的效果,你可以得到與preserveAspectRatio屬性更復雜。這是很難說什麼樣的價值會爲你工作,因爲它不是完全清楚你想要什麼(假定CSS方法上面並沒有做到這一點),但也許是這樣的:

<svg viewBox="0 0 300 80" preserveAspectRatio="none"> 

退房參考鏈接瞭解更多細節。

+0

你的第一種方法是行不通的。 OP應該使用第二種方法('preserveAspectRatio')。 –

+0

謝謝,它的作品! =) – silgon