SVG width/height定义的是viewport大小，viewBox决定此时显示什么内容。 svg本身是一个无限空间的画布
meet
meet在保持viewbox纵横比的情况下， 等比例缩放viewbox, 使得整个viewBox在viewport内可见
- 当viewBox所有边小于viewport， 进行放大
- 当viewBox任1边大于等于viewport, 进行缩小
例子
假设viewport 300 * 300
- viewBox 200 * 100
viewBox所有边小于viewport, 因此需要放大， 放大倍数 = 300 / 200
- viewBox 600 * 450
因此需要缩小， 缩小倍数=600 / 300
- viewBox 600 * 100
slice
slice在保持viewbox纵横比的前提下，等比例缩放viewbox, 使得整个viewbox可以覆盖viewport
- 当viewBox任1一边小于viewport， 进行放大
- 当viewBox所有边大于viewport, 进行缩小
:::info 无论是meet还是slice, 都要保持viewBox纵横比。区别在于meet是viewport装viewBox, 而slice是viewBox装viewport :::
步骤
- 确定viewBox实际区域和实际大小
- 根据meet slice 决定如何进行缩放
- 根据preserveAspectRatio第一个参数决定怎么对齐， defalut: xMidYMid meet
参考文献
- preserveAspectRatiodeveloper.mozilla.org/en-US/docs/…
- 张鑫旭www.zhangxinxu.com/wordpress/2…
