美文网首页
理解SVG的preserveAspectRatio属性

理解SVG的preserveAspectRatio属性

作者: 破书 | 来源:发表于2017-01-02 18:25 被阅读0次

    该属性决定了怎么样把坐标系统(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属性

          本文链接:https://www.haomeiwen.com/subject/ddnwvttx.html