如何使用 % 统一缩放内联 SVG

Question

我正在尝试在流体环境中使用 SVG 元素，使用 % 单位来设置与容器成比例的大小。

如果您包含像图像一样的 SVG 设计，它就像图像一样工作：

<img class="img-svg" src="box.svg" />

您可以使用 CSS 轻松地按比例缩放它，如下所示：

.img-svg { width:100%; height: auto; }

但是

如果你使用内联 SVG，一切都会改变...

<svg class="inline-svg" preserveAspectRatio="xMidYMid meet" viewBox="...">
    ...
</svg>

这行不通：

.inline-svg { display:block; width:100%; height: auto; }

如果您这样做，它会将 SVG 的框扩大到 100%，但其中的所有元素都将保持相同的大小。这是一个 jsfiddle：http://jsfiddle.net/s_d_p/jA62R/

这样做的正确方法是什么，以便 SVG 内的内容均匀地放大/缩小？

注意 1：我正在寻找 CSS/SVG 解决方案。不是 javascript hack。

注意 2：我找到了 this，但它依赖于固定的 px 单位。

Answer 1

我仍在思考这个问题，但这是迄今为止我想出的最好的……

css

.svg {
    display: block;
    width:100%;
    height: auto;
}

svg

<svg preserveAspectRatio="xMidYMid meet" viewBox="...">
...
</svg>

CSS 需要将显示设置为阻止，因为 SVG 的默认值是 inline（不知道为什么）。然后你可以像 div 一样缩放它的边界。

包含的 svg 节点也是使用preserveAspectRatio 属性。正如罗伯特在上面的评论中指出的那样，如果您也没有 viewBox 属性，则 preserveAspectRatio 属性不起作用。

值得在这里阅读更多关于preserveAspectRatio 的信息，因为如果尺寸不同，则有很多不同的值将决定缩放元素如何与周围空间交互。例如，如果您的 SVG 是一个短而宽的矩形，而您的容器是一个又高又窄的矩形，那么浏览器应该如何处理额外的空间以使其适合？

[小心！ preserveAspectRatio 的浏览器默认值差别很大！]

Answer 2

您可以对 SVG 标记的内容应用 svg 转换。或者您也可以使用 CSS3 transform 方法。

.svg {width:100%; display:block;
transform:scale(5); 
-webkit-transform:scale(5); 
-moz-transform:scale(5); 
-ms-transform:scale(5); 
-o-transform:scale(5);
}

<svg class="svg" preserveAspectRatio="xMidYMid meet" viewbox="0 0 102 102">
<g transform="scale(0.5)">
/*rest code will come inside this.*/
</g>
</svg>

这是您的工作演示。 http://jsfiddle.net/jA62R/10/