viewBox

简介

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性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即可求出实际的宽高。

参考文章

SVG之ViewBox
理解SVG viewport,viewBox,preserveAspectRatio缩放