Svg多邊形不會與瀏覽器窗口縮放

嘿，我有一些Svg元素組成每個多邊形的形狀。看看下面的代碼：Svg多邊形不會與瀏覽器窗口縮放

<body> 
<svg class="svgRules" width = "100%" height="200"> 
    <polygon class="opmaakPoly" id ="p1" points="500,0 1920,0 1920,200 600,200"/> 
</svg> 

<svg class="svgRules" width = "100%" height="200"> 
    <polygon class="opmaakPoly" id="p2" points="600,0 1920,0 1920,200 700,200"/> 
</svg> 
</body>

與以下樣式：

body{ 
    margin: 0; 
    padding: 0; 
} 

.svgRules{ 
    float: left; 
} 

.opmaakPoly{ 
    stroke:#F0c; 
    fill: #FFF; 
    stroke-width:2px; 
}

現在，當我縮放瀏覽器窗口中的多邊形不按比例調整我試過點設定爲百分比但沒有似乎工作。那麼如何使瀏覽器窗口的多邊形元素縮放？

JSFiddle

來源

2016-01-19 FutureCake

問題是什麼..？ SVG已經設置爲它的容器'body'的'100％''你的'body'沒有'width' ...但是看起來很好：https://jsfiddle.net/n6nurrnh/ – Pogrindis

對不起，不要讓我解決，所以你可以看到這個問題 – FutureCake

oke感謝rainforce15和maxshuty我想出瞭如何正確地做到這一點！

你確實需要添加：

viewBox="0,0,1920,1080" preserveAspectRation="none"

，但你需要做視框裏面否則會變形的多邊形形狀的多邊形形狀的大小。

因此而不是使用：

viewBox="0,0,1920,1080"

使用

viewBox="0,0,1920,200"

來源

2016-01-22 11:22:51 FutureCake

嘗試

viewBox="0 0 1920 1080" preserveAspectRatio="none"

或類似添加到您的svg標籤 - 視框中應該有你想要的（svg-internal）的大小，而preserveAspectRatio將允許它的比例適當， - 檢查可用如果「none」沒有創建所需的結果，則返回值。

來源

2016-01-19 14:42:13 Rainforce15

Svg多邊形不會與瀏覽器窗口縮放

回答

相關問題