全屏SVG無縮放

Question

有什麼辦法可以讓SVG 100％100％但禁用縮放嗎？

我需要圖像在頁面中間（水平和垂直）。這裏的問題是我想顯示SVG畫板之外的區域，所以用CSS來集中不適合我。我知道，如果您有100％寬度和設定高度的圖像，或者反之亦然，則可以顯示這些區域。

這對Flash來說是可能的，但我還沒有找到用SVG和HTML來實現的方法。

普通SVG：

<svg style="width: 100px; height: 100px;"> 
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" /> 
</svg> 

100％寬

<svg style="width: 100%; height: 100px;"> 
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" /> 
</svg> 

現在，當你把相同的代碼，並通過100％，使其100％，它縮放圖像。有沒有辦法阻止這個？

100％100％加虛沒有大規模碼

<svg style="width: 100%; height: 100%;" ##no_scale_code##> 
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" /> 
</svg> 

下面是代碼的codepen例子，我有這麼遠： http://codepen.io/cecilomar/pen/Gcpys

Answer 1

你codepen例如SVG包括一個viewBox屬性。如果您不想在縮小尺寸時縮放SVG，請刪除viewBox。