SVG多邊形無法隨着瀏覽器窗口縮放

Question

嘿，我有一些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

Answer 1

嘗試添加

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

或類似於svg標簽-視圖框應具有所需的（ svg-internal ）大小，而preserveAspectRatio將允許其正確縮放-如果“無”不能產生所需的結果，請檢查可用值。

Answer 2

多虧了rainforce15和maxshuty，我才知道如何正確地做！

您確實需要添加以下內容：

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

但是您需要將viewBox設置為內部多邊形形狀的大小，否則它將使多邊形形狀變形。

所以不要使用：

viewBox="0,0,1920,1080"

采用

viewBox="0,0,1920,200"

SVG多邊形無法隨着瀏覽器窗口縮放

問題描述

2 個解決方案

解決方案1
1 2016-01-19 14:42:13

解決方案2
1 已采納 2016-01-22 11:22:51

SVG多邊形無法隨着瀏覽器窗口縮放

問題描述

2 個解決方案

解決方案1 1 2016-01-19 14:42:13

解決方案2 1 已采納 2016-01-22 11:22:51

解決方案1
1 2016-01-19 14:42:13

解決方案2
1 已采納 2016-01-22 11:22:51