在许多情况下,svg
的viewPort
和viewBox
的宽高并不总是相等的。换句话说,在许多的情况下,viewBox
的缩放不按比例强制拉伸的。
那如果我们想要让viewBox
在拉伸时保持宽高比,可以使用preserveAspectRatio
。
语法
preserveAspectRatio
的语法:preserveAspectRatio=[defer] <align> <meetOrSlice>
参数
align
align参数控制viewBox
是否强制进行均匀的缩放,主要控制viewBox
的位置,主要可分为x
、y
两个部分。
而这两个部分都各有三个相同的值,分别是min
、mid
、max
。
取值 | 描述 |
---|---|
xMin | viewBox的最小x值对齐viewport的左边 |
xMid | viewBox的x轴中点对齐viewport的x轴中点 |
xMax | viewBox的最大x值对齐viewport的右边 |
YMin | viewBox的最小y值对齐viewport的顶边 |
YMid | viewBox的Y轴中点对齐viewport的Y轴中点 |
YMax | viewBox的最大x值对齐viewport的右边 |
meetOrSlice
取值 | 描述 |
---|---|
meet | 保持宽高比并将viewBox 缩放为适合viewport 的大小 |
slice | 保持宽高比并将所有不在viewport中的viewBox 剪裁掉 |
none | 不保存宽高比。缩放图像适合整个viewBox ,可能会发生图像变形。 |
align和meetOrSlice参数结合的情况
xMinYMin
、xMinYMid
、xMinYMax
,meetOrSlice
取值
其实之所以y
取三个不同的值最终结果都一样是因为,在meetOrSlice
取值为meet
的时候,是按最短边来缩放,即图片能够完整的显示出来。所以最短边都能够拉伸到跟viewPort
的短边等长。所以无论怎么调整y
的值都是不会有效果的。
同理,对于meetOrSlice
取值为slice
的情况,由于是优先把长边显示出来,所以长边那个轴无论赋值成什么,都不会有变化。