Html 为什么我的 SVG 图像不能使用 CSS 的“width”属性进行缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39056537/
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
Why don’t my SVG images scale using the CSS "width" property?
提问by Pinecone
I'm building a portfolio website.
我正在建立一个投资组合网站。
HTML Code
HTML代码
<div id = "hero">
<div id = "social">
<img src = "facebook.svg">
<img src = "linkedin.svg">
<img src = "instagram.svg">
</div>
</div>
CSS code (using SASS)
CSS 代码（使用 SASS）
#hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
#social {
width: 50%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
width: 2em;
}
}
}
The problem is that I'm not able to resize SVGs using the CSS widthproperty. Here is what I obtain in different cases:
问题是我无法使用 CSSwidth属性调整 SVG 的大小。这是我在不同情况下获得的信息：
img { width: 2em; }
img { width: 2em; }
img { width: 3em; }
img { width: 3em; }
img { width: em; }
img { width: em; }
Please note how icons collapse toward the middle of the herodiv.
请注意图标如何向herodiv的中间折叠。
Instead, if I use the CSS heightproperty:
相反，如果我使用 CSSheight属性：
img { height: 2em; }
img { height: 2em; }
img { height: 3em; }
img { height: 3em; }
img { height: 4em; }
img { height: 4em; }
This behaviour is what I need, but I'm not sure this is the right way. Why this happens? Do you know better ways of resizeing SVG images (especially using the flexbox model)?
这种行为是我所需要的，但我不确定这是正确的方法。为什么会发生这种情况？您知道调整 SVG 图像大小的更好方法（尤其是使用flexbox 模型）吗？
回答by Paul LeBeau
SVGs are different than bitmap images such as PNG etc. If an SVG has a viewBox- as yours appear to - then it will be scaled to fit it's defined viewport. It won't directly scale like a PNG would.
SVG 不同于位图图像，例如 PNG 等。如果 SVG 具有viewBox- 正如您所看到的 - 那么它将被缩放以适合其定义的视口。它不会像 PNG 那样直接缩放。
So increasing the widthof the imgwon't make the icons any taller if the height is restricted. You'll just end up with the imghorizontally centred in a wider box.
因此，增加width的img不会使任何的图标，如果更高的高度受到限制。你最终会img在一个更宽的盒子里水平居中。
I believe your problem is that your SVGs have a fixed height defined in them. Open up the SVG files and make sure they either:
我相信你的问题是你的 SVG 定义了一个固定的高度。打开 SVG 文件并确保它们：
- have no
widthandheightdefined, or - have
widthandheightboth set to"100%".
- 没有
width和height定义，或 - 有
width和height都设置为"100%"。
That should solve your problem. If it doesn't, post one of your SVGs into your question so we can see how it is defined.
那应该可以解决您的问题。如果没有，请将您的 SVG 之一发布到您的问题中，以便我们了解它是如何定义的。
回答by OZZIE
I had to figure it out myself but some svgs your need to match the viewport & width+height in.
我必须自己弄清楚，但是您需要一些 svgs 来匹配视口和宽度+高度。
E.g. if it already has width="x"height="y"then =>
例如，如果它已经有width="x"height="y"那么 =>
add <svg ... viewport="0 0 [width] [height]">
添加 <svg ... viewport="0 0 [width] [height]">
and the opposite.
而相反。
After that it will scale with <svg ... style="width: xxx; height: yyy;">
之后它将与 <svg ... style="width: xxx; height: yyy;">
回答by Pat
- If the svg file has a height and width already defined
width="100" height="100"in the svg file then add thisx="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"while keeping the already definedwidth="100" height="100". - Then you can scale the svg in your css file by using a selector in your case
imgso you could then do this:img{height: 20px; width: 20px;}and the image will scale.
- 如果 svg 文件的高度和宽度已
width="100" height="100"在 svg 文件中定义，则x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"在保留已定义的width="100" height="100". - 然后，您可以通过在您的案例中使用选择器来缩放 css 文件中的 svg，
img这样您就可以执行以下操作：img{height: 20px; width: 20px;}并且图像将缩放。
回答by Félix Bachand
You have to modify the viewBoxproperty to change the height and the width correctly with a svg. It is in the <svg>tag of the svg.
您必须修改该viewBox属性以使用 svg 正确更改高度和宽度。它在<svg>svg的标签中。
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox
回答by Lucas Moyano Angelini
I have the same problem... and I found a simple solution. Just import the SVG image with the follow tool, and export: https://editor.method.ac/
我有同样的问题......我找到了一个简单的解决方案。只需使用以下工具导入SVG图像，然后导出：https: //editor.method.ac/
