2018-07-23 svg装饰

上次介绍了svg的“建筑材料”，这次来介绍“装饰材料”

svg可以通过自己本身的属性或者css样式来改变样子。

目录

1. 基本属性 fill stroke
2. 渐变
3. 图案
4. Texts
5. 变形

属性

对象内部设置属性：fill

fill 属性设置对象内部的颜色，即使对象不是闭合的。 就如下图，树不是闭合曲线，但是fill属性依然有效。

半棵树

属性	作用
fill	设置 对象内部的颜色
fill-opacity	控制填充色的不透明度

对象线条设置属性： stroke

属性	作用	value
stroke	设置对象线条的颜色
stroke-opacity	控制填充色的不透明度
stroke-width	线条宽度
stroke-linecap	绘制描边的方式	1.butt ，直边结束线段 2. square， 以线段端点为中心画正方形，stroke-width为半径 3. round， 以线段端点为中心画圆， stroke-width为半径
stroke-linejoin	两条线段间连接的方式	1.miter，连接处是尖角 2.round，连接处是圆角 3.bevel， 连接处是斜接
stroke-dasharray	将虚线类型应用在描边上	(a,b) 一组以逗号分割的数据，a是填色区域长度，b是非填色区域，（a,b,c）=》（a,b,c,a,b,c）a长度填色，b长度非填色，c长度填色，a长度非填色，b长度填色，c长度非填色
stroke-dashoffset	定义虚线开始的位置	如果dashoffset等于dasharray一个组合的长度，那么从实现来看，没有变化

以上属性都可以用css设置。svg中可以加入defs标签，放入style属性。

!注意
放在defs内的style也会影响到其他同名的元素，但是因为svg常用的fill，stroke对其他非svg标签的没有作用，所以还好，但是设置一些transform等都会影响的样式，则需要注意了。

abc

注意
在上面这个代码片段中，出现了CDATA。CDATA包括的代码片段会被按照字符（character data）编译，而不是标记（markup）。
在xhtml中，xxx仍会显示在页面上，而在html中，会将这部分当作注释来解读，并且注释部分是从第一个'<'到第一个出现的'>'。

defs 标签

defs标签类似于隐形斗篷，在defs内定义的元素，像之前介绍的react，ellipse等，不会显示出来，但是svg其他元素可以调用他们。后面的一些效果会用到这个标签的特性。

---

渐变

渐变使得svg像彩虹七色一样过度自然。渐变分为线性和径向。
渐变节点需要id，这样翻边其他元素调用。渐变一般放在上面提到的defs中。

线性渐变

+渐变的烟圈

abc

1. linearGradient默认是水平方向的，通过设置x1， x2， y1， y2 来改变渐变方向。这些属性的用法和line的属性是一致的。
2. xlink：href属性。可以通过这个属性调用另外一个渐变样式。

stop标签的属性	意义
offset	偏移量
stop-color	颜色中值
stop-opacity	半透明度

径向渐变

+太阳+毒烟

abc

radialGradient 的属性可以控制位置和方向。径向渐变有两个重要的点，中心和焦点。还有一个控制渐变的方法

1. 中心，类似于circle，设置cx，cy和r确定渐变效果的范围。
2. 焦点，通过设置fx和fy，描述了渐变的中心。

通用属性

1. spreadMethod

当渐变没有充满对象时，剩下的区域如何填充颜色可以由spreadMethod控制，值为pad时表明，剩下的区域就由100%时的填充颜色填充，reflect 时是从100%-0%，再0%-100%的颜色填充，而repeat时则是像stroke-dasharray的填充规则，0-100%的颜色，重复。

2. gradientUnits

在设置cx等属性值，不得不提到gradientUnits的属性，这个是用来描述渐变的大小和方向的单元系统，有两个值，userSpaceOnUse，objectBoundingBox。默认值是第二个。所以只需要指定0到1的坐标，渐变会自动缩放。userSpaceOnUse使用绝对单元，也就是当前svg的坐标轴。

1. style中设置的渐变高于属性设置的渐变

---

