如何使用%统一缩放内联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中的内容均匀地放大/缩小？

Note1:我正在寻找一种CSS/SVG解决方案。不是javascript黑客。

NOte2:我发现了this，但它依赖于固定的px单元。

Answer 1

我还在思考这个问题，但这是我到目前为止想出的最好的…

css

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

svg

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

CSS需要将显示设置为block，因为SVG的默认值是inline (不确定为什么)。然后你可以像div一样缩放它的边界。

让包含的svg节点很好地播放的方法也是使用preserveAspectRatio属性。正如Robert在上面的评论中指出的那样，如果您没有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/