svg(viewBox, preserveAspectRatio)

这篇文章主要介绍svg的两个属性viewBoxpreserveAspectRatio

1. viewBox

viewBox可以理解为截屏工具,viewport表示视区的大小也就是是svg自身大小,可以理解为画布,以下面的代码为例


    

image.png

viewBox: "x, y, width, height" (x,y)表示截屏位置的起始点,width表示截屏宽度,height表示截屏高度,截屏后的图像将铺满原来的画布,如果viewBox的height和width比例与viewport相同就可以刚好成等比例缩放。
如上图所示:viewBox的区域是红色小方块标记的地方,宽20高10,与viewport的宽比为200/20 = 10, 高比例为100/10 = 10,宽和高比例相等则viewBox的纵横分别放大10倍刚好铺满viewport。起点距离(5)和长方形宽度(15)均放大了10倍。

2. preserveAspectRatio

当viewbox和viewport的宽和高比例不一致的时候可以指定如何缩放。preserveAspectRatio必须与viewBox配合使用,单独使用无效。它有两个参数,第一个参数是必须的第二个是可选的。
preserveAspectRatio:"xMidYMid meet"
第一个参数:表示viewBox与viewport是如何对齐的,也就是截屏后开始缩放的起始点位置。

x y none
xMin YMin -
xMid YMid -
xMax YMax -

举个例子xMinYmax表示viewport的左下角, xMidYMid表示viewport中心(vieBox会在viewport的中心位置向四周扩散)。
none: 使用none之后会忽略第二个参数meet/slice(第二个参数没有作用了),它会忽略viewBox与viewport的长宽比例,将viewBox填满viewport,所以纵横伸缩比例可能不一致。横向拉伸了200/20=10倍,纵向拉伸了100/20=5倍。

none.png

第二个参数:表示

meet(默认值) slice

meet: 保持纵横比例缩放viewBox去适应viewport,如果x方向与y方向放大的比例不一样则都选择较小的比例进行x和y方向放大/缩小。

meet.png

如上图所示,x比例200/20 = 10,y比例100/20=5,最终x和y方向都放大5倍。红色矩形部分的长宽放大了5倍。
slice:保持纵横比例缩放viewBox去适应viewport,如果x方向与y方向放大的比例不一样则都选择较大的比例进行x和y方向放大/缩小。放大后超出viewport的部分将被剪切。
slice.png

如上图所示,x比例200/20 = 10,y比例100/20=5,最终x和y方向都放大10倍。红色矩形部分的长宽放大了10倍。

你可能感兴趣的:(svg(viewBox, preserveAspectRatio))