tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و
SVG除了width和height这两个基本的宽高设置属性
还有两个更高级的属性
viewbox与preserveAspectRatio
#SVG视区盒
viewbox是svg标签上的属性
看下面的例子
<svg width=300 height=300>
<rect x=10 y=10 width=10 height=10></rect>
</svg>
rect {
fill: red;
}
在svg上我们画了一个非常小的红色矩形
现在我们来添加一个viewbox属性
<svg width=300 height=300 viewbox="0 0 30 30">
<rect x=10 y=10 width=10 height=10></rect>
</svg>
这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是viewbox的奇妙之处
viewbox="0 0 30 30"
0 0 指定了原点的坐标(左上)
而30 30指定了svg的宽高
相当于我们自定义了svg的坐标系统
张鑫旭大神对此有一个比较形象的解释:
SVG就像是我们的显示器屏幕,viewBox就是截屏工具选中的那个框框,
最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示!
(如果只指定viewbox不指定width和height,那么svg就会占满整个屏幕)
#viewbox与viewport
由于我们上面svg的宽高为300×300,被我们等比缩放为了30×30
所以很容易想明白
可是如果不是等比的缩放它又是怎样的行为呢?
下面把“全屏模式”的图片称为viewport(只指定width、height)
而“截屏模式”的图片称为viewbox(指定width、height、viewbox)
<svg width=300 height=300