简介
viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表min-x,min-y,widthandheight， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性preserveAspectRatio。
<svg width="1200" height="600" viewBox="0 0 60 30" style="border:1px solid #ff0000">
<rect height="30" width="20" fill="#abcdef"/>
</svg>
还有一个问题，如上面的代码，那么最终显示出来的方块的实际宽高是多少呢？
答案是宽为600px，高为400px。
这是因为viewBox最终会被拉伸至全屏。所以，viewBox的宽高分别被拉伸了多少倍，viewBox内的元素就会被拉伸多少倍。可以看出viewBox的宽高都被拉伸了20倍，那么只需要将viewBox内的元素的宽高都乘于20即可求出实际的宽高。
