svg之ViewBox详解,秒懂SVG里的viewbox

今天学 SVG 的时候看到了 viewbox 属性，先来看一下svg的格式：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 215 215;" xml:space="preserve" width=100px height=100px>
<circle style="fill:#99CCCC;" cx="107.5" cy="107.5" r="106.5"/>
</svg>

ViewBox在MDN中 的描述是这样的：

这里定义的画布尺寸是100x100px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，200宽200高的区域。这个200x200的区域，会放到100x100的画布上显示。于是就形成了缩小两倍的效果。

用法

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

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

坐标

这是 MDN 的坐标图，外部的X、Y轴是操作系统定义的坐标，内部坐标是SVG定义的虚坐标，符合数学所学的坐标系：

viewbox

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

这里的裁剪白色框框就是 viewbox 里定义的，也就是可视区可见的；坐标 (0, 0) 说明在左上角开始截，100 x 100 就是这个框框的宽x高最后点击“确定”按钮后，裁剪下来的图片就变成新的头像了，这个新头像就是 <svg/> 看到的最终结果。