使用CSS可以缩放内联SVG吗？

Question

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

.svg { width:100%; }

当我从文件中嵌入SVG图像时，它的行为就像任何其他图像一样，运行良好：

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

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

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

< p > SVG的“盒子”会增大，但内容保持不变。

< p >有办法做到这一点吗？

- emersonthis

---

这个问题不是重复的！另一个问题根本没有提到CSS。在这里，作者想知道如何使用CSS来实现这一点。这是完全不同的事情。 - Dakatine

这个问题可能不是直接的重复，但似乎与viewBox（即“svg 'box'将会增长，但内容保持不变”）有关，这在其他答案和以下回答中已得到解决。另请参阅如何使svg与其父容器一起缩放？。 - showdev

Answer 1

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

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

或者，您可以对SVG标记的内容应用svg transform，方法如下：

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

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

<svg width="102" height="102" 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" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

- Joeytje50

---

CSS中无法使用普通的宽度/高度属性进行缩放吗？那太令人限制了 :/ - Damon

svg { width:100%; } 翻译为：将其应用于SVG元素而不是类。这对我有效。 - hipnosis

@hipnosis CSS 样式不会根据用于选择元素的选择器而改变其行为。因此，除非某些原因使SVG文档与HTML文档完全不同（我认为这是高度不可能的），否则我相当确定这必须归因于您对此问题的原始提问者所做的其他更改。 - Joeytje50

这虽然很晚，但 CSS 样式 zoom:0.8 是有效的。 - drowhunter

@drowhunter 我猜你可以把它作为这个问题的独立答案。事情是会变化的，所以我可以想象像这样的东西使得那些过去不太受支持的事情成为可能。 - Joeytje50