秒懂<SVG/>里的viewbox

今天学 SVG 的时候看到了 viewbox 属性,MDN 的描述是这样的:

这里定义的画布尺寸是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:

头像原图

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

裁剪

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

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

最终结果

是不是瞬间秒懂了呢~

推荐阅读更多精彩内容

  • 【Android 自定义View之绘图】 基础图形的绘制 一、Paint与Canvas 绘图需要两个工具,笔和纸。...
    Rtia阅读 2,532评论 2 16
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 2,262评论 4 28
  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 1,614评论 2 12
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 154评论 0 1
  • 时间总是在我们不曾注意的时候走得最快,不知不觉我已离开青涩的校园三年多了,家里人同事们都催促着我赶紧找个对象,不记...
    076cf689852e阅读 28评论 0 1