是否可以使用 CSS 缩放内联 SVG？ [复制]

Posted 2023-03-06

【中文标题】是否可以使用 CSS 缩放内联 SVG？ [复制]

【英文标题】：Is is possible to scale inline SVG with CSS? [duplicate]

【发布时间】：2014-01-13 13:19:53

【问题描述】：

我想使用 CSS 样式来控制 SVG 设计的大小。比如……

.svg  width:100%; 

当我从文件中嵌入 SVG 图像时，它的行为就像任何其他图像一样，并且工作正常：

<img src="image.svg" class="svg" />

但是当我使用内联 SVG 时它不起作用：

<svg class="svg">...</svg>

svg“盒子”会变大，但内容保持不变。

有没有办法做到这一点？

【问题讨论】：

本题不重复！另一个根本没有提到 CSS。在这里，作者询问如何使用 CSS 做到这一点。这是完全不同的事情。

它可能不是直接重复的，但这个问题似乎与viewBox 相关（即“svg 'box' 会增长，但内容保持不变”），这是由other answer 和下面的答案。另见How can I make an svg scale with its parent container?。

【参考方案1】：

您可以使用的第一个可能也是最好的方法就是使用viewBox 属性（此属性区分大小写）。这将使 svg 标签的内容自动占据 svg 标签本身定义的宽度和高度，仅显示定义边界内的内容。例如：

<svg   viewBox="0 0 102 102">
    <rect x="1" y="1"   stroke="black" stroke- fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

或者，您可以将 svg transform 应用于 SVG 标记的内容，如下所示：

<svg  >
    <g transform="scale(0.8)">
        <rect x="1" y="1"   stroke="black" stroke- fill="white"/>
        <text fill="black" x="10" y="30">FooBarBaz</text>
    </g>
</svg>

最后，您可以尝试使用 CSS3 transform 来缩放整个 svg 元素。这是最不受支持的方法，但我还是提到了它，因为您最初要求的是 CSS 解决方案。不过，如果可能的话，我强烈建议使用上述解决方案之一。

<svg   style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1"   stroke="black" stroke- fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

【讨论】：

无法在 CSS 中使用正常的宽度/高度属性进行缩放？这是相当有限的：/

据我所知，基于我在写这篇文章时所做的一些测试。我认为问题在于 SVG 使用其单独的 CSS 规则集，其中一些是通过 width 和 height 属性继承的。如果更改 CSS 尺寸，SVG 图像本身将不会随之缩放。但是由于现在广泛支持 CSS3 转换，如果您仅限于编辑 CSS（如果您无权访问 html 代码），您当然可以使用它。

添加preserveAspectRatio="xMinYMin meet" 属性可能是件好事

svg width:100%; 尝试将其应用于 SVG 元素而不是类。这对我有用。

这已经很晚了，但是 css 风格的 zoom:0.8 可以工作