如何自动删除/禁用宽度100％？

Question

我不知道为什么svg标签总是给出宽度100％的样式。

我已经对它发表评论，但它仍然显示我100％的宽度。

svg {
  /*-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;

 /* width:100%;
  height:100%;*/
  width: auto;
  min-width: 0;
 display: table;
}

Answer 1

除非指定固定宽度，否则SVG将尝试装入容器。您可以使用viewbox属性来限制该大小。将SVG视为容器或画布。然后，viewbox是画布的图形元素INSIDE的大小。

示例代码：

<svg width="1000" height="400" viewBox="0 0 500 200">

在这种情况下，SVG的最大宽度为1000px，但您的图像将是其一半。

然后，有了这个，你可以申请

svg{width:100%; height:100%}

和voilá，响应式SVG自动调整大小以包含元素