首頁 > web前端 > H5教程 > 主體

HTML5之SVG 2D入門5—顏色的表示及定義方式_html5教學技巧

WBOY
發布: 2016-05-16 15:50:02
原創
1531 人瀏覽過

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元素定義。看下面的範例:

複製程式碼
程式碼如下:


程式碼如下:

















  

在這個例子中,我們需要注意
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引用定義過的漸層色成員,所以上面的範例也可以改寫如下: 
複製程式碼

程式碼如下:







環形漸變


使用radialGradient元素定義環形漸變,還是使用stop定義成員色。看範例: 
複製程式碼
程式碼如下:

















從上面的例子看到,除了元素名字和一些特別的成員,其他的所有都和線性漸變一樣,包括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:

複製代碼
代碼如下:



cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">





fill="url(#Gradient5)" stroke="black" stroke-width="2"/>



(fx,fy)
(cx,cy)


看效果圖就知道"焦點"的意思了。

此外,還有漸層元素還有一些變換的屬性,如gradientTransform,這個不是這裡的重點,後面會總結變換。
另外一個可能用到的屬性是spreadMethod屬性,這個屬性定義了漸變色到達它的終點時應該採取的行為。此屬性有3個可選值:pad(預設值),reflect,repeat。 pad不用說了,屬於自然過渡,漸變色結束以後,使用最後一個成員色直接渲染物件剩下的部分。 refect會讓漸層色繼續,只不過漸層色會反向繼續渲染,從最後一個顏色開始到第一個顏色這個順序渲染;等到再次到達漸變色終點時,再反序,如此這般指導對象填充完畢。 repeat也會讓漸層色繼續渲染,但不會反序,還是一遍又一遍從第一種顏色到最後一種顏色渲染。效果圖如下:

看一段重複渲染的代碼: 

複製代碼
代碼如下:



cx="0.5" cy="0.5" r="0.25" fx= ".25" fy=".25"
spreadMethod="repeat">




fill="url(#Gradient)"/>

紋理填充
紋理填充也是一種流行的填充方式,在SVG中,可以使用pattern創建一個紋理,然後用這個pattern去填充別的對象。直接看範例:

複製程式碼
程式碼如下:


程式碼如下:



















範例看起來很簡單,由漸層色建立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中的形狀也會進行拉伸。而且修改後改成了相對外圍物件的座標,所以不再需要pattern的x和y座標了,pattern會總是調整以適合被填滿的形狀。
第三種pattern的樣式:pattern的形狀和大小都固定了,不管外圍物件怎麼縮放,你可以把座標系統都改成userSpaceOnUse實現這個效果。代碼如下: 

複製代碼
代碼如下:






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

 HTML5之SVG 2D入門5—顏色的表示及定義方式_html5教學技巧

實用參考:

官方文件:http://www.w3.org/TR/SVG11/
腳本索引:http://msdn.microsoft.com/zh-cn/library /ff971910(v=vs.85).aspx
開發中心:https://developer.mozilla.org/en/SVG
熱門參考:http: //www.chinasvg.com/

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!