为什么 SVG 图像不使用 CSS 的“宽度”属性进行缩放？

超文本标示语言

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

使用 SASS 的 CSS

#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 的大小。下面是我使用不同方法得到的结果(请注意图标是如何向 hero div的中间折叠的) :

img { width: 2em; }

enter image description here

img { width: 3em; }

enter image description here

img { width: 4em; }

enter image description here

但是，如果我使用 CSS height属性:

img { height: 2em; }

enter image description here

img { height: 3em; }

enter image description here

img { height: 4em; }

enter image description here

我得到了我需要的行为，但我不确定这是正确的方式。为什么会这样？你知道更好的方法来调整 SVG 图像的大小(特别是使用 软箱模组)吗？

230253 次浏览
小开

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

Https://developer.mozilla.org/en/docs/web/svg/attribute/viewbox

小开

SVG 与 PNG 等位图图像不同。如果一个 SVG 有一个 viewBox-就像你的那样-那么它将被缩放以适应它定义的视图。它不会像 PNG 那样直接扩展。

因此，如果高度受到限制，增加 img的 width不会使图标变得更高。你最终只会与 img水平中心在一个更广泛的框。

我认为您的问题在于 SVG 中定义了一个固定的高度。打开 SVG 文件，确保它们是:

  1. 没有定义 width和 height，或者
  2. 将 width和 height都设置为 "100%"。

这应该能解决你的问题。如果没有，那么将您的一个 SVG 发布到您的问题中，这样我们就可以看到它是如何定义的。

小开

我必须自己弄清楚，但是一些 svgs 你需要匹配 viewBox & width + height。

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

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

正好相反。

之后，它将与 <svg ... style="width: xxx; height: yyy;">(不需要内联 css，但从一个类，<svg class="my-amazing-icon" ... >和添加样式从样式表完成。

更多信息

请注意，viewBox="0 0 [w] [h]"可能是“错误的”一些 svgs，我的意思是双零部分。前两个数字与图标在你定义的框中的位置有关，如果它应该采用全宽或全高(或两者兼而有之——只有当它是一个方形图标 ofc 时才有效)。

也就是说，对于从一开始就缺少 viewBox 属性的 svgs，我还没有遇到这个问题。

小开
  1. 如果 svg 文件的高度和宽度已经在 svg 文件中定义了 width="100" height="100"，那么添加这个 width="100" height="100" viewBox="0 0 100 100"，同时保留已经定义的 width="100" height="100"。
  2. 然后您可以在 css 文件中使用选择器来缩放 svg，在您的案例中使用 img，因此您可以这样做: img{height: 20px; width: 20px;}和图像将缩放。
小开

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

小开

使用 变形 CSS 属性可以旋转、缩放、倾斜或平移 一种元素。

因此，例如，您可以轻松地使用 transform: scale(2.5);选项来扩展2.5倍。

小开

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

之前

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

之后

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

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

小开

如果问题不大的话，你可以直接导入一个图像 HTML 标签，然后舒适地调整大小，同时让父元素知道他们已经调整了大小，然后你可以通过图像标签中的 HTTP 请求导入它们作为图像使用。这将解决你的目的，但你不能放大太多，因为这会使它模糊。


提交答案