viewBox

简介

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height, 以空格或者逗号分隔开, 在用户空间中指定一个矩形区域映射到给定的元素,查看属性preserveAspectRatio


    

还有一个问题,如上面的代码,那么最终显示出来的方块的实际宽高是多少呢?
答案是宽为600px,高为400px。
这是因为viewBox最终会被拉伸至全屏。所以,viewBox的宽高分别被拉伸了多少倍,viewBox内的元素就会被拉伸多少倍。可以看出viewBox的宽高都被拉伸了20倍,那么只需要将viewBox内的元素的宽高都乘于20即可求出实际的宽高。

参考文章

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

你可能感兴趣的:(viewBox)