1. 前言
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML描述2D图形的语言，由于SVG是基于XML（HTML也是基于XML的），因为SVG DOM中每个元素都是可以操作的，包含修改元素属性、添加事件处理器，HTML5支持内联SVG。
本篇梳理和总结SVG绘制图形的DOM元素。
2. SVG元素
坐标系：左上点是坐标原点(0,0)，x轴正方向向右，y轴正方向向下。
视口viewport：SVG宽高确定视口大小，默认宽高(300px, 150px)。
|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 元素 | 说明 | 示例 |
| <rect> | 功能：创建一个矩形 属性： x 矩形的左侧位置 y 矩形的顶端位置 width 矩形的宽度 height 矩形的高度 rx x方向圆角半径 ry y方向圆角半径 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> </svg> |
| <rect> | 继承关系：SVGRectElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <circle> | 功能：创建一个圆形 属性： cx 圆心x轴坐标 cy 圆心y轴坐标 r 圆的半径 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> |
| <circle> | 继承关系：SVGCircleElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <ellipse> | 功能：创建一个椭圆 属性： cx 椭圆圆心x轴坐标 cy 椭圆圆心y轴坐标 rx 椭圆x轴半径 ry 椭圆y轴半径 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg> |
| <ellipse> | 继承关系：SVGEllipseElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <line> | 功能：创建一条直线 属性： x1 直线起点x轴坐标 y1 直线起点y轴坐标 x2 直线终点x轴坐标 y2 直线终点y轴坐标 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> </svg> |
| <line> | 继承关系：SVGLineElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <polyline> | 功能：创建一条折线/多段线 属性： points 折线的坐标点列表，形式x1,y1 x2,y2 x3,y3 ...... | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg> |
| <polyline> | 继承关系：SVGPolylineElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <polygon> | 功能：创建一个多边形 属性： points 多边形的坐标点列表，形式x1,y1 x2,y2 x3,y3 ...... | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg> |
| <polygon> | 继承关系：SVGPolygonElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <path> | 功能：创建一个路径 属性： d 路径定义 M = moveto 移动起点到 L = lineto 绘制直到到 H = horizontal lineto 水平绘制线到 V = vertical lineto 垂直绘制直线到 C = curveto 绘制三次贝塞尔曲线 S = smooth curveto 绘制三次贝赛尔曲线（多根连续） Q = quadratic Bézier curve 绘制二次贝塞尔曲线 T = smooth quadratic Bézier curveto 绘制二次贝塞尔曲线（多根连续） A = elliptical Arc 椭圆弧 Z = closepath 闭合路径 大写表示绝对位置，小写表示相对位置 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> </svg> Q或q 有2个坐标点，第1个是参考点，第2个是目标点 C或c 有3个坐标点，第1个和第2个是参考点，第3个是目标点 |
| <path> | 继承关系：SVGPathElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <text> | 功能：定义文本 属性： x 文本起始位置x轴坐标 y 文本起始位置y轴坐标 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg> |
| <text> | 继承关系：SVGTextElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <tspan> | 功能：定义文本的位置 x 文本起始位置x轴坐标 y 文本起始位置y轴坐标 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="20" style="fill:red;"> Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan> </text> </svg> |
| <tspan> | 继承关系：SVGTSpanElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| |||
| <defs> | 功能：定义图形但不绘制，供其他元素引用 | <略> |
| <defs> | 继承：SVGDefsElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| <textPath> | 功能：引用文本路径 href：引用的路径地址 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#path1"> I love SVG I love SVG </textPath> </text> </svg> |
| <textPath> | 继承关系：SVGTextPathElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object ||
| 滤镜和渐变，以及SVG DOM的操作后续补充 |||
3. 元素的公共属性
|------------------|---------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 元素的属性 | 描述 | 示例 |
| stroke | 功能：描边颜色 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg> |
| storke-width | 功能：描边宽度 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg> |
| stroke-linecap | 功能：描边的线帽 取值：butt | round | square | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg> |
| stroke-dasharray | 功能：创建虚线描边 取值：实线段长度，虚线段长度，实线段长度，...... | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg> |
| fill | 功能：填充颜色 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg> |
4. HTML中引用SVG
|--------------------------------------------------------------|---------------------------------|-----------------------------|
| 引用svg的方式 | 优点 | 缺点 |
| <embed src="circle.svg" type="image/svg+xml" /> | 所有主流浏览器均支持，允许使用脚本 | 不推荐在HTML4和XHTML使用 HTML5允许使用 |
| <iframe src="circle.svg"></iframe> | 所有主流浏览器均支持，允许使用脚本 | 不推荐在HTML4和XHTML使用 HTML5允许使用 |
| <object data="circle.svg" type="image/svg+xml"></object> | 所有主流浏览器均支持，且支持HTML4/XHTML/HTML5 | 不允许使用脚本 |
| HTML直接嵌入<svg>元素 | <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html> ||
5. 总结
仅图形而言，较为复杂的是<path>，需要学会使用二次贝塞尔曲线、三次贝塞尔曲线、连续二次贝塞尔曲线、连续三次贝塞尔曲线；就图形效果而言，应该是滤镜和渐变的使用。后续为大家补充滤镜和渐变，以及SVG DOM的操作、绑定事件处理程序。
下一篇：【Web2D/3D】Canvas（第三篇）-CSDN博客
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~