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 主从配置
相关内容
热门资讯
中钨高新：7月8日获融资买入3...
7月8日，中钨高新跌3.76%，成交额46.06亿元。两融数据显示，当日中钨高新获融资买入额3.32...
山推股份：7月8日获融资买入1...
7月8日，山推股份跌2.99%，成交额2.01亿元。两融数据显示，当日山推股份获融资买入额1115....
中国船舶2025年参保人数26...
7月9日消息，据天眼查数据显示，中国船舶工业股份有限公司2025年参保人数为26人，较2024年披露...
7月8日红利低波ETF永赢(5...
数据显示，7月8日，红利低波ETF永赢(563690)遭净赎回192.59万元，位居当日股票ETF净...
7月8日华安创业板人工智能ET...
数据显示，7月8日，华安创业板人工智能ETF(159279)遭净赎回943.49万元，位居当日股票E...