文献种类：专题技术文献；
SVG简介1
开发工具与关键技术：VS/JavaScript
撰写时间：2019年5月8日
SVG简介
SVG指可伸缩矢量图形 (Scalable Vector Graphics)；
SVG是使用 XML 来描述二维图形和绘图程序的语言、是可伸缩的、是万维网联盟的标准、是开放的标准。
SVG与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG文件是纯粹的 XML，可被非常多的工具读取和修改（比如记事本）
SVG用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形，
图像在放大或改变尺寸的情况下其图形质量不会有所损失，
图像可在任何的分辨率下被高质量地打印，图像中的文本是可选的，
同时也是可搜索的（很适合制作地图）；
SVG与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体，可以与 Java 技术一起运行；
SVG有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line>
折线 <polyline> 多边形<polygon> 路径 <path>
<rect>标签：可用来创建矩形，以及矩形的变种。
例1：一个黑边深蓝色的矩形
<svg width="300" height="100" version="1.1" xmlns="">
<rect width="300" height="100" style="fill:rgb(0,0,255);
stroke-width:2; stroke:rgb(0,0,0)"/>
</svg>
解释：rect元素的 width 和 height 属性可定义矩形的高度和宽度 ； style 属性用来定义 CSS 属性；
CSS的 fill属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） ；
CSS的 stroke-width属性定义矩形边框的宽度 ；
CSS的 stroke 属性定义矩形边框的颜色 ；
例2：包含新属性：
<svg width="300" height="300" version="1.1" xmlns="">
<rect x="20" y="20" width="250" height="250" style="fill:blue;
stroke: #8e0404; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.5"/>
</svg>
解释：
x属性定义矩形的左侧位置（例如，x="0"定义矩形到浏览器窗口左侧的距离是0px）；
y属性定义矩形的顶端位置（例如，y="0"定义矩形到浏览器窗口顶端的距离是 0px）；
CSS 的 fill-opacity属性定义填充颜色透明度（合法的范围是：0 - 1）；
CSS的 stroke-opacity属性定义笔触(即边上的线，也可以叫笔画)颜色的透明（合法的范围是：0 - 1）；
CSS的 opacity属性定义整个元素的透明值（合法的范围是：0 - 1）
例3：带有圆角的矩形：
<svg width="300" height="300" version="1.1" xmlns="">
<rect x="20" y="20" rx="20" ry="20" width="250"
Height="100" style="fill:red; stroke:black; stroke-width:5; opacity:0.5"/>
</svg>
解释：rx 和 ry属性可使矩形产生圆角，且如果同时使用，任意一边不能为零；可以单独使用；
例：<circle>标签：可用来创建一个圆。
<svg width="100" height="100" version="1.1" xmlns="">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
解释：cx 和 cy 属性定义圆点的 x和 y坐标。如果省略 cx 和 cy，圆的中心会被设置为(0, 0)；
r属性定义圆的半径。
<ellipse>标签可用来创建椭圆。椭圆与圆很相似。
不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x和 y半径是相同的。
<svg width="600" height="300" version="1.1" xmlns=" ">
<ellipsecx="210"cy="90"rx="200"ry="80"
style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
解释：cx属性定义圆点的 x 坐标 ；
cy 属性定义圆点的 y 坐标 ；
rx 属性定义水平半径 ；
ry 属性定义垂直半径 ；
例：三个累叠而上的椭圆：
<svg width="100%" height="100%" version="1.1" xmlns=" ">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
<line>标签：用来创建线条。
<svg width="100%" height="100%" version="1.1" xmlns=" ">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
解释：x1属性在 x轴定义线条的开始； y1 属性在 y轴定义线条的开始；
x2属性在 x轴定义线条的结束； y2属性在 y轴定义线条的结束；
<polygon>标签用来创建含有不少于三个边的图形。
<svg width="210" height="110" version="1.1" xmlns=" ">
<polygon points="200,10 30,100 50,20"style="fill:#ccc; stroke:#000; stroke-width:1"/>
</svg>
解释：points 属性定义多边形每个角的 x 和 y 坐标
<svg width="310" height="300" version="1.1" xmlns="">
<polygon points="120,70300,210170,250 123,234"
style="fill:#ccc; stroke:#000; stroke-width:1"/>
</svg>
<polyline>标签：用来创建仅包含直线的形状。
<svg width="100" height="100" version="1.1" xmlns=" ">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white; stroke:red; stroke-width:2"/>
</svg>
<path>标签用来定义路径。
下面的命令可用于路径数据：
A = elliptical Arc； C = curveto； H =horizontal lineto； L = lineto；
M = moveto； Q = quadratic Belzier curve； S =smooth curveto；
T = smooth quadratic Belzier curveto； V = vertical lineto； Z = closepath；
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
例：三角形：
定义了一条路径，它开始于位置 250 150，到达位置 150 350，
然后从那里开始到 350 350，最后在 250 150 关闭路径。
<svg width="400" height="400" version="1.1" xmlns=" ">
<path d="M250 150 L150 350 L350 350 Z"/>
</svg>
例：五边形
<svg xmlns="" version="1.1" height="190">
<polygon points="100,3 190,60 160,18040,180 10,60"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
例：<五角星☆>
<svg xmlns="" version="1.1" height="190">
<polygon points="100,10 40,180 190,6510,65 160,180"
style="fill:#dfdfdf; stroke:purple; stroke-width:5; fill-rule:evenodd;"/>
</svg>
例：一个螺旋：
<svg style="position:absolute; top:-225px; left:-55px; width:260px;
height:450px;"version="1.1" xmlns=" ">
<pathd="M153 334
C153 334 151 334 151 334 C151 339 153 344 156 344
C164 344 171 339 171 334 C171 322 164 314 156 314
C142 314 131 322 131 334 C131 350 142 364 156 364
C175 364 191 350 191 334 C191 311 175 294 156 294
C131 294 111 311 111 334 C111 361 131 384 156 384
C186 384 211 361 211 334 C211 300 186 274 156 274"
style="fill:white; stroke:red; stroke-width:2; position:relative;"/>
</svg>
SVG 滤镜：用来向形状和文本添加特殊的效果。
可用的滤镜有：
feColorMatrix ； feImage ； feConvolveMatrix ； feBlend ； feGaussianBlur ；
feOffset ； feMerge； feComposite ； feTile ； feDisplacementMap ；
feDistantLight ； feFlood ； fePointLight ； feTurbulence ； feSpotLight ；
feDiffuseLighting ； feMorphology ； feComponentTransfer ； feSpecularLighting ；
注释：可以在每个 SVG 元素上使用多个滤镜！
借鉴于老师上课文档与W3Cchool