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

只需向height标签提供width和svg。

svg {
      width:  auto;
      height: auto;
}

Answer 3

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

svg {
  max-width: 100%
}

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

Answer 4

对我来说，我必须使圆圈响应而不是路径，这就是我做到的方式。

.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-圆 r，cx，cy 对您来说可能有所不同，但是上下文将SVG的宽度和高度属性设置为“ 100％” ，viewBox

Answer 5

Svg功能强大。 所有关于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>

使SVG响应

5 个答案: