为什么我的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; }

https://regex101.com/r/gI6sN8/14

img { width: 3em; }

img { width: em; }

请注意图标如何向hero div的中间折叠。

相反，如果我使用CSS height属性：

img { height: 2em; }

img { height: 3em; }

img { height: 4em; }

这种行为是我需要的，但我不确定这是正确的方法。为什么会这样？您是否知道调整SVG图像大小的更好方法（特别是使用 flexbox模型）？

Answer 1

SVG与位图图像（例如PNG等）不同。如果SVG具有viewBox - 正如您所看到的那样 - 那么它将被缩放以适合其定义的视口。它不会像PNG那样直接缩放。

如果高度受到限制，那么增加width的{​​{1}}将不会使图标更高。您最终会将img水平居中放在更宽的框中。

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

1. 未定义img和width，或
2. 将height和width设置为height。

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

Answer 2

1. 如果svg文件的高度和宽度已在svg文件中定义为1.0 0.1349395033468213 ，则在保留已定义的width="100" height="100"的同时添加此x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"。
2. 然后，您可以在案例width="100" height="100"中使用选择器来缩放css文件中的svg，这样就可以执行此操作：img，并且图像将缩放。

Answer 3

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

之前

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

之后

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

现在图像将始终填满所有可用空间，并使用 CSS width 和 height 进行缩放。但它不会伸展，所以它只会增长到可用空间。

Answer 4

通过transform CSS属性，您可以旋转，缩放，倾斜或平移 元素。

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

Answer 5

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

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

Answer 6

我必须自己弄清楚，但需要一些svg来匹配视口和宽度+高度。

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

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

相反。

此后，它将以<svg ... style="width: xxx; height: yyy;">

缩放

Answer 7

我有同样的问题...，我找到了一个简单的解决方案。 只需使用以下工具导入SVG图像，然后导出： https://editor.method.ac/

Answer 8

您还可以使用transform: scale("")选项。