css - SVG 不能用 CSS 缩放

Question

我在缩放 SVG 文档时遇到问题。它包含在 HTML 文档中:

<svg class="svg_class">
    <path class="path_class"     
             d="M 403...
             ... 
             ...z"/>
</svg>

我尝试用 CSS 对其进行缩放，如下所示:

svg.svg_class {
    height: 100%;
    width: 100%;    
}

……无济于事。我也尝试过使用 px 单位，但这也不起作用。

我可以使用 transform: scale(0.1); 让它工作，但是有没有其他方法可以解决这个问题，例如当使用 img 元素在属性中指定尺寸时？

Answer 1

在 svg 元素上使用 viewBox 属性，它就是为此目的而设计的。结合 preserveAspectRatio，它可以完全控制缩放 SVG Canvas 。

进一步阅读

• > Making sense of SVG viewBox's madness作者:Justin MacCandless

引用资料

• > viewBox
• > preserveAspectRatio