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 主从配置
相关内容
热门资讯
波兰容量市场中电池储能的经济性
2.5GW波兰最新容量竞价支持的新增额定电池容量（计划于2030年交付）每年14.7欧元/kW波兰2...
种田游戏哪些好玩 十大必玩种田...
想要体验宁静又治愈的种田乐趣？本文为你精选十大必玩种田游戏，涵盖模拟经营、田园生活等多类玩法，带你领...
两会结束，国务院立刻行动
全国两会刚刚落幕，3月13日，国务院常务会议便对深入贯彻党中央决策部署，落实政府工作报告安排，围绕全...
“天空地水工”立体监测 黄河...
来源：科技日报科技日报记者 付丽丽 3月的河套平原，春风中仍裹挟着料峭寒意。但随着气温的回升，沉寂一...
“十五五”规划纲要解读来了！未...
昨天（13日），“十五五”规划纲要正式发布，规划纲要的编制有何特点、亮点？对未来五年经济社会发展进行...