HTML5之SVG 2D入门5—颜色的表示及定义方式
作者：佚名
字体：[ ] 来源：互联网 时间：01-30 16:30:59
SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性,接下来介绍下颜色的表示及定义方式感兴趣的朋友可以了解下，或许对你有所帮助
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 width="120" height="240"&
&linearGradient id="Gradient1"&
&stop class="stop1" offset="0%"/&
&stop class="stop2" offset="50%"/&
&stop class="stop3" offset="100%"/&
&/linearGradient&
&linearGradient id="Gradient2" 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: }
.stop2 { stop-color: stop-opacity: 0; }
.stop3 { stop-color: }
&rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/&
&rect x="10" y="120" rx="15" ry="15" width="100" height="100" 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 id="Gradient1"&
&stop class="stop1" offset="0%"/&
&stop class="stop2" offset="50%"/&
&stop class="stop3" offset="100%"/&
&/linearGradient& &linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/&环形渐变使用radialGradient元素定义环形渐变，还是使用stop定义成员色。看例子：&代码如下:&svg width="120" height="240"&
&radialGradient id="Gradient3"&
&stop offset="0%" stop-color="red"/&
&stop offset="100%" stop-color="blue"/&
&/radialGradient&
&radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25"&
&stop offset="0%" stop-color="red"/&
&stop offset="100%" stop-color="blue"/&
&/radialGradient&
&rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/&
&rect x="10" y="120" rx="15" ry="15" width="100" height="100" 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：代码如下:&svg width="120" height="120"&
&radialGradient id="Gradient5"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"&
&stop offset="0%" stop-color="red"/&
&stop offset="100%" stop-color="blue"/&
&/radialGradient&
&rect x="10" y="10" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient5)" stroke="black" stroke-width="2"/&
&circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/&
&circle cx="35" cy="35" r="2" fill="white" stroke="white"/&
&circle cx="60" cy="60" r="2" fill="white" stroke="white"/&
&text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"&(fx,fy)&/text&
&text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"&(cx,cy)&/text& &/svg&
看效果图就知道&焦点&的含义了。
此外，还有渐变色元素还有一些变换的属性，如gradientTransform，这个不是这里的重点，后面会总结变换。另外一个可能用到的属性是spreadMethod属性，这个属性定义了渐变色到达它的终点时应该采取的行为。该属性有3个可选值：pad(默认值),reflect,repeat。pad不用说了，属于自然过渡，渐变色结束以后，使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继续，只不过渐变色会反向继续渲染，从最后一个颜色开始到第一个颜色这个顺序渲染；等到再次到达渐变色终点时，再反序，如此这般指导对象填充完毕。repeat也会让渐变色继续渲染，但是不会反序，还是一遍一遍从第一种颜色到最后一种颜色渲染。效果图如下所示：
看一段重复渲染的代码：&代码如下:&svg width="220" height="220"&
&radialGradient id="Gradient"
cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
spreadMethod="repeat"&
&stop offset="0%" stop-color="red"/&
&stop offset="100%" stop-color="blue"/&
&/radialGradient&
&rect x="50" y="50" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient)"/&&/svg&
纹理填充纹理填充也是一种流行的填充方式，在SVG中，可以使用pattern创建一个纹理，然后用这个pattern去填充别的对象。直接看例子：代码如下:&svg width="200" height="200"&
&linearGradient id="Gradient6"&
&stop offset="0%" stop-color="white"/&
&stop offset="100%" stop-color="blue"/&
&/linearGradient&
&linearGradient id="Gradient7" x1="0" x2="0" y1="0" y2="1"&
&stop offset="0%" stop-color="red"/&
&stop offset="100%" stop-color="orange"/&
&/linearGradient&
&pattern id="Pattern" x=".05" y=".05" width=".25" height=".25"&
&rect x="0" y="0" width="50" height="50" fill="skyblue"/&
&rect x="0" y="0" width="25" height="25" fill="url(#Gradient7)"/&
&circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/&
&/pattern&
&rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/&&/svg&
例子看起来很简单，由渐变色创建pattern，然后使用pattern
填充矩形。这里需要注意：1. 不同的浏览器填充这个pattern的时候效果不一样。
比如例子在FireFix和Chrome中效果一样。但是如果你把渐变色
和pattern定义在同一个defs组合里，则FireFox仍然能正常渲染，
但是Chrome就识别不了渐变色，只会用默认的黑色填充。2. pattern也需要定义id。3. pattern也必须要定义在defs中。4. pattern的使用也是把url(#id)直接赋值给fill或stroke。
上面这些都是很简单的，我们重点看一下例子中的坐标表示情况，坐标在pattern中比较复杂。pattern中包含两个相关属性：patternUnits和patternContentUnits属性；这两个属性的取值都还是只有2个：objectBoundingBox和userSpaceOnUse，这两个值的含义上面以及讲过了。这里容易混淆的是这两个属性的默认值不同，但是当你理解这么做的原因以后，你又会发现这么做还真是有道理。1.&patternUnits属性这个属性与Gradient的gradientUnits属性是一样的，默认采用objectBoundingBox。受这个属性影响的属性有x,y,width,height，这4个属性分别定义了pattern的起点，宽高度。它们都采用了相对值，例子中想要在水平和竖直方向上都填充4次，所以width和height都设为了0.25。2.&patternContentUnits属性这个属性的默认值正好相反，采用userSpaceOnUse。这个属性描述了pattern中绘制的形状(比如上面的rect,circle)的坐标系统。也就是说在默认情况下，你在pattern中绘制的形状和pattern自身的大小/位置使用了不一样的坐标系。考虑上面例子中的情况，我们想填充一个200*200的矩形，而且每个方向重复4次。这就意味着每个pattern是50*50的，那么pattern里面的两个矩形和一个圆形就是画在这个50*50的矩形中。这样我们就能理解上面pattern中的矩形和圆的坐标了。此外，这个例子中的pattern为了居中，需要偏移10px后开始渲染，而这个值是受patternUnits属性制约的，所以默认情况下，x,y值就为：10/200=0.05。& 　那么pattern为什么要这么设置两个属性的默认值呢？
这是由用户的使用决定的(以上面的例子来讨论)：第一种pattern样式：我想这是大多数情况，所以处理成默认值：pattern是会随着外面的图形缩放而被拉伸，不管外围方形是多大，pattern始终在两个方向上都会被填充4次。但是pattern中包含的图形是不会随着外面被填充的方形缩放而进行拉伸的。虽然比较牵强，但就这么理解吧。第二种pattern样式：pattern中的形状也随着外围的形状缩放进行拉伸。我们可以显示的把patternContentUnits属性的值也设为objectBoundingBox达到这个效果。例如把pattern的部分修改如下：代码如下:&pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&
&rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&
&rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&
&circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/& &/pattern&修改后，当改变被填充的矩形的大小时，pattern中的形状也会进行拉伸。而且修改后改成了相对外围对象的坐标，所以不再需要pattern的x和y坐标了，pattern会始终调整以适合被填充的形状。第三种pattern的样式：pattern的形状和大小都是固定了，不管外围对象怎么缩放，你可以把坐标系统都改成userSpaceOnUse实现这个效果。代码如下：&代码如下:&pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&
&rect x="0" y="0" width="50" height="50" fill="skyblue"/&
&rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&
&circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/& &/pattern&这3中典型的pattern如下图所示：
实用参考：
官方文档：脚本索引：开发中心：热门参考：
大家感兴趣的内容
12345678910
最近更新的内容使用CSS来设置SVG中Use元素的样式
使用CSS来设置SVG中Use元素的样式
发布时间： 21:29:47
编辑：www.fx114.net
本篇文章主要介绍了"使用CSS来设置SVG中Use元素的样式"，主要涉及到使用CSS来设置SVG中Use元素的样式方面的内容，对于使用CSS来设置SVG中Use元素的样式感兴趣的同学可以参考一下。
转自：http://blog.csdn.net/xiaozhu2hao/article/details/
用CSS给SVG &use&的内容添加样式
/svg/styling-svg-use-content-css.html
今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.net/codrops//styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比较直观。
& & & 1 单纯的svg文件，将style直接写在&svg&标签元素下
&xmlns=&http://www.w3.org/2000/svg&&style=&display:&&&&xmlns:xlink=&http://www.w3.org/1999/xlink&&width=&2000&&height=&2000&&&&&&&type=&text/css&&&&&&&&svg&path&{&&&&&&&&&&&&fill:&&&&&&&&}&&&&&&&&.codrops-1&{&&&&&&&&&&fill:&#4BC0A5;&&&&&&&&&&color:&#A4DFD1;&&&&&&&&}&&&&&&.codrops-2&{&&&&&&&&fill:&#0099CC;&&&&&&&&&color:&#7FCBE5;&&&&&&}&&&&&&.codrops-3&{&&&&&&&&&fill:&#5F5EC0;&&&&&&&&&color:&#AEAFDD;&&&&&&}&&&&&&&&&&&&&&&id=&codrops&&viewBox=&0&0&23&30&&&&&&&&&&&&class=&back&&fill=&#aaa&&d=&M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0&&&c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43&&&c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33&&&c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895&&&c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263&&&c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313&&&c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z&&&&&&&&&&&&class=&front&&fill=&#ddd&&d=&M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927&&&c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067&&&c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936&&&c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659&M6.177,5.966L6.177,5.966&&&c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203&&&c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z&&&&&&&&&&&&&&&&x=&0&&y=&0&&width=&100&&height=&100&&xlink:href=&#codrops&&class=&codrops-1&&&&&&x=&100&&y=&0&&width=&100&&height=&100&&&&xlink:href=&#codrops&&class=&codrops-2&&&&&&x=&200&&y=&0&&width=&100&&height=&100&&&xlink:href=&#codrops&&class=&codrops-3&&&&&
& & &2 &如果用在Html中如下
&!DOCTYPE&html&&&&&&&&&&&&&&&&&&type=&text/css&&&&&&&&&&&svg&path&{&&&&&&&&&&&&&fill:&&&&&&&&&&&}&&&&&&&&&&&use.codrops-1&{&&&&&&&&&&&&fill:&#4BC0A5;&&&&&&&&&&&&color:&#A4DFD1;&&&&&&&&&&}&&&&&&&&&&use.codrops-2&{&&&&&&&&&&&fill:&#0099CC;&&&&&&&&&&&color:&#7FCBE5;&&&&&&&&&&}&&&&&&&&&&use.codrops-3&{&&&&&&&&&&&&fill:&#5F5EC0;&&&&&&&&&&&&color:&#AEAFDD;&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&style=&width:1000height:1000border:2px&solid&#F00;overflow-y:&&&&&&&&&&&&style=&display:&&&&&&&&&&&&&&&id=&codrops&&viewBox=&0&0&23&30&&&&&&&&&&&&&&&&&class=&back&&fill=&#aaa&&d=&M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0&&&c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43&&&c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33&&&c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895&&&c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263&&&c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313&&&c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z&&&&&&&&&&&&&&&&&class=&front&&fill=&#ddd&&d=&M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927&&&c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067&&&c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936&&&c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659&M6.177,5.966L6.177,5.966&&&c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203&&&c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&height=&90px&&width=&69px&&&&&&&&&&&&&&&&xlink:href=&#codrops&&class=&codrops-1&&&&&&&&&&&&&&&&&&&&&&height=&90px&&width=&69px&&&&&&&&&&&&&&&&xlink:href=&#codrops&&class=&codrops-2&&&&&&&&&&&&&&&&&&&&&&height=&90px&&width=&69px&&&&&&&&&&&&&&&&xlink:href=&#codrops&&class=&codrops-3&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
效果如下图
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：SVG的样式属性和CSS的语法非常接近，有时甚至是一样的，经常会照成一些使用上的混乱。
注意，我们在这里讨论的是用于SVG代码本身出现的规则，而不是SVG被嵌入网页后被附加上去的规则样式。然而，如果你想从CSS属性来了解SVG，比较他们的语法规则是一种有效果的方法。
background-color或color
fill-opacity
background-color或color设置rgba/hsla
border-color
stroke-width
border-thickness
stroke-opacity
border-color设置rgba
border-radius
下面的属性在SVG和CSS中是一样的，只是在SVG的transformations和dimensions中稍有区别：
font-family, font-size, font-style, font-variant 和 font-weight
width 和 height
scale, rotate, skew
大多数的这些属性可以作为SVG样式规则的一部分，如果你想实现类似CSS背景色的效果，这可能是最简单的实现方法。来看下面的一段SVG代码：
&svg width="300" height="170" style="float: left"&
&rect x="10" y="5" rx="15" width="280" height="160" style="fill: #a73838; fill-opacity: 0.65; stroke: #000; stroke-width: 10; stroke-dasharray: 22, 2, 2; ry: 15;"/&
&text x="130" y="115" fill="yellow" font-size="100" style="font-family: Blue Highway, Arial Black, sans- stroke: stroke-width: 2;"&SVG&/text&
&p&Test paragraph&/p&
你可以看到右边的结果：
CSS和SVG之间的渐变方式是有所不同的，你可以自行去查阅这方面的资料。
注意，我们在SVG中不用指定单位，至少上面的代码中就没有指定，它默认的单位是像素。
看到这里，你不要认为SVG的规则样式是CSS样式的更简单的表现形式。SVG提供了很多控制方式，如上所述，SVG可以绘制出各种形式的虚线，而且不像CSS3的border-image那样复杂。看到这里你应该可以开始给你自己的SVG添加样式了。
本文版权属于jQuery之家，转载请注明出处：京东 - WEB前端 - 伯乐在线