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 个答案: