使SVG响应

Question

我有一个SVG,代码如下.我想让它具有响应宽度,并且我已经读过你不应该在视口上设置宽度和高度,但当我删除它们时,SVG会消失.我该怎么改变这个以便SVG调整大小？

.thumb_arrow{
  z-index: 1000;
  background-size: 100% 100%;
  float: right;
  position:relative;
  bottom: 2rem;
  left:2rem;
  margin-right:1rem;
  @media (min-width: @screen-medium) {
    margin-right: 15rem;
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10em" height="10em"viewBox="0 0 50 100" enable-background="new 0 0 73.672 275.734" xml:space="preserve"> 
		<path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
</svg>

Answer 1

尝试在SVG周围添加一个定义宽度的容器元素,然后删除宽度和高度.它应该填补空间.

您还需要增加viewBox的宽度以适应整个形状.

<div class="svg-container">
    <svg viewBox="0 0 60 100"> 
        <path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
    </svg>    
</div>

.svg-container {
  width: 10em;
}

Answer 2

您可以将 max-with 设置为 100%，即

svg {
  max-width: 100%
}

这意味着，图像将始终适应其容器的宽度