SVG preserveAspectRatio 终极理解
创始人
2024-06-03 14:58:25
preserveAspectRatio: xMinYMin [meet slice none];
红框为viewBox=“0 0 100 200”；
meet 按viewBox 短边比例来缩放。
slice 按viewBox 长边比例来缩放。
preserveAspectRatio 就是控制viewBox裁剪下来的东西的位置和缩放的。
此时，viewBox 的内容为一个上半圆。
meet
xMidYMid meet (默认情况): 400 / 200 = 2 , 放大两倍
viewBox放大两倍后，w=400，h=200，在svgBox 里面，因此，xMidYMid控制了viewBox 的位置，两个盒子中线对齐。
这里viewBox裁剪以外的区域也会展示。
slice
xMidYMid slice: 300 /100 =3倍
viewBox放大后，svgBox 比viewBox小，因此，xMidYMid控制了svgBox的位置，两个盒子中线对齐
小结
preserveAspectRatio 的对象是viewBox最初裁剪的图像。
meet 和slice 可能会导致放大后viewBox比svgBox 大，此时也按对齐方式对齐即可。
附：
根据官网，此属性还可以用在其他svg元素上。
上一篇：mysql 主从配置
相关内容
热门资讯
光稳定剂领域的“破局者”
（来源：劳动午报）转自：劳动午报 在化工行业转型升级的浪潮中，有一位用技术之光照亮产业前路的巾帼先锋...
GDP超3.37万亿元 同比增...
1月26日，重庆市2025年“经济报表”出炉。总体来看，2025年全市各项政策协同发力，生产供给支撑...
亚洲室内田径锦标赛 将在天津举...
（来源：劳动午报）转自：劳动午报 新华社电 记者26日从天津市体育局获悉，第十二届亚洲室内田径锦标赛...
着力保障和改善民生 提高群众...
（来源：劳动午报）转自：劳动午报 本报讯（记者 余翠平 宗晓畅）1月26日上午，北京市政协十四届四次...
国际油气价格迎来阶段性反弹
转自：证券日报 本报记者 贺王娟 近期，有色金属价格持续走高，国际原油、天然气价格也迎来...