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 主从配置
相关内容
热门资讯
山东阳谷县通报：一公司石蜡料场...
情况通报2026年6月13日17时38分，山东阳谷华泰化工股份有限公司石蜡料场起火，市县立即组织力量...
采纳科技2025年参保人数14...
6月14日消息，据天眼查数据显示，采纳科技股份有限公司2025年参保人数为149人，较2024年披露...
劣质“迪卡侬”流向全国，有店铺...
据蓝鲸新闻6月14日报道，近日，记者接到大量消费者买到迪卡侬劣质产品的举报线索。记者在一些电商平台以...
市值暴增790亿！PCB“卖铲...
进入2026年，大族激光在资本市场上“一路长虹”。数据统计显示，截至最新收盘，大族激光年内股价涨幅突...
微光成炬！联动多方资源，这场公...
（来源：上观新闻）2026年6月14日是第23个世界献血者日。近日，徐汇区漕河泾街道红十字会联合徐汇...