Question

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

.svg { width:100%; }

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

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

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

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

svg“box”会增长，但内容保持不变。

有办法做到这一点吗？

Answer 1

您可以使用的第一个也许是最好的方法就是使用viewBox属性。这将使svg标记的内容自动占用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 transform应用于SVG标记的内容，如下所示：

<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>

是否可以使用CSS扩展内联SVG？

1 个答案: