svg基础（一）

1 定义

可缩放矢量图形（ Scalable Vector Graphics），是一种 XML应用

2 特征

1. 一种可伸缩矢量图形
2. 使用xml格式定义用于网络的基于矢量的图形
3. 放大或改变图片的尺寸其质量不会有所损失

2.1 渲染顺序

SVG元素的一个规则是 后来居上 ，越后面的元素越可见

<svg width="200" height="200">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
    <rect x="0" y="0" width="100" height="100" fill="orange"/> 
</svg>

上面的代码渲染后只看到橙色的矩形

2.2 单位

在SVG 中，可以指定值的单位，也可以不指定值的单位。不指定时，默认使用像素 (px) 作为单位。

上面代码中，width和height没有指定单位，那么单位默认就是px

支持的单位：

单位	含义
em	相对于父元素的字体大小
px	相对于屏幕分辨率
%	相对于父元素
cm	即厘米
mm	即毫米
in	即英寸
pt	1/72 英寸
pc	12点活字，或1/12点

3 概念和属性

3.1 画布

SVG 画布就是用来绘制 SVG 内容的一个区域。这个画布可以无限延伸，可以在这个画布的任何位置绘制想要的内容。

画布和视窗之间的关联

1. 每创建一个 <svg> 元素，就相当于创建了一个无穷大的画布，同时创建了一个视窗。
2. 画布和视窗分别对应两个坐标系统，一个用户坐标系，一个视窗坐标系，这两个坐标系统默认是对齐的。

3.2 viewport

表示SVG可见区域的大小，可以通过 SVG 视窗看到画布，但只能看到了画布的一部分，超过视窗的部分会被裁切并且隐藏

为什么超过视窗的元素不可见？因为每个 SVG 元素都有一个默认的 overflow: hidden 样式，所以超过视窗的内容不可见。你也可以通过设置 overflow: visible 让超出视窗边界的内容变得可见。

通过设置svg元素的width和height属性来给 SVG 视窗设置宽和高。

 <svg width="200" height="200">
        <rect x="0" y="0" width="100" height="100" fill="red"/>
 </svg>

以上代码设置了svg的视窗宽度为200px,高度为200px

3.3 viewBox

viewBox=“x y width height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

viewBox会从其x y指定的坐标处，截取宽width高height的矩形，并把该矩形铺满svg视窗

<svg width="200" height="200" style="border:1px solid red">
        <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>
<svg width="200" height="200" viewBox="0 0 10 10" style="border:1px solid red">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>
<svg width="200" height="200" viewBox="10 10 20 20" style="border:1px solid red">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>

注意对比以上代码和显示结果

 <svg width="400" height="300" style="border:1px solid red;">
        <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid red;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>
<svg width="400" height="300" viewBox="10,5,40,30" style="border:1px solid red;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>

注意对比以上代码和显示结果