SVG多边形无法随着浏览器窗口缩放

Question

hey i have some Svg elements consisting each out of a polygon shape. 嘿，我有一些Svg元素，每个元素都由多边形组成。 see the following code: 请参阅以下代码：

<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>

with the following style: 具有以下样式：

body{
    margin: 0;
    padding: 0;
}

.svgRules{
    float: left;
}

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

now when i scale the browser window the polygon shapes dont scale accordingly i tried setting the points to percentages but that didnt seem to work. 现在，当我缩放浏览器窗口时，多边形形状不会相应缩放，我尝试将点设置为百分比，但这似乎没有用。 so how do i make the polygon element scale with the browser window? 那么如何使多边形元素随浏览器窗口缩放？

JSFiddle 的jsfiddle

Answer 1

Try to add 尝试添加

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

or similar to your svg tag - the viewbox should have the your desired ( svg-internal ) size, while preserveAspectRatio will allow it to scale properly - check the available values if "none" doesn't create the desired result. 或类似于svg标签-视图框应具有所需的（ svg-internal ）大小，而preserveAspectRatio将允许其正确缩放-如果“无”不能产生所需的结果，请检查可用值。

Answer 2

oke thanks to rainforce15 and maxshuty i figured out how to do it properly! 多亏了rainforce15和maxshuty，我才知道如何正确地做！

you indeed need to add the: 您确实需要添加以下内容：

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

but you need to make the viewBox the size of the polygon shape inside otherwise it will deform the polygon shape. 但是您需要将viewBox设置为内部多边形形状的大小，否则它将使多边形形状变形。

so instead of using: 所以不要使用：

viewBox="0,0,1920,1080"

use 采用

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