图案

之前所有介绍的元素和属性，他们可以任意组合形成一个图案，而这个图案可以作为新的一个模版。这就是图案（pattern）的魅力。
pattern元素也是需要放在defs元素内。

属性

1. pattern定义的是一个单元系统，是不是很耳熟，是不是想起了gradientUnits。是的，pattern有个patternUnits属性，默认值和objectBoundingBox类似。所以width和height的取值是按照比例来定的。(x,y)可以控制pattern元素在对象中渲染时的便宜，例如（0，0.1），图案向下偏移0.1的单元单位，当然，pattern会补齐上半部分。（x，y）的单位也是按照比例来的。
2. pattern的第二个属性是patternContentUnits，控制的是pattern内部元素绘制时的坐标系统。默认值是和patterUnits相反的，是userSpaceOnUse。
   总结来说，默认pattern本身的坐标系统是按照比例缩放的，而内部元素的绘制是按照绝对值来绘制的。

所以根据不同的需求和目的，要分别设置这两个值。

1. 如果随着应用pattern的对象的变化，pattern内的图案大小要保持不变的话，两个元素都可以设置成默认值。
2. 如果随着对象的变化，图案也要等比例缩放，那么patternContentUnits要设置成objectBoundingBox，而patternUnits默认。
3. 如果随着对象的变化，图案保持不变而只是填充更多的图形，那么patternContentUnits要设置成userSpaceOnUse，而patternUnits也设置成userSpaceOnUse。

---

过去文人喜欢在画旁边题字，以文字来辅助表达画里的意境。svg也给了我们这样的选择。
下面来介绍Texts。

Texts

+文字

(x,y)控制文字出现的位置，text-anchor控制这一点的时应该展现文字的那一部分。如果设置成end，那么文字的最后部分就在这一点。就像上面那个文字，如果想让他消失，那么就设置text-anchor=“end”，文字disappear了。无需display：none，无需删除，就是这么神奇。It's amazing。

红绿搭配，世界我有

welcome to my house

忆往昔，有种文字叫做艺术字，可以设置不同填充颜色，不同颜色的描边。svg can do， too。上面用到了font-size，还可以设定font-family、font-style、font-weight、font-variant、font-stretch、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。这点和css的设置文字属性很类似。

相关的三个元素

tspan

属性	意义
x	设置一个新的而且是绝对值的x坐标。覆盖了默认的当前的文本位置。这个可以是一个数列。可以通过这种方式控制文字间的空隙大小。
dx	相对值。
y	设置一个新的而且是绝对值的y坐标。覆盖了默认的当前的文本位置。这个可以是一个数列。可以通过这种方式控制文字间的空隙大小。
dy	相对值。
rotate	把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。
textLength	字符串的长度。如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。

tref（已废弃）

textPath

利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走。text上设置（x，y）也不起作用了。内部的textPath优先性更高。

变形

“月光女神，赐给我力量，变身！”

元素g

就像js里，会将重复使用的函数部分抽离出来。svg也会，他将共同的属性放置在g元素上，g元素内部的元素都可以应用这个属性。

平移，旋转，斜切，缩放

css中有个transform属性。svg中同样适用。可以通过translate，rotate，skew，scale设置。和css中用法一致。

svg嵌套

svg可以嵌入别的svg元素。因此你可以利用内部svg元素的属性x、y、viewBox、width和height简单创建一个新的坐标系统。

不同的坐标

剪切

就像我们常用的截图工具一样，剪切就好比那个选择框。
在defs里创建一个clipPath的标签，在使用的地方可以用clip-path属性调用。

格格的黑旗头

遮罩

遮罩有时候的表现特别像渐变，其实就是白色蒙版，并且可以调渐变效果。
这里用到的元素也是定义在defs，是mask。

同种效果，不同实现

关于viewbox，有个小秘密，可以设置viewbox为画图区域，然后调整width和height，就可以等比例缩放了。就像画图工具里的放大和缩小，并且是按比例的。

---

装饰的材料和技术介绍到这里。下一章讲下svg的动画。