css - 如何自动删除/禁用宽度 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 视为容器或 Canvas 。然后，viewbox 是 Canvas 内部图形元素的大小。

示例代码:

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

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

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

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

瞧瞧，响应式 SVG 会自动调整大小以包含元素