功夫码

SVG里的viewbox使用详解

晓峰 时间:2019-11-27 07:56:30 阅读:12
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

SVG里的viewbox使用详解

今天做项目,用svg碰到了viewbox属性,搜了一下相关介绍,只有这篇文章我看懂了,分享给大家。

本意是怎么介绍的:

这里定义的画布尺寸是200200px。但是,viewBox属性定义了画布上可以显示的区域:从(0,0)点开始,100宽100高的区域。这个100100的区域,会放到200200的画布上显示。于是就形成了放大两倍的效果。

说实话一开始没怎么看懂,后面仔细看才明白这个属性是干嘛的,其实就我们平时设置头像的截图的功能一样。

用法

用法要设置4个值:viewbox="x, y, width, height",例子:

<svg width="200" height="200" viewbox="0 0 100 100"></svg>

坐标

这是 MDN 的坐标图:


坐标图

viewbox

就用设置我自己头像来做比喻吧。比如现在我有图片 200 x 200:

image.png

头像原图

现在我只想要左上角 100 x 100 的部分,所以要对原图裁剪一下:

image.png

裁剪

这里的裁剪白色框框就是 viewbox 里定义的,坐标 (0, 0) 说明在左上角,100 x 100 就是这个框框的宽高。

最后点击“确定”按钮后,裁剪下来的图片就变成新的头像了,这个新头像就是 <svg/> 看到的最终结果。

image.png

最终结果如上。




--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部