SVG-viewBox属性详解

viewBox( x, y, width, height)   

用处：在svg画布中选择出一块区域放大到宽度或高度充满画布为止

(参数x/y能够理解为坐标为(x , y)的点(这里的坐标系和数学中的坐标系不太同样,x轴的方向和数学中的x轴方向是同样的,可是y轴的方向是反过来的)，也就是选取区域的起点，width/height很好理解就是选取区域的宽高)

下面咱们来具体解释一下上面这句话的意思

css样式：
　　svg {  border: 1px solid #333333; }

1.svg画布的宽度和高度都设置成300px宽，而且在画布里面画一个矩形和一个圆形

<svg width="300" height="300">
    <path fill="purple" d="M 0,0 L 100,0 100,100 0,100 Z"></path>
    <circle fill="orange" cx="50" cy="250" r="50"></circle>
</svg>

也就是下面的样子

2.咱们在svg里面添加viewBox=(0, 0, 101, 101)
咱们就能看到下面的样子

注意：这里我并无选取矩形大小的宽高，而是特地多选取了1px，目的就是为了方便咱们观察区域是怎么选取的，一样下面的圆形也是如此

3.咱们更改viewBox=(0, 200, 101, 101)
咱们可以看到下面的样子

在上面的一、二、3条咱们演示的是选择区域这个用处，接下来咱们看放大是什么意思

4.接下来咱们更改svg的width 和 height属性

<svg viewBox="0 0 100 100" width="300" height="300">
    <path fill="purple" d="M 0,0 L 100,0 100,100 0,100 Z"></path>
    <circle fill="orange" cx="50" cy="250" r="50"></circle>
</svg>

当前代码的样式表现以下

接着咱们把width属性改成width="400"，而后样式就变成了：

咱们把width还原，接着更改height="400",样式表现为：

这也就验证了咱们开篇的第一句话：将选中区域的宽度或高度放大到充满画布为止
有兴趣的你们能够下去试一试




本篇原创