SVG
中有个viewBox
的概念。而要解释这个概念,则需看一个例子。
<svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000">
<rect height="40" width="30" fill="#abcdef"/>
</svg>
首先是svg
标签内的height
、width
属性,很明显,这是用来定义svg
图片的宽高的属性。在不显式写出单位的情况下,默认单位是像素(px)。
然后是style
属性,熟悉HTML
和CSS
的朋友看到这里就能发现这是熟悉的味道,不必赘述。
最后就是viewBox
属性,这个属性也叫“视区盒子”。可以吧svg
理解成电脑的屏幕,而viewBox
就是屏幕上的某块区域,拥有自己的位置和宽高属性。而设置这个属性最终的效果将会是viewBox
被拉伸到全屏显示。显然,viewBox
内的元素也会被放大
。
viewBox
的语法以上面的代码为例,viewBox="0 0 60 80"
。从左到右分别是(坐标原点为svg
的左上角),左上角横坐标、左上角纵坐标、宽度、高度。
举个例子:
还有一个问题,如上面的代码,那么最终显示出来的方块的实际宽高是多少呢?
答案是宽为600px,高为400px。
这是因为viewBox
最终会被拉伸至全屏。所以,viewBox
的宽高分别被拉伸了多少倍,viewBox
内的元素就会被拉伸多少倍。即:
可以看出viewBox
的宽高都被拉伸了20倍,那么只需要将viewBox
内的元素的宽高都乘于20即可求出实际的宽高。