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)我们就能看到下面的样子

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

3.我们更改viewBox=(0, , 101, 101)我们能够看到下面的样子

在上面的1、2、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",样式表现为：

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

本篇原创