理解SVG的preserveAspectRatio属性

该属性决定了怎么样把坐标系统(viewBox)塞到SVG视口(width,height)里。

配合在线实例往下看:http://oreillymedia.github.io/svg-essentials-examples/ch03/meet_slice_specifier.html

语法:preserveAspectRatio = "alignment [ meet | slice ]"。

其中,alignment表示对齐方式,meet | slice表示缩放方式。

alignment格式为xMin(Mid,Max)YMin(Mid,Max),代表坐标轴与视口的x轴左(居中,右)y轴顶(居中,底)对齐,比如xMaxYMid表示x轴有对齐y轴居中。

meet表示等比收缩坐标系使其能完全和视口的短轴相等,长轴有空余靠alignment决定对齐方式,此时短轴对齐方式随意;
slice表示等比放大坐标系使其能完全和视口的长轴相等,短轴溢出靠alignment决定剪切部分,此时长轴对齐方式随意;

最后,preserveAspectRatio="none",则表示不保留坐标的宽高比完全按视口比例缩放坐标。

你可能感兴趣的:(理解SVG的preserveAspectRatio属性)