为什么我的SVG图像不能使用CSS"width"属性进行缩放？

Question

我正在建立一个投资组合网站.

HTML代码

<div id = "hero">
   <div id = "social">
      <img src = "facebook.svg">
      <img src = "linkedin.svg">
      <img src = "instagram.svg">
    </div>
</div>

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;
        }
    }
}

问题是我无法使用CSS width属性调整SVG的大小.以下是我在不同情况下获得的内容:

img { width: 2em; }

img { width: 3em; }

img { width: em; }

请注意图标如何向herodiv 的中间折叠.

相反,如果我使用CSS height属性:

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

这种行为是我需要的,但我不确定这是正确的方法.为什么会这样？您是否了解调整SVG图像大小的更好方法(特别是使用flexbox模型)？

Answer 1

SVG与位图图像(例如PNG等)不同.如果SVG具有viewBox- 如您所见 - 那么它将被缩放以适合其定义的视口.它不会像PNG那样直接扩展.

因此,增加width的img不会使任何的图标,如果更高的高度受到限制.你最终会img在一个更宽的盒子里水平居中.

我相信你的问题是你的SVG中有一个固定的高度.打开SVG文件并确保它们:

1. 没有width和height定义,或
2. 已经width和height两个都设置为"100%".

那应该可以解决你的问题.如果没有,请将您的一个SVG发布到您的问题中,以便我们可以看到它是如何定义的.

Answer 2

该转换CSS属性可以旋转，缩放，倾斜或翻译的元素。

例如，您可以轻松使用该transform: scale(2.5);选项来缩放 2.5 倍。

Answer 3

我必须自己弄清楚，但是您需要一些 svgs 来匹配 viewBox 和宽度+高度。

例如，如果它已经有width="x" height="y"那么 =>

添加 <svg ... viewBox="0 0 [width] [height]">

而相反。

之后它将与 <svg ... style="width: xxx; height: yyy;">

Answer 4

1. 如果 svg 文件的高度和宽度已width="100" height="100"在 svg 文件中定义，则x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"在保留已定义的width="100" height="100".
2. 然后，您可以通过在您的案例中使用选择器来缩放 css 文件中的 svg，img以便您可以执行以下操作：img{height: 20px; width: 20px;}并且图像将缩放。

Answer 5

使用任何文本编辑器打开 SVGwidth并height从根节点中删除和属性。

前

<svg width="12px" height="20px" viewBox="0 0 12 20" ...

后

<svg viewBox="0 0 12 20" ...

现在图像将始终填充所有可用空间，并将使用 CSSwidth和height. 它不会伸展，所以它只会增长到可用空间。

Answer 6

您必须修改viewBox属性才能使用 svg 正确更改高度和宽度。它位于<svg>svg 的标签中。

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox