svg

SVG 简介
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 在 HTML 页面
<embed>、<object> 或者 <iframe>
<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
在html里面直接使用
<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>

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

矩形
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色<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"/>x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>`
rx 和 ry 属性可使矩形产生圆角。

圆形
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

椭圆
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

直线
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

多边形
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
points 属性定义多边形每个角的 x 和 y 坐标

曲线
<polyline> 元素是用于创建任何只有直线的形状
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

路径
<path>元素用于定义一个路径。
M = moveto 移动到的点的x轴和y轴的坐标
L = lineto 需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
H = horizontal lineto 绘制平行线
V = vertical lineto 绘制垂直线
C = curveto 三次贝塞尔曲线C
S = smooth curveto
Q = quadratic Bézier curve 二次贝塞尔曲线Q。
T = smooth quadratic Bézier curveto
A = elliptical Arc 弧形
Z = closepath 从当前点画一条直线到路径的起点(闭合)

文本
<text x="0" y="15" fill="red">I love SVG</text>
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>

Stroke 属性
Stroke属性定义一条线，文本或元素轮廓颜色：
stroke- width属性定义了一条线，文本或元素轮廓厚度：

滤镜

模糊效果

<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

所有互联网的SVG滤镜定义在<defs>元素中