使 SVG 具有响应性 [英] Making SVG responsive

问题描述

我有一个带有以下代码的 SVG.我想让它有一个响应宽度，我读过你不应该在视口上设置宽度和高度，但是当我删除它们时，SVG 消失了.我应该如何更改它以便 SVG 调整大小?

.thumb_arrow{z-索引:1000；背景尺寸:100% 100%；浮动:对；位置:相对；底部:2rem；左:2rem;边距右:1rem;@media(最小宽度:@screen-medium){右边距: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" 启用-背景="新 0 0 73.672 275.734" xml:space="保留"><path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.3818.3191.3764,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>

解决方案

尝试在 SVG 周围添加一个具有定义宽度的容器元素，然后移除宽度和高度.它应该填满空间.

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

.svg-container {宽度:10em；}

<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.3818.3191.3764,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>

I have an SVG with the following code. I'd like to make it have a responsive width, and I've read that you shouldn't set width and height on the viewport, but when I remove them the SVG disappears. How should I change this so that the SVG will resize?

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

解决方案

Try adding a container element with a defined width around your SVG, then removing width and height. It should fill the space.

You also need to increase the width of the viewBox to accommodate the whole shape.

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

这篇关于使 SVG 具有响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！