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 主从配置
相关内容
热门资讯
中外对话丨中外专家警告：日本主...
中新网北京12月15日电 题：中外专家警告：日本主动调整军事战略，或走向穷兵黩武 作者 管娜 ...
夏某某（男，大专学历）隐瞒精神...
转自：扬子晚报2024年参军入伍后在安徽出现精神类障碍被退回，2025年隐瞒病史后入伍再被退兵……1...
告别纸上谈兵！AI 培训找哪个...
炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ （来源：雷达财经）“...
一图读懂vivo S50：田曦...
炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ （来源：快科技）快科...
监管部门出手整治不正当价格行为...
近日，国家市场监督管理总局研究起草了《汽车行业价格行为合规指南（征求意见稿）》（下称《指南》），并向...