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 主从配置
相关内容
热门资讯
航路还堵着，能源怎么办
近期，全球多个关键能源运输通道相继出了状况：霍尔木兹海峡通行受阻，曼德海峡局势紧绷，黑海与波罗的海沿...
奋力构建世界级科研枢纽
2023年8月，国务院正式印发《河套深港科技创新合作区深圳园区发展规划》，提出锚定“深港科技创新开放...
业态升级激发消费新活力
近年来，国内工业遗产活化利用进程持续提速，工业旅游凭借独特的产业价值、文化价值，成为文旅产业转型升级...
进一步挖掘服务消费潜力
近年来，我国经济保持平稳增长，经济结构优化升级特点明显。随着居民消费需求从“有没有”向“好不好”转变...
理性对待情绪消费
下班后，买一束鲜花犒劳辛苦工作的“老己”；逛街时，在潮玩店开新品盲盒，收集不同的惊喜；在周末，为喜爱...