SVG 笔记

1. svg的基础原型

矩形 圆形 椭圆 线 折线 多边形 路线

1.1 矩形的属性

Attribute： width ：宽度
height ：高度
fill ：填充色
stroke-width 矩形边框宽度
stroke：矩形边框颜色
opacity :定义元素的透明度
rx 和 ry 属性可使矩形产生圆角

1.2圆形的属性

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。

1.3椭圆的属性

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

1.4 线条的属性

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

1.5 多边形属性

points 属性定义多边形每个角的 x 和 y 坐标

1.6 折线的属性

跟多边形一样都是points

1.7路径的属性

下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

实例：

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

1.8svg滤镜

在 SVG 中，可用的滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

必须在 标签中定义 SVG 滤镜。

高斯模糊（Gaussian Blur）

标签用来定义 SVG 滤镜。 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

标签必须嵌套在 标签内。 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

实例：

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 标签进行定义的。fe 后缀可用于所有的滤镜
标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果.

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

线性渐变

放射性渐变

线性渐变

可用来定义 SVG 的线性渐变。

标签必须嵌套在 的内部。 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

放射性渐变

用来定义放射性渐变。

标签必须嵌套在 中。 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义