命名空间
xmlns(xml name space) :用以标识svg版本,区别在不同版本下的语义规范。
html
<!-- 默认命名空间 -->
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 所有svg元素放置此空间中 -->
</svg>
坐标系统
用户单位和屏幕单位的映射关系被称为用户坐标系统。和canvas类似，以左上角(0,0)为原点，x 轴正方向是向右，y 轴正方向是向下。
html
<rect x="0" y="0" width="100" height="100" />
适口属性
viewBox表示在画布中展示的区域,在宽高为200像素的画布上只展示从x,y都为0的位置向右向下展示宽高100的区域,相当于把100*100的区域放大一倍。
html
<svg width="200" height="200" viewBox="0 0 100 100">
基本形状
svg提供了几个基础形状的标签以供使用，通过设置对应标签的属性来决定它的大小和位置。
rect
- x: 以左上角为原坐标的横向位置
- y: 以左上角为原坐标的纵向位置
- width: 宽度
- height: 高度
- rx: 横向圆角
- ry: 纵向圆角
circle
- cx: 相对圆心横向坐标位置
- cy: 相对纵向坐标位置
- r: 半径
ellipsis
- rx: 横向圆角
- ry: 纵向圆角
- cx: 相对圆心横向坐标位置
- cy: 相对纵向坐标位置
line
- x1: 横向坐标1
- y1: 纵向坐标1
- x2: 横向坐标2
- y2: 纵向坐标2
polyline
一组由点(x,y)组成的折线线段，每组点(x,y)通过空格隔开相同数字的点可以省略为一个
- points: 50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180
polygon
与折线类似，只不过首位的点会自动闭合
- points: 50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180
path
路径标签是svg中最基础的标签，任何形状(是否圆角)都可以通过path来创建
- d: 路径命令描述了绘制路径的点列表和其他信息(命令+参数)
path-command路径命令
路径命令 由代表命令的字幕和代表参数的数字组成,svg定义了6种路径命令类型一共20个。
所有路径命令大写(M)均为移动绝对位置，小写(x)则为移动相对位置。每次设置绝对位置后都是下次子坐标的lineTo的绝对位置参数(在上一次绝对位置上进行移动xo + dx yo + dy).
- 移动(moveTo): M、m
- 画线(lineTo): L、l、H、h、V、v
- 三次贝塞尔曲线(Cubic Bézier Curve): C、c、S、s
- 二次贝塞尔曲线(Quadratic Bézier Curve:): Q、q、T、t
- 椭圆曲线(Elliptical Arc Curve)：A、a
- 封闭路径(ClosePath)：Z、z
<Callout>命令区分大小写，大写的命令指定绝对坐标，而小写命令指定相对(于当前位置)坐标</Callout>