欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5之SVG 2D入門7—SVG元素的重用與引用

  發(fā)布時間:2013-01-30 16:41:28   作者:佚名   我要評論
前面介紹了很多的圖形元素,如果很多圖形本身是一樣的,需要每次都去定義一個新的么?我們可以重用一些圖形嗎?這就是本節(jié)講的重點:SVG元素的重用,感興趣的朋友可以了解下,或許對你有所幫助
前面介紹了很多的圖形元素,如果很多圖形本身是一樣的,需要每次都去定義一個新的么?我們能否共用一些圖形呢?這是這節(jié)的重點-SVG元素的重用。

組合-g元素
g元素是一種容器,它組合一組相關(guān)的圖形元素成為一個整體;這樣,我們就可以對這個整體進(jìn)行操作。這個元素通??梢院蚫esc和title元素配合使用,提供文檔的結(jié)構(gòu)信息。結(jié)構(gòu)良好的文檔通??勺x性和渲染效率都不錯??匆粋€小例子:

復(fù)制代碼
代碼如下:

<svgxmlns="http://www.w3.org/2000/svg"
version="1.1"width="5cm"height="5cm">
<desc>Twogroups,eachoftworectangles</desc>
<gid="group1"fill="red">
<rectx="1cm"y="1cm"width="1cm"height="1cm"/>
<rectx="3cm"y="1cm"width="1cm"height="1cm"/>
</g>
<gid="group2"fill="blue">
<rectx="1cm"y="3cm"width="1cm"height="1cm"/>
<rectx="3cm"y="3cm"width="1cm"height="1cm"/>
</g>
<!--Showoutlineofcanvasusing'rect'element-->
<rectx=".01cm"y=".01cm"width="4.98cm"height="4.98cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

注意幾點
1.xmlns="http://www.w3.org/2000/svg"表明了整個svg元素默認(rèn)的命名空間是svg。這個在無歧義的時候可以省略。這里由于svg文檔是一個XML文檔,XML命名空間的相關(guān)規(guī)則這里都是適用的。例如可以給svg顯示的指定命名空間,給命名空間提供別名等。
2.g元素是可以嵌套的。
3.組合起來的圖形元素就和單個的元素一樣,可以給id值,這樣,需要的時候(例如動畫和重用一組元素)只用引用這個id值就可以了。
4.組合一組圖形元素可以統(tǒng)一設(shè)置這組元素的相關(guān)屬性(fill,stroke,transform等),這也是使用組合的一種場景。

模板-symbol元素
symbol元素用于定義圖形模板(模板可以包含很多圖形),這個模板可以被use元素實例化。模板的功能與g元素很相似,都是提供一組圖形對象,但是也有一些區(qū)別。與g元素不同的地方是:
1.symbol元素本身是不會被渲染的,只有symbol模板的實例會被渲染。
2.symbol元素可以擁有屬性viewBox和preserveAspectRatio,這些允許symbol縮放圖形元素。

從渲染角度來說,與symbol元素相似的元素是marker(定義箭頭和標(biāo)號)和pattern(定義顏色)元素;這些元素不會直接被渲染;他們的使用方式基本都是由use元素去實例化。正是這個原因,對于symbol來說,'display'屬性是沒有意義的。
下面這個修改過的代碼顯示了symbol的使用方式:

復(fù)制代碼
代碼如下:

<svgxmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"width="5cm"height="5cm">
<desc>Twogroups,eachoftworectangles</desc>
<symbolid="group1"fill="red">
<rectx="1cm"y="1cm"width="1cm"height="1cm"/>
<rectx="3cm"y="1cm"width="1cm"height="1cm"/>
</symbol>
<gid="group2"fill="blue">
<rectx="1cm"y="3cm"width="1cm"height="1cm"/>
<rectx="3cm"y="3cm"width="1cm"height="1cm"/>
</g>
<usexlink:href="#group1"target="_blank"rel="nofollow">
<!--Showoutlineofcanvasusing'rect'element-->
<rectx=".02cm"y=".02cm"width="4.96cm"height="4.96cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

定義-defs元素
SVG允許定義一組對象,然后重用這組對象(注意,不僅僅是圖形對象)。最常見的例子如定義漸變色,然后再其他的圖形對象中賦給fill屬性。漸變色定義的時候是不會渲染的,所以這類型的對象可以放到任何地方。重用對于圖形對象中也是經(jīng)常存在的,而且我們也不希望定義的時候直接渲染,而是想在引用的地方渲染,這個可以用defs元素實現(xiàn)。

