我如何使我的svg代码多边形在所有屏幕上都响应

问题描述 投票:0回答:1

**这是我现在正在做的。我想要该svg代码以使其响应。 **

   

<!DOCTYPE html>          
<html>
<body>
<svg height="500" width="500">
    <polygon points="126 119,109 132,96 146,87 157,78 171,71 189,66 213,68 239,73 259,84 279,96 287,110 298,127 308,142 316,156 326,169 333,178 339,191 348,203 355,218 361,230 363,242 363,262 361,274 357,291 351,309 343,322 335,342 319,357 306,367 296,377 284,385 268,388 261,392 245,393 236,396 218,394 201,389 185,384 174,381 169,374 155,363 142,356 135,344 125,326 113,314 106,292 97,276 93,249 89,225 88,204 90,187 93,157 103,145 109,136 114" style="fill:red;stroke:purple;stroke-width:1">
    </polygon>
</svg>
</body>
</html>
html css responsive
1个回答
0
投票

您可以将widthheight属性替换为viewBox,这使得控制起来容易得多。

<svg viewBox="0 0 500 500">
    <polygon points="126 119,109 132,96 146,87 157,78 171,71 189,66 213,68 239,73 259,84 279,96 287,110 298,127 308,142 316,156 326,169 333,178 339,191 348,203 355,218 361,230 363,242 363,262 361,274 357,291 351,309 343,322 335,342 319,357 306,367 296,377 284,385 268,388 261,392 245,393 236,396 218,394 201,389 185,384 174,381 169,374 155,363 142,356 135,344 125,326 113,314 106,292 97,276 93,249 89,225 88,204 90,187 93,157 103,145 109,136 114" style="fill:red;stroke:purple;stroke-width:1">
    </polygon>
</svg>

这将使您的SVG响应,但是您可能希望控制最大大小。

svg {
    max-width: 500px;
}

这是使其具有响应能力的简化方法。考虑很多事情,this one等很多文章对此做了解释。

© www.soinside.com 2019 - 2024. All rights reserved.