在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小

如下代码svg设置了宽度与高度，rect同样，所以结果自然是全屏

考虑下，是不是这段SVG代码中所表达的数据全部均可被绘制出来达到可见呢?

svg出现了一个新的概念：viewBox

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示

viewBox参数

viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

代码稍微修正下，增加viewBox控制

rect同样与svg尺寸一直，但是显示出来的大小确等比缩小了一倍

试着简单的理解：强制把分辨率提升到400*300 ，那么原来的svg尺寸是200*150，相对于400*300就等比缩小一倍了

同样的，如果把viewBox缩小一倍，那么反之svg会增加一倍

本文转自艾伦 Aaron博客园博客，原文链接：http://www.cnblogs.com/aaronjs/p/4956111.html，如需转载请自行联系原作者