3
头图

基本语法

首先,我在大小为400 x 400的画布中绘制了一个200 x 200的矩形:

可以发现,没有问题。

现在,我把svg的宽和高改变后:

可以看见,等比例变小了。

简单的理解就是:viewBox规范了画布的大小,svg标签里面的内容都是按照这个画布大小来绘制的,绘制后获得了一张图片,在页面显示的时候,svg的宽和高指定了图片显示多大。

偏移

那如果viewBox规范的画布不是从0,0开始的会怎么样?

参考下面的草图理解:画布的起点是100,100,而宽和高分别是300,300,由此,实际画布的大小是400 x 400,画布上绘制的结果是一个居中,大小为200 x 200的红色矩形:

而显示的时候,我们需要显示的内容是画布起点100,100,大小300 x 300,也就是上面草图重点标出来的位置。

非等比例

接着还有一个问题:如果画布的大小和最终图片显示的svg大小不是等比例的,会怎么样?

可以发现,并没有变形,而是矩阵显示,处理方式类似背景图片。

具体的,就牵扯到一个新属性:preserveAspectRatio 。

preserveAspectRatio

我们对上面的例子进行调整:

其实preserveAspectRatio不写也是有默认值:"xMidYMid meet",相比默认值,我们只是把meet改成了slice。

总结就是,preserveAspectRatio的值由两个参数组成。

第一个参数

可选值有:xMinYMin、xMinYMid、xMinYMax、xMidYMin、xMidYMid、xMidYMax、xMaxYMin、xMaxYMid和xMaxYMax。

x和y表示对齐的轴线,min,mid,max表示对齐的方式。min是往坐标小的方向对齐;mid居中对齐;max是往坐标大的方向对齐。

第二个参数

可选值有:meet和slice。

meet就是前面那种自动调整viewBox到可以在svg画布中完全展示,类似css里background-size:contain;而slice是自动调整viewBox到撑满整个svg画布,非常类似background-size:cover。


zxl20070701
136 声望14 粉丝