自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5中SVG 2D顏色的表示

作者：沙場(chǎng)秋點(diǎn)兵
開發(fā) 前端
從上面的例子看到，除了元素名字和一些特別的成員，其他的所有都和線性漸變一樣，包括stop的定義，必須放到defs中，必須給它設(shè)置id，使用url(#id)去賦值等。

SVG和canvas中是一樣的，都是使用標(biāo)準(zhǔn)的HTML/CSS中的顏色表示方法，這些顏色都可以用于fill和stroke屬性。

基本有下面這些定義顏色的方式：

1. 顏色名字： 直接使用顏色名字red, blue, black...2. rgba/rgb值： 這個(gè)也很好理解，例如#ff0000,rgba(255,100,100,0.5)。3. 十六進(jìn)制值： 用十六進(jìn)制定義的顏色，例如#ffffff。4. 漸變值：這個(gè)也與canvas中一樣，支持兩種漸變色：線性漸變，環(huán)形漸變。如下圖所示：

5.圖案填充：使用自定義的圖案作為填充色。

前面幾種都很簡單，重點(diǎn)看下后面兩種填充色。 

線性漸變

使用linearGradient元素即可定義線性漸變，每一個(gè)漸變色成分使用stop元素定義?？聪旅娴睦樱?/p> 

  1. <svg width="120" height="240">    
  2.  <defs>    
  3.     <linearGradient id="Gradient1">    
  4.       <stop class="stop1" offset="0%"/>    
  5.       <stop class="stop2" offset="50%"/>    
  6.       <stop class="stop3" offset="100%"/>    
  7.     </linearGradient>    
  8.     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">    
  9.       <stop offset="0%" stop-color="red"/>    
  10.       <stop offset="50%" stop-color="black" stop-opacity="0"/>    
  11.       <stop offset="100%" stop-color="blue"/>    
  12.     </linearGradient>    
  13.     <style type="text/css"><![CDATA[    
  14.        #rect1 { fill: url(#Gradient1); }    
  15.        .stop1 { stop-color: red; }    
  16.        .stop2 { stop-color: black; stop-opacity: 0; }    
  17.        .stop3 { stop-color: blue; }    
  18.      ]]> 
  19.     </style>    
  20.   </defs>    
  21.       
  22.   <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>    
  23.   <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>       
  24. </svg>    

在這個(gè)例子中，我們需要注意：

1. 漸變色元素必須要放到defs元素中；

2. 需要給漸變色元素設(shè)置id值，否則的話，別的元素?zé)o法使用這個(gè)漸變色。

3. 漸變色的成員使用stop定義，它的屬性也可以使用CSS定義；它支持class，id這種標(biāo)準(zhǔn)HTML都支持的屬性。其它常用屬性如下：

offset屬性：這個(gè)定義了該成員色的作用范圍，該屬性取值從0%到100%(或者是0到1)；通常第一種顏色都是設(shè)置成0%，最后一種設(shè)置成100%。

stop-color屬性：這個(gè)很簡單，定義了該成員色的顏色。

stop-opacity屬性：定義了成員色的透明度。

x1,y1,x2,y2屬性：這兩個(gè)點(diǎn)定義了漸變的方向，默認(rèn)不寫的話是水平漸變，上面例子中同時(shí)也創(chuàng)建了一個(gè)垂直漸變。

4. 漸變色的使用，如例子中所示，直接用url(#id)的形式賦值給fill或者stroke就可以了。

5. 漸變色成員的復(fù)用：你也可以使用xlink:href引用定義過的漸變色成員，所以上面的例子也可以改寫如下： 

  1. <linearGradient id="Gradient1">    
  2.    <stop class="stop1" offset="0%"/>    
  3.    <stop class="stop2" offset="50%"/>    
  4.    <stop class="stop3" offset="100%"/>    
  5. </linearGradient>   
  6. <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/> 

環(huán)形漸變

使用radialGradient元素定義環(huán)形漸變，還是使用stop定義成員色?？蠢樱?nbsp;

  1. <svg width="120" height="240"> 
  2.   <defs> 
  3.       <radialGradient id="Gradient3"> 
  4.         <stop offset="0%" stop-color="red"/> 
  5.         <stop offset="100%" stop-color="blue"/> 
  6.       </radialGradient> 
  7.       <radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25"> 
  8.         <stop offset="0%" stop-color="red"/> 
  9.         <stop offset="100%" stop-color="blue"/> 
  10.       </radialGradient> 
  11.   </defs> 
  12.    
  13.   <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/>   
  14.   <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient4)"/>   
  15. </svg> 

從上面的例子看到，除了元素名字和一些特別的成員，其他的所有都和線性漸變一樣，包括stop的定義，必須放到defs中，必須給它設(shè)置id，使用url(#id)去賦值等。這些特別的成員如下：

offset屬性：這個(gè)和線性漸變的值是一樣，但是含義不一樣。在環(huán)形漸變中，0%代表圓心處，這個(gè)很好理解。

cx,cy,r屬性：其實(shí)也很好理解，環(huán)形漸變，當(dāng)然要定義環(huán)的圓心和半徑了，體會(huì)一下上面例子中圓的大小和位置就能理解了。

fx,fy屬性：定義顏色中心(焦點(diǎn))處的位置，也就是漸變色最濃處的坐標(biāo)，在上面例子中，紅色最紅的是圓心，這是默認(rèn)效果；如果想改變一下，就可以設(shè)置fx,fy坐標(biāo)值。

不過這里需要注意一下上面cx,cy,r,fx,fy的值，你會(huì)發(fā)現(xiàn)它們都是小數(shù)，那么單位是什么呢？

這個(gè)需要先了解另外一個(gè)相關(guān)的屬性：gradientUnits，它定義了定義漸變色使用的坐標(biāo)單位。這個(gè)屬性有2個(gè)可用值：userSpaceOnUse和objectBoundingBox。

objectBoundingBox是默認(rèn)值，它使用的坐標(biāo)都是相對(duì)于對(duì)象包圍盒的(方形包圍盒，不是方形包圍盒的情況比較復(fù)雜，略過)，取值范圍是0到1。例如上例中的cx,cy的坐標(biāo)值(0.25,0.25)。意味著這個(gè)圓心是在包圍盒的左上角1/4處，半徑0.25意味著半徑長是對(duì)象方形包圍盒長的1/4，就像你們圖中看到的那樣。

userSpaceOnUse表示使用的是絕對(duì)坐標(biāo)，使用這個(gè)設(shè)置的時(shí)候，你必須要保證漸變色和填充的對(duì)象要保持在一個(gè)位置。

再看下面這個(gè)例子，注意gradientUnits屬性默認(rèn)值是objectBoundingBox：

  1. <svg width="120" height="120"> 
  2.   <defs> 
  3.       <radialGradient id="Gradient5" 
  4.             cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> 
  5.         <stop offset="0%" stop-color="red"/> 
  6.         <stop offset="100%" stop-color="blue"/> 
  7.       </radialGradient> 
  8.   </defs> 
  9.    
  10.   <rect x="10" y="10" rx="15" ry="15" width="100" height="100" 
  11.         fill="url(#Gradient5)" stroke="black" stroke-width="2"/> 
  12.  
  13.   <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> 
  14.   <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> 
  15.   <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> 
  16.   <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> 
  17.   <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>   
  18. </svg> 


看效果圖就知道"焦點(diǎn)"的含義了

此外，還有漸變色元素還有一些變換的屬性，如gradientTransform，這個(gè)不是這里的重點(diǎn)，后面會(huì)總結(jié)變換。

另外一個(gè)可能用到的屬性是spreadMethod屬性，這個(gè)屬性定義了漸變色到達(dá)它的終點(diǎn)時(shí)應(yīng)該采取的行為。該屬性有3個(gè)可選值：pad(默認(rèn)值),reflect,repeat。pad不用說了，屬于自然過渡，漸變色結(jié)束以后，使用最后一個(gè)成員色直接渲染對(duì)象剩下的部分。refect會(huì)讓漸變色繼續(xù)，只不過漸變色會(huì)反向繼續(xù)渲染，從最后一個(gè)顏色開始到第一個(gè)顏色這個(gè)順序渲染；等到再次到達(dá)漸變色終點(diǎn)時(shí)，再反序，如此這般指導(dǎo)對(duì)象填充完畢。repeat也會(huì)讓漸變色繼續(xù)渲染，但是不會(huì)反序，還是一遍一遍從第一種顏色到最后一種顏色渲染。效果圖如下所示：

看一段重復(fù)渲染的代碼： 

  1. <svg width="220" height="220"> 
  2.   <defs> 
  3.       <radialGradient id="Gradient" 
  4.             cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25" 
  5.             spreadMethod="repeat"> 
  6.         <stop offset="0%" stop-color="red"/> 
  7.         <stop offset="100%" stop-color="blue"/> 
  8.       </radialGradient> 
  9.   </defs> 
  10.   <rect x="50" y="50" rx="15" ry="15" width="100" height="100" 
  11.        fill="url(#Gradient)"/> 
  12. </svg> 

#p#

紋理填充

紋理填充也是一種流行的填充方式，在SVG中，可以使用pattern創(chuàng)建一個(gè)紋理，然后用這個(gè)pattern去填充別的對(duì)象。直接看例子：

  1. <svg width="200" height="200"> 
  2.   <defs> 
  3.     <linearGradient id="Gradient6"> 
  4.       <stop offset="0%" stop-color="white"/> 
  5.       <stop offset="100%" stop-color="blue"/> 
  6.     </linearGradient> 
  7.     <linearGradient id="Gradient7" x1="0" x2="0" y1="0" y2="1"> 
  8.       <stop offset="0%" stop-color="red"/> 
  9.       <stop offset="100%" stop-color="orange"/> 
  10.     </linearGradient> 
  11.   </defs> 
  12.   <defs> 
  13.     <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25"> 
  14.       <rect x="0" y="0" width="50" height="50" fill="skyblue"/> 
  15.       <rect x="0" y="0" width="25" height="25" fill="url(#Gradient7)"/> 
  16.       <circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/> 
  17.     </pattern>   
  18.   </defs> 
  19.     
  20.   <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> 
  21. </svg> 

例子看起來很簡單，由漸變色創(chuàng)建pattern，然后使用pattern

填充矩形。這里需要注意：

1. 不同的瀏覽器填充這個(gè)pattern的時(shí)候效果不一樣。

比如例子在FireFix和Chrome中效果一樣。但是如果你把漸變色

和pattern定義在同一個(gè)defs組合里，則FireFox仍然能正常渲染，

但是Chrome就識(shí)別不了漸變色，只會(huì)用默認(rèn)的黑色填充。

2. pattern也需要定義id。

3. pattern也必須要定義在defs中。

4. pattern的使用也是把url(#id)直接賦值給fill或stroke。

上面這些都是很簡單的，我們重點(diǎn)看一下例子中的坐標(biāo)表示情況，坐標(biāo)在pattern中比較復(fù)雜。

pattern中包含兩個(gè)相關(guān)屬性：patternUnits和patternContentUnits屬性；這兩個(gè)屬性的取值都還是只有2個(gè)：objectBoundingBox和userSpaceOnUse，這兩個(gè)值的含義上面以及講過了。這里容易混淆的是這兩個(gè)屬性的默認(rèn)值不同，但是當(dāng)你理解這么做的原因以后，你又會(huì)發(fā)現(xiàn)這么做還真是有道理。

1. patternUnits屬性

這個(gè)屬性與Gradient的gradientUnits屬性是一樣的，默認(rèn)采用objectBoundingBox。受這個(gè)屬性影響的屬性有x,y,width,height，這4個(gè)屬性分別定義了pattern的起點(diǎn)，寬高度。它們都采用了相對(duì)值，例子中想要在水平和豎直方向上都填充4次，所以width和height都設(shè)為了0.25。

2. patternContentUnits屬性

這個(gè)屬性的默認(rèn)值正好相反，采用userSpaceOnUse。這個(gè)屬性描述了pattern中繪制的形狀(比如上面的rect,circle)的坐標(biāo)系統(tǒng)。也就是說在默認(rèn)情況下，你在pattern中繪制的形狀和pattern自身的大小/位置使用了不一樣的坐標(biāo)系?？紤]上面例子中的情況，我們想填充一個(gè)200*200的矩形，而且每個(gè)方向重復(fù)4次。這就意味著每個(gè)pattern是50*50的，那么pattern里面的兩個(gè)矩形和一個(gè)圓形就是畫在這個(gè)50*50的矩形中。這樣我們就能理解上面pattern中的矩形和圓的坐標(biāo)了。此外，這個(gè)例子中的pattern為了居中，需要偏移10px后開始渲染，而這個(gè)值是受patternUnits屬性制約的，所以默認(rèn)情況下，x,y值就為：10/200=0.05。

那么pattern為什么要這么設(shè)置兩個(gè)屬性的默認(rèn)值呢？

這是由用戶的使用決定的(以上面的例子來討論)：

第一種pattern樣式：我想這是大多數(shù)情況，所以處理成默認(rèn)值：pattern是會(huì)隨著外面的圖形縮放而被拉伸，不管外圍方形是多大，pattern始終在兩個(gè)方向上都會(huì)被填充4次。但是pattern中包含的圖形是不會(huì)隨著外面被填充的方形縮放而進(jìn)行拉伸的。雖然比較牽強(qiáng)，但就這么理解吧。

第二種pattern樣式：pattern中的形狀也隨著外圍的形狀縮放進(jìn)行拉伸。我們可以顯示的把patternContentUnits屬性的值也設(shè)為objectBoundingBox達(dá)到這個(gè)效果。例如把pattern的部分修改如下：

  1. <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> 
  2.    <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> 
  3.    <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> 
  4.    <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> 
  5.  </pattern> 

修改后，當(dāng)改變被填充的矩形的大小時(shí)，pattern中的形狀也會(huì)進(jìn)行拉伸。而且修改后改成了相對(duì)外圍對(duì)象的坐標(biāo)，所以不再需要pattern的x和y坐標(biāo)了，pattern會(huì)始終調(diào)整以適合被填充的形狀。

第三種pattern的樣式：pattern的形狀和大小都是固定了，不管外圍對(duì)象怎么縮放，你可以把坐標(biāo)系統(tǒng)都改成userSpaceOnUse實(shí)現(xiàn)這個(gè)效果。代碼如下： 

  1. <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> 
  2.    <rect x="0" y="0" width="50" height="50" fill="skyblue"/> 
  3.    <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> 
  4.    <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> 
  5.  </pattern> 

這3中典型的pattern如下圖所示：

 Image:SVG_Pattern_Comparison_of_Units.png

實(shí)用參考：

腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開發(fā)中心：https://developer.mozilla.org/en/SVG

熱門參考：http://www.chinasvg.com/

官方文檔：http://www.w3.org/TR/SVG11

原文鏈接：http://www.cnblogs.com/dxy1982/archive/2012/04/14/2447065.html

【編輯推薦】

 

責(zé)任編輯：張偉 來源： 沙場(chǎng)秋點(diǎn)兵的博客
HTML 5
相關(guān)推薦

2012-05-07 14:25:16

HTML5

2012-05-07 14:13:59

HTML5

2012-05-07 15:08:00

HTML5

2012-05-08 10:20:36

HTML5

2012-05-07 16:14:21

HTML5

2013-01-08 11:00:20

IBMdW

2012-11-07 09:43:58

IBMdw

2011-04-25 14:36:24

Ubuntu Unit

2023-05-03 09:01:41

CanvasWebGL

2011-08-11 18:07:55

iPhoneQuratz 2D

2024-04-23 09:30:07

3D模型

2020-10-26 13:40:00

CascadingSt

2011-05-23 17:21:38

Ubuntu 10.1Unity 2D

2011-09-06 14:56:08

CubeMaster魔方IOS游戲

2022-05-23 10:26:10

人工智能機(jī)器學(xué)習(xí)機(jī)器視覺

2022-06-14 07:51:10

Godot游戲引擎

2011-12-29 14:22:40

Java

2012-12-24 09:11:58

iOSUnity3D

2015-10-23 13:44:14

巴巴獵

2013-01-30 16:15:40

adobeHTML5css3
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)