logo标签列表

使SVG具有响应式布局

csssvg
34

我有一个包含以下代码的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>

1
相关内容 - https://stackoverflow.com/q/30717551/104380 - vsync
6个回答
48

尝试在你的SVG周围添加一个定义宽度的容器元素，然后移除宽度和高度属性，它应该填充整个空间。

此外，你还需要增加viewBox的宽度以适应整个形状。

.svg-container {
 width: 300px;
 height: 150px;
 resize: both;
 overflow: auto;
 border: 1px dashed #aaa;
}

svg {
 width: 95%;
 height: 95%;
}
<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>

5

您可以将最大宽度设置为100%，例如：

svg {
  max-width: 100%
}

这意味着，图片将始终适应其容器的宽度。
2
对于那些使用Bootstrap（v5，2021年11月）的人：您可以将.mw-100添加到具有此效果的<svg>元素中。 - MikhailRatner
3

只需在svg标签中提供height和width即可。

svg {
      width:  auto;
      height: auto;
}
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>

附言 - 圆形的 r、cx、cy 可能与您的不同，但上下文将 SVG 的宽度和高度属性设置为 "100%"，viewBox。

最初的回答：

0

⚠️ 在较新版本的浏览器中，contentBoxSize对象发生了变化，这些演示在之前能正常工作，但现在却无法运行。已在此处进行修复，并增加了对旧版浏览器的支持，请查看编辑内容。

SVG 很强大。它的关键在于 viewBox，使用 JavaScript 控制 viewBox 可以创造出惊人的不可能的东西。

以下是一种方法，可以在尺寸改变时将 viewBox 重置为父容器的尺寸。

使用 JavaScript 的 resize Observer API。

function resetViewbox(e){
   box.setAttribute("viewBox","0 0 "+e[0].contentBoxSize[0].inlineSize+" "+e[0].contentBoxSize[0].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){
   //console.log(e[0].contentBoxSize[0].blockSize)
   text.setAttribute("y", e[0].contentBoxSize[0].blockSize / 4)
}

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: 2rem
}
<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>

0
使用Bootstrap类img-fluid使svg具有响应式。
<svg class="img-fluid" 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接