通常情況下,推薦的做法是:只要有可能,就把被引用的對象放到defs元素中。這些對象通常是:altGlyphDef,clipPath,cursor,filter,marker,mask,pattern,linearGradient,radialGradient,symbol和圖形對象等。把這些對象定義在defs元素中很容易理解,所以就提高了可訪問性。

其實作為容器對象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用,只不過每個元素的特性可能少許不同:比如g元素是直接渲染的,symbol和defs不會直接渲染,symbol含有viewBox屬性,會創(chuàng)建新的視窗。

通常都會給在defs中定義的元素賦予id屬性,并在用到的地方直接使用。根據(jù)元素的不同,這些定義可以用到不同地方,比如下面的漸進(jìn)色作為屬性來使用了:

復(fù)制代碼
代碼如下:

<svgwidth="8cm"height="3cm"
xmlns="http://www.w3.org/2000/svg"version="1.1">
<desc>LocalURIreferenceswithinancestor's'defs'element.</desc>
<defs>
<linearGradientid="Gradient01">
<stopoffset="20%"stop-color="#39F"/>
<stopoffset="90%"stop-color="#F3F"/>
</linearGradient>
</defs>
<rectx="1cm"y="1cm"width="6cm"height="1cm"
fill="url(#Gradient01)"/>
</svg>

圖形相關(guān)元素的定義可以用use元素鏈接到文檔。例如:

復(fù)制代碼
代碼如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>ExampleUse01-Simplecaseof'use'ona'rect'</desc>
<defs>
<rectid="MyRect"width="60"height="10"/>
</defs>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<usex="20"y="10"xlink:href="#MyRect"/>
</svg>

在這里請注意xlink名稱空間的使用。盡管大多數(shù)查看器沒有它也將正確顯示這一項,但為了保持一致,xlink名稱空間應(yīng)該在<svg></svg>元素上定義。

引用-use元素
任何svg,symbol,g,單個的圖形元素和use元素本質(zhì)上都可以作為模板對象被use元素引用(例如初始化)。use引用的圖形內(nèi)容會在指定的位置渲染。與image元素不同,use元素不能引用整個文檔。
use元素也有x,y,width和height屬性,這些屬性可以省略,如果不省略的話,會將被引用的圖形內(nèi)容坐標(biāo)或長度映射到當(dāng)前的用戶坐標(biāo)空間來。

use元素的作用過程就相當(dāng)于把被引用的對象深拷貝一份到獨立的非公開的DOM樹中;這棵樹的父節(jié)點是use元素。雖然是非公開的DOM節(jié)點,但是本質(zhì)上還是DOM節(jié)點,所以被引用對象的所有屬性值、動畫、事件、CSS的相關(guān)設(shè)置等都會拷貝多來并都還是會起作用,而且這些節(jié)點也會繼承use元素和use祖先的相關(guān)屬性(注意引用元素是深拷貝,這些拷貝過來的元素與原來的元素已經(jīng)無關(guān)系了,所以這里不會繼承被引用元素祖先節(jié)點的屬性),如果這些節(jié)點本身有相關(guān)(CSS)屬性,還會覆蓋繼承來的屬性,這些與普通的DOM節(jié)點是一致的,所以對use元素使用"visibility:hidden"時要小心,并不一定會起作用。但是由于這部分節(jié)點是非公開的,在DOM操作中,也只能看到use元素,所以也只能操作到use元素。

從視覺效果來看,use元素更像是占位符,渲染完成后的視覺效果就和直接用被引用對象渲染是一樣的:
1.use元素引用一個symbol元素
這種情況下,視覺效果就相當(dāng)于:
(1)把use元素?fù)Q成g元素;
(2)把use的除x,y,width,height,xlink:href外的屬性全部移到g元素;
(3)把use的x,y屬性變成translate(x,y),追加到g元素的transform屬性最后;
(4)把引用的symbol元素?fù)Q成svg元素,這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則是100%);
(5)把引用的symbol元素的圖形內(nèi)容深拷貝到替換的svg中。
2.use元素引用一個svg元素
這種情況下,視覺效果就相當(dāng)于:
(1)把use元素?fù)Q成g元素;
(2)把use的除x,y,width,height,xlink:href外的屬性全部移到g元素;
(3)把use的x,y屬性變成translate(x,y),追加到g元素的transform屬性最后;
(4)把引用的svg元素包括內(nèi)容拷貝過來,這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則使用原來的值);
3.其他情況
這些情況下的視覺效果就相當(dāng)于:
(1)把use元素?fù)Q成g元素;
(2)把use的除x,y,width,height,xlink:href外的屬性全部移到g元素;
(3)把use的x,y屬性變成translate(x,y),追加到g元素的transform屬性最后;
(4)把引用元素拷貝過來;
看下面例子的視覺效果

復(fù)制代碼
代碼如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>ExampleUse03-'use'witha'transform'attribute</desc>
<defs>
<rectid="MyRect"x="0"y="0"width="60"height="10"/>
</defs>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<usexlink:href="#MyRect"
transform="translate(20,2.5)rotate(10)"/>
</svg>

下面的圖和上面的圖外觀是一樣的

復(fù)制代碼
代碼如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"
xmlns="http://www.w3.org/2000/svg"version="1.1">
<desc>ExampleUse03-'use'witha'transform'attribute</desc>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<gtransform="translate(20,2.5)rotate(10)">
<rectx="0"y="0"width="60"height="10"/>
</g>
</svg>

實用參考:
腳本索引: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/

相關(guān)文章

  • HTML5中Canvas與SVG的畫圖原理比較

    canvas 與 SVG都能夠使你在瀏覽器中畫圖,但它們的基本原理不同,接下來將對canvas 與 SVG的畫圖原理進(jìn)行介紹,感興趣的朋友可以了解下
    2013-01-16
  • HTML5之SVG 2D入門1—SVG(可縮放矢量圖形)概述

    可縮放矢量圖形(Scalable Vector Graphics,簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴(yán)格遵從XML語法),SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha 蒙板和模板對象,感
    2013-01-30
  • HTML5之SVG 2D入門11—用戶交互性(動畫)介紹及應(yīng)用

    SVG擁有良好的用戶交互性:SVG能響應(yīng)大部分的DOM2事件,SVG能通過cursor良好的捕捉用戶鼠標(biāo)的移動等等,感興趣的朋友可以了解下啊,或許本文對你學(xué)習(xí)動畫有所幫助
    2013-01-30
  • HTML5之SVG 2D入門5—顏色的表示及定義方式

    SVG和canvas中是一樣的,都是使用標(biāo)準(zhǔn)的HTML/CSS中的顏色表示方法,這些顏色都可以用于fill和stroke屬性,接下來介紹下顏色的表示及定義方式感興趣的朋友可以了解下,或許對
    2013-01-30
  • HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹

    由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本質(zhì)上是xml文檔,所以也有一種特殊的DOM操作,大多稱之為SVG DOM,本文將詳細(xì)介紹下SVG中的DOM操作,感興趣的朋友
    2013-01-30
  • HTML5之SVG 2D入門6—視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述

    SVG存在兩套坐標(biāo)系統(tǒng):視窗坐標(biāo)系與用戶坐標(biāo)系。默認(rèn)情況下,用戶坐標(biāo)系與視窗坐標(biāo)系的點是一一對應(yīng)的,記下來介紹下坐標(biāo)與變換,感興趣的朋友可以了解下啊,或許對你有所幫
    2013-01-30
  • HTML5之SVG 2D入門13—svg對決canvas及長處和適用場景分析

    到目前為止,SVG與Canvas的主要特性均已經(jīng)總結(jié)完畢了,現(xiàn)在,我們就來比對一下這兩種技術(shù),分析一下它們的長處和適用場景,感興趣的朋友可以了解下哦,或許對你有所幫助
    2013-01-30
  • HTML5之SVG 2D入門3—文本與圖像及渲染文本介紹

    SVG的強大能力之一是它可以將文本控制到標(biāo)準(zhǔn)HTML頁面不可能有的程度,而無須求助圖像或其它插件,盡管SVG的文本渲染如此強大,但是還是有一個不足之處:SVG不能執(zhí)行自動換行
    2013-01-30
  • HTML5之SVG 2D入門9—蒙板及mask元素介紹與應(yīng)用

    SVG支持多種蒙板特效,使用這些特性,我們可以做出很多很炫的效果,喜歡特效的朋友可不要錯過哦。至于中文中把mask叫做"蒙板"還是"遮罩"就不去區(qū)分了,這里都叫做蒙板吧,希
    2013-01-30
  • HTML5之SVG 2D入門10—濾鏡的定義及使用

    濾鏡稱得上是SVG最強大的功能了,它允許你給圖形(圖形元素和容器元素)添加各種專業(yè)軟件中才有的濾鏡特效,喜歡特效的朋友可千萬不要錯過啊。希望本對你有所幫助
    2013-01-30

最新評論