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

Posted 2023-03-05

【中文标题】为啥 SVG 图像不使用 CSS 的“宽度”属性进行缩放？

【英文标题】：Why don’t SVG images scale using the CSS “width” property?为什么 SVG 图像不使用 CSS 的“宽度”属性进行缩放？

【发布时间】：2016-12-27 15:32:27

【问题描述】：

html

<div id="hero">
   <div id="social">
      <img src="facebook.svg">
      <img src="linkedin.svg">
      <img src="instagram.svg">
    </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 的大小。以下是我通过不同方法获得的结果（注意图标如何向herodiv 的中间折叠）：

img width: 2em;

img width: 3em;

img width: 4em;

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

img height: 2em;

img height: 3em;

img height: 4em;

我得到了我需要的行为，但我不确定这是正确的方法。为什么会这样？您知道调整 SVG 图像大小的更好方法（尤其是使用 Flexible Box Module）吗？

【参考方案1】：

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

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

【讨论】：

我对 downvote 的猜测是，改变 viewbox 实际上并没有缩放 svg 元素，它只是改变了 viewport 的大小。

【参考方案2】：

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

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

我相信您的问题是您的 SVG 在其中定义了固定高度。打开 SVG 文件并确保它们：

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

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

【讨论】：

您的回答似乎是我的问题的解决方案。因此，如果我不指定 SVG 的 width 和 height，我想我可以毫无问题地对其进行缩放。

截至 2019 年，看起来 SVG 遵循 css 宽度和高度规则，即使它们内部有视图框和/或宽度和高度。在 Chrome 和 Firefox 中测试。

@Ilyich OP 的问题是他们只在 CSS 中指定了 width。 height 来自 SVG。

【参考方案3】：

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

例如如果它已经有 width="x" height="y" 然后 =>

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

反之。

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

【讨论】：

它是 viewBox，而不是视口

【参考方案4】：

如果 svg 文件的高度和宽度已在 svg 文件中定义width="100" height="100"，则添加此width="100" height="100" viewBox="0 0 100 100"，同时保留已定义的width="100" height="100"。 然后，您可以在您的情况下使用选择器img 来缩放css 文件中的svg，这样您就可以这样做：imgheight: 20px; width: 20px;，图像就会缩放。

【参考方案5】：

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

【参考方案6】：

transform CSS 属性可让您旋转、缩放、倾斜或平移 一个元素。

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

【讨论】：

这个解决方案对我来说效果很好，因为我无法控制 SVG 文件的内部结构。感谢您发帖；）

很好的解决方案，但不是最好的，因为转换后的 SVG 图像父元素不会意识到 SVG 元素大小的增加。

【参考方案7】：

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

之前

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

之后

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

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

【参考方案8】：

如果不是太大问题，那么您可以通过图像 HTML 标记导入，然后轻松调整其大小，同时让父元素知道它们已调整大小，然后您可以通过 HTTP 导入它们将它们用作图像图片标签中的请求。这将解决您的目的，但您不能放大太多，因为这会使它变得模糊。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。