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

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

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




本篇原创

标签：SVG,height,画布,width,详解,svg,101,viewBox
来源： https://www.cnblogs.com/hros/p/10923164.html