Svg

svg

• width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度（相对单位 / 像素单位）

• viewBox属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度

属性

基本图形元素

矩形

<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）

圆

<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素

椭圆

<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）

直线

line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标

折线

<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分

多边形

<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

路径

<path>标签用于制路径，d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标

详细绘制，可以查看 Svg-d属性 章节

文本

图片

<image>标签用于插入图片文件，xlink:href属性表示图像的来源

use标签 - 复制

• href属性指定所要复制的节点
• x属性和y属性是左上角的坐标

g标签 - 组

<g>标签用于将多个形状组成一个组（group），方便复用

def标签 - 定义形状

<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用

与Canvas的区别

1. svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来改。 canvas输出的是⼀整幅画布

2. svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽ canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