我怎样才能使我的 svg 代码多边形形状在所有屏幕上响应

Question

**这就是我现在正在做的事情。我想要那个 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>

Answer 1

可以把width和height属性换成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 对此进行了解释。

Answer 2

首先使用viewbox属性，它使用viewbox="min-x, min-y, width, height"。其次，我建议您将 svg 包装在这样的容器中：

<div class="svg-container">
  <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>
</div>

然后对容器使用 css 规则来管理 svg 的大小：

.svg-container { 
    display: inline-block;
    position: relative;
    width: 50%;
}

Link to JsFiddle

我怎样才能使我的 svg 代码多边形形状在所有屏幕上响应

How can i make my svg code polygon shape responsive in all screen

html

css

responsive