使 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 的宽度以适应整个形状。

.svg-container {
  width: 10em;
}

<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>

Answer 2

对我来说，我必须让圆圈响应而不是路径，我就是这样做的。

.circle-container {
  width: 6vw;
  height: 6vw;
}

<div class='circle-container'>
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <circle cx="46" cy="45" r="40"></circle>
  </svg>
</div>

PS - Circle r, cx, cy 对你来说可能不同，但是上下文将 SVG 的宽度和高度属性设置为 "100%", viewBox .

Answer 3

Svg 很强大。 都是关于 viewBox 的。，使用 JavaScript 来控制 viewBox 可以创造出惊人的不可能的东西。

这是一种在尺寸发生变化时将 viewBox 重置为父容器尺寸的方法。

使用 javascript resize Observer API.

function resetViewbox(e){
   box.setAttribute("viewBox","0 0 "+e[0].contentBoxSize.inlineSize+" "+e[0].contentBoxSize.blockSize)      
   console.log("New viewBox: ", box.getAttribute("viewBox"))   
}

new ResizeObserver(resetViewbox).observe(fluid)

#fluid {
  width: 200px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vh
}

<div id="fluid">
   <svg id="box" viewBox="0 0 100 100">
   <circle cx="76" cy="56" r="30" fill="blue"/>
   <text  x="10" y="30">I stay readable!</text>
   </svg>
</div>

这可以以多种不同的方式使用：

function resetViewbox(e){
   text.setAttribute("y",e[0].contentBoxSize.blockSize / 3)
}

new ResizeObserver(resetViewbox).observe(fluid)

#fluid {
  width: 280px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vh
}

<div id="fluid">
   <svg id="box" viewBox="0 0 280 100">
   <circle cx="76" cy="56" r="30" fill="blue"/>
   <text id="text" x="10" y="30">I stay readable!</text>
   </svg>
</div>

Answer 4

只需将height 和width 提供给svg 标签即可。

svg {
      width:  auto;
      height: auto;
}

Answer 5

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

svg {
  max-width: 100%
}

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