CSS 使 SVG 具有响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25940741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making SVG responsive
提问by agentem
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?
我有一个带有以下代码的 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>回答by brenna
Try adding a container element with a defined width around your SVG, then removing width and height. It should fill the space.
尝试在 SVG 周围添加一个具有定义宽度的容器元素，然后删除宽度和高度。它应该填满空间。
You also need to increase the width of the viewBox to accommodate the whole shape.
您还需要增加 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;
}
回答by Divyanshu Rawat
For me I had to make the circle responsive instead of path, This is how I did that.
对我来说，我必须使圆圈响应而不是路径，这就是我这样做的方式。
.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>
P.S - Circle r, cx, cymight be different for you, but the context set the width and height attributes of the SVG to "100%", viewBox.
PS - Circle r, cx, cy对您来说可能不同，但上下文将 SVG 的宽度和高度属性设置为"100%"，viewBox。
回答by NVRM
Svg is powerful. It's all about the viewBox.
Svg 很强大。这都是关于 viewBox 的。
Here is a way to reset the viewBoxto the parent container dimensions, on dimensions change.
这是一种在尺寸更改时将 viewBox 重置为父容器尺寸的方法。
Using the javascriptresize Observer API.
使用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>This can be used in a lot of different ways:
这可以以多种不同的方式使用：
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>回答by Chaitanya Mogal
Just provide heightand widthto svgtag.
只需提供height和width以svg标签。
svg {
width: auto;
height: auto;
}
