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 主从配置
相关内容
热门资讯
视源股份、视睿电子申请微课视频...
5月8日消息，国家知识产权局信息显示，广州视源电子科技股份有限公司、广州视睿电子科技有限公司申请一项...
斯达半导申请功率模块控制相关专...
5月8日消息，国家知识产权局信息显示，斯达半导体股份有限公司申请一项名为“一种自适应结温控制的功率模...
寒武纪取得语句编译方法相关专利...
5月8日消息，国家知识产权局信息显示，中科寒武纪科技股份有限公司申请一项名为“规范化语句中的表达式的...
支付促消费直接拉动超6亿元 信...
支付促消费直接拉动超6亿元 信用修复实现“免申即享”我省银行业两项金融惠民措施落地见效 今年以来，...
日久光电取得防指纹膜相关专利，...
5月8日消息，国家知识产权局信息显示，江苏日久光电股份有限公司申请一项名为“防指纹膜”的专利，授权公...