SVG实战开发学习（五）——装饰SVG图形
之前介绍过<defs>元素，它允许我们自定义图形元素。在本章中将要使用这个元素来定义SVG图形的色彩渐变、模式填充、剪裁和遮罩，还将介绍如何在svg中使用css样式表。
【色彩渐变】
svg中有两种色彩渐变：线性渐变和反射渐变。它们的渐变格式都被定义在<defs>元素中，然后在需要的SVG图元中引用它。
线性渐变——是沿着直线方向的色彩渐变过度，使用<linearGradient>元素来定义。
基本属性：
id="GradientName"：<linearGradient>元素的标识ID，也就是它的名字，取值是字符串，用来被需要渐变效果的图形引用。
x1:表示渐变矢量起点的X轴坐标，默认值为0%；
y1:表示渐变矢量起点的Y轴坐标，默认值为0%;
x2:表示渐变矢量终点的X轴坐标，默认值为100%；
y2:表示渐变矢量终点的Y轴坐标，默认值为0%;
（特别说明：上述4个坐标值的取值既可以是数字也可以是百分比，而且可以全部选择默认。选择默认时渐变矢量处于水平向右的方向，但其具体的位置取决于下面将要介绍的"gradientUnits"）属性的值。
其实色彩属性不在<linearGradient>元素中定义，而是在其子元素<stop>中定义，<stop>元素同时"服侍二主"，也是反射渐变的子元素。<stop>元素定义了色彩渐变的关键点的色彩和位置，而且每个<linearGradient>元素下可以有若干个<stop>元素，也就是可以拥有若干个渐变关键点：如果有若干个<stop>元素，那么它们的排列顺序必须严格遵循"offset"属性值的大小。
基本属性：
offset：表示渐变关键点的位置，通常用百分比来表示，因为可能无法知道渐变矢量的具体位置，只给出一个相对的位置。0%代表起点，100%代表终点，取值大于1取1，小于0取0.对于线性渐变，该属性表示沿着渐变矢量方向的关键点位置；而对于放射渐变，则表示从点（fx,fy）到外圆圆周各方向上的某个比例处的点，这些点构成了一条包围点（fx,fy）的曲线。
stop-color:表示渐变关键点的颜色值，默认是黑色。
stop-opacity：表示渐变关键点渲染时的透明度，取值从0到1，即透明到不透明，默认值为1.
【放射渐变】
svg使用<radialGradient>元素来定义。放射渐变除了渐变矢量的定义与线性渐变不同外，其他属性都基本一样。
基本属性
cx：定义圆心的X轴坐标，默认值是50%，即中心点（中心放射）。这个属性和下面要介绍的"cy"属性都是为了帮助放射渐变定义一个圆，这个圆内部分就是色彩的渐变区域。
cy:定义圆心的Y轴坐标，默认值是50%。
r：定义圆的半径，默认值是50%。
fx:
fy:
【带色彩渐变效果的箭头】
svg中绘制箭头的元素<maker>元素，<maker>元素通常也在<defs>元素中定义。
【模式填充】
模式填充与色彩渐变类似，也需要在<defs>中事先定义模板效果。
基本属性：
id：<pattern>元素的标识ID，也就是它的名字。取值是字符串，用来被需要模式填充效果的图形引用。
x：定义模式填充的矩形模板左上角的X轴坐标，默认值是0%,其长度单位由下文的"patternUnits"属性决定。
y：定义模式填充的矩形模板左上角的Y轴坐标,其他同X属性。
width：定义模式填充的矩形模板的宽度，非负，0为不渲染。
height：定义模式填充的矩形模板的高度，非负，0为不渲染。
patternUnits:" userSpaceOnUse | objectBoundingBox "定义上述的大小、位置属性的长度单位。其定义与上一节模式识别中介绍的" gradientUnits "属性相似。
viewBox=" x1 y1 x2 y2 "定义图元在模板矩形内的位置时所使用的内部坐标系。这个属性与<svg>元素中的" viewbox "属性的意义是一样的，是一个相对坐标系，而上述的" x,y,width,height "属性定义的是模板矩形在所引用的元素中位置。
具体效果参见书P93
【svg中的CSS】
svg中几乎所有所有的可视化图形元素都具有" style "属性，它定义了如何渲染这些图形元素，svg有很多样式属性与css和XSL是相同的，但也拥有一些专门为SVG设立的属性，svg的css样式涵盖字体、文字、滤镜效果、交互、绘图等几大类，使用的方法与HTML中的css有类似之处。
【内嵌CSS】
直接把CSS样式表定义在svg文档中，它是通过在<defs>元素中定义<style>元素来实现的，但这与使用"style"属性是不同的。<style>元素允许大家把CSS样式表直接嵌入在svg文档中。
<defs>
<style type="text/css"><![CDATA[
rect{ fill:red;
stroke:blue;
stroke-width:3;
}
]]>
</style>
</defs>
<rect x="200" width="300" height="100"/>
以上实例就是定义的css样式表。使用了实体嵌入标记"<![CDATA[]]>",这样即使样式表中有不符合XML语法的语句也不会对SVG文档的解析造成影响。因为SVG解析器不会对这个实体标记内的字符数据流进行XML规范检查。
【外部CSS】
与内部css方式相对应的是引用外部的css样式表，这种方式使得css代码更易维护，并且可重用性更好，不同的svg文档可以共享同一个css文件。这种引用方式同HTML中引用css样式表的方式很相似。下面举例说明，外部css文件名为"svg.css"。
【style属性常用参数一览】
css样式在svg中的另外一个用法就是把"style"属性写入在某些元素下，使得这些元素按照"style"属性的定义进行渲染。有时可以在<g>元素内定义"style"属性，其下的元素都会自动继承这个样式，如果这些元素对一些样式不匹配的话，svg会自动识别而抛弃，下面列举的参数中有些已经出现在之前的章节中，这里只对常用的参数做一个归纳。
1、绘图类参数
"fill"：是否填充及填充色。
"fill-opacity"：填充透明度。
"fill-rule"：填充的的规则。
"marker"：引用箭头标记。
"marker-start":在路径起点绘制一个箭头。
"marker-mid"：在路径中点绘制一个箭头。
"marker-end"：在路径终点绘制一个箭头。
"stroke"：是否描边及描边色。
" stroke-width "：描边宽度。
"stroke-dasharray"：描边所用的线型。
"stroke-dashoffset"：描边所用的线型的线条间的偏移量。
"stroke-linecap"：路径线条端点的绘制样式。
"stroke-linejoin"：线条交叉处的过度形状。
"stroke-miterlimit"：路径端点是"miter"时的大小限制。
"stroke-opacity"：描边的透明度。
"stroke-rendering"：描边时的渲染规则。
2、字体类参数
"font-family"：字体名称。
"font-size"：字号大小。
"font-size-adjust"：字号大小细微调整时的规则。
"font-stretch"：字体拉升时的规则。
"font-style"：字体额外的样式。
"font-variant"：字体的变体方式。
"font-weight"：字体是否是粗体或者粗体的程度。
3、文字类参数
"direction"：文字排列方向。
"letter-spacing"：文字间距。
"text-decoration"：文字的修饰效果。
"unicode-bidi"：文字使用Unicode编码方式。
" word-spacing "：文字中的词的间距。
"alignment-baseline"：文字的基线排列方式。
4、可视化媒体类参数
"clip"：仅用于最外层<svg>元素，说明剪裁方式。
"color"：颜色值。
"cursor"：鼠标光标的形状。
"display":图像对象是否显示。
"overflow"：仅用于创建新视口的元素，说明该元素大小的处理方式。
"visibility"：图像对象是否可见。
5、滤镜效果类参数
"enable-background"：滤镜渲染时是否考虑背景图像。
"filter"：滤镜参数细节。
"flood-color"：填充色彩。
"flood-opacity"：填充透明度。
6、渐变类参数
"stop-color"：色彩渐变的起止颜色值。
"stop-opacity"：色彩渐变的透明度。
7、交互类参数
"pointer-events"：该元素是否产生事件。
【使用直接属性】
css样式在svg中还有一个用法，就是把"style"属性的参数直接作为元素的属性值。在前面的章节中，也出现过这种用法。比如这样一个元素定义：
<rect x="200" y="100" width="300" height="100" style="fill:red;stroke:black"/>
这里使用"style"属性定义的方法，如果使用直接属性，那么应该这样定义：
<rect x="200" y="100" width="300" height="100" fill="red" stroke="black"/>
【使用class属性】
如果我们在一个css文件中这样定义：
.road{color:red}
.company{color:yellow}
.river{color:blue}
要引用这些样式时就必须使用如下的语法：
<path class="road" … />
