【Web2D/3D】SVG（第二篇）

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>
	继承关系：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>
	继承关系：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>
	继承关系：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>
	继承关系：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>
	继承关系：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>
	继承关系：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个是目标点
	继承关系：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>
	继承关系：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>
	继承关系：SVGTSpanElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<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>
	继承关系：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	功能：描边宽度
stroke-linecap	功能：描边的线帽 取值：butt | round | square
stroke-dasharray	功能：创建虚线描边 取值：实线段长度，虚线段长度，实线段长度，......
fill	功能：填充颜色

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博客

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~