縮放SVG的Web

Question

我一直在學習SVG，這是我目前：http://jsfiddle.net/C8d34/1/

這是我的SVG代碼具體爲：

<svg width="100%" height="100%"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

我的問題是，如何來我的SVG不會擴展到淺藍色區域的100％高度和寬度，因爲這正是我試圖通過我的代碼實現和期望的。

Answer 1

寬度聲明不是定義因子的。它定義了SVG將有多大，但你需要建立由viewbox

手段的座標限制在這種情況下，我認爲你有一個正方形是100×100讓你的視框中declartion會是這樣

HTML

<svg viewBox="0 0 100 100"> /* this here */ 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

現在你可以在SVG的寬度設置爲任何你喜歡和SVG將自動縮放以適應大小。

CSS

svg { 
    width:50%; 
    height:50%; 
} 

結果你得到這個

JSFiddle Demo

如果不定義任何尺寸將擴展到母公司的100％，這樣的

JSFiddle Demo 2

另請參閱 - svg viewBox attribute