|
SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。
基本有下面这些定义颜色的方式：
1. 颜色名字： 直接使用颜色名字red, blue, black...
2. rgba/rgb值： 这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。
3. 十六进制值： 用十六进制定义的颜色，例如#ffffff。
4. 渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，环形渐变。如下图所示：
5. 图案填充：使用自定义的图案作为填充色。
前面几种都很简单，重点看下后面两种填充色。
线性渐变
使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义。看下面的例子：
复制代码 代码如下:
<svg>
<defs>
<linearGradient>
<stop offset="0%"/>
<stop offset="50%"/>
<stop offset="100%"/>
</linearGradient>
<linearGradient x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]>
</style>
</defs>
<rect x="10" y="10" rx="15" ry="15"/>
<rect x="10" y="120" rx="15" ry="15" fill="url(#Gradient2)"/>
</svg>
在这个例子中，我们需要注意：
1. 渐变色元素必须要放到defs元素中；
2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下：
offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。
stop-color属性：这个很简单，定义了该成员色的颜色。
stop-opacity属性：定义了成员色的透明度。
x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。
4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。
5. 渐变色成员的复用：你也可以使用xlink:href引用定义过的渐变色成员，所以上面的例子也可以改写如下：
复制代码 代码如下:
<linearGradient>
<stop offset="0%"/>
<stop offset="50%"/>
<stop offset="100%"/>
</linearGradient>
<linearGradient x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/>
环形渐变
使用radialGradient元素定义环形渐变，还是使用stop定义成员色。看例子：
复制代码 代码如下:
<svg>
<defs>
<radialGradient>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" fill="url(#Gradient3)"/>
<rect x="10" y="120" rx="15" ry="15" fill="url(#Gradient4)"/>
</svg>
从上面的例子看到，除了元素名字和一些特别的成员，其他的所有都和线性渐变一样，包括stop的定义，必须放到defs中，必须给它设置id，使用url(#id)去赋值等。这些特别的成员如下：
offset属性：这个和线性渐变的值是一样，但是含义不一样。在环形渐变中，0%代表圆心处，这个很好理解。
cx,cy,r属性：其实也很好理解，环形渐变，当然要定义环的圆心和半径了，体会一下上面例子中圆的大小和位置就能理解了。
fx,fy属性：定义颜色中心(焦点)处的位置，也就是渐变色最浓处的坐标，在上面例子中，红色最红的是圆心，这是默认效果；如果想改变一下，就可以设置fx,fy坐标值。
不过这里需要注意一下上面cx,cy,r,fx,fy的值，你会发现它们都是小数，那么单位是什么呢？
这个需要先了解另外一个相关的属性：gradientUnits，它定义了定义渐变色使用的坐标单位。这个属性有2个可用值：userSpaceOnUse和objectBoundingBox。
objectBoundingBox是默认值，它使用的坐标都是相对于对象包围盒的(方形包围盒，不是方形包围盒的情况比较复杂，略过)，取值范围是0到1。例如上例中的cx,cy的坐标值(0.25,0.25)。意味着这个圆心是在包围盒的左上角1/4处，半径0.25意味着半径长是对象方形包围盒长的1/4，就像你们图中看到的那样。
userSpaceOnUse表示使用的是绝对坐标，使用这个设置的时候，你必须要保证渐变色和填充的对象要保持在一个位置。
再看下面这个例子，注意gradientUnits属性默认值是objectBoundingBox：
复制代码 代码如下: （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
