理解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",则表示不保留坐标的宽高比完全按视口比例缩放坐标。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • byzhangxinxufromhttp://www.zhangxinxu.com 本文地址:http://www...
    凌雲木阅读 7,256评论 0 8
  • SVG是什么 可缩放矢量图形(Scalable Vector Graphics),一种用来描述二位矢量图形的XML...
    greenteaObject阅读 2,677评论 0 1
  • 从小喜欢画画,但也没为它去努力过。上学时课本上,草稿本我都没让它们空着,连同桌和前后排的同学的本子和书也被我画满了...
    安昵阅读 240评论 0 0
  • 远方真的如我们想象的那样难以抵达吗?汪国真在《山高路远》中给出了答案:没有比脚更长的路,没有比人更高的山。倘若让...
    鲸翎阅读 533评论 0 1
  • 昨天全国的小朋友在看,“开学第一课”,属于宝贝睿和我的第一课,也是我的一节充电课,小学六年中学六年,大概我们真正陪...
    free_aa2a阅读 128评论 0 0