今天学 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的画布上显示。于是就形成了缩小两倍的效果。
说实话一开始没怎么看懂,后面仔细看才明白这个属性是干嘛的,其实就我们平时设置头像的截图的功能一样。svg中的x、y、width和height属性定义这段SVG代码所表达的数据在绘制时所占用的空间大小(可视区大小);svg中viewBox (0 0 200 200) :0 0 表示x轴和y有的起始位置,即可视区View中哪个位置开始显示(可见),后面200, 200 表示长和宽但是只是一个数量,不会有具体的长度;那么如何让这样一个svg在长宽为100*100px的div中显示全呢?
viewBox就是干这个的
1/2 = 100(实际viewport大小) / 200(viewBox视窗大小)
svg 中所有的尺寸 * 1/2,这样就完全显示在100 * 100的容器中了,同时图片就缩小了的,利用该属性原理可以实现SVG的缩放。
用法
用法要设置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/>
看到的最终结果。