HTML5中SVG元素是怎么重用與引用的-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)HTML5中SVG元素是怎么重用與引用的，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的武強(qiáng)網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

前面介紹了很多的圖形元素，如果很多圖形本身是一樣的，需要每次都去定義一個(gè)新的么？我們能否共用一些圖形呢？這是這節(jié)的重點(diǎn)-SVG元素的重用。

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

代碼如下:

<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>

<rectx=".01cm"y=".01cm"width="4.98cm"height="4.98cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

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

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

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

代碼如下:

<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">

<rectx=".02cm"y=".02cm"width="4.96cm"height="4.96cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

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

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

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

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

代碼如下:

<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元素鏈接到文檔。例如：

代碼如下:

<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ù)查看器沒有它也將正確顯示這一項(xiàng)，但為了保持一致，xlink名稱空間應(yīng)該在<svg></svg>元素上定義。

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

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

從視覺效果來看，use元素更像是占位符，渲染完成后的視覺效果就和直接用被引用對象渲染是一樣的：
1.use元素引用一個(gè)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元素，這個(gè)svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則是100%)；
(5)把引用的symbol元素的圖形內(nèi)容深拷貝到替換的svg中。
2.use元素引用一個(gè)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)容拷貝過來，這個(gè)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)把引用元素拷貝過來；
看下面例子的視覺效果：

代碼如下:

<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>

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

代碼如下:

<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>

以上就是HTML5中SVG元素是怎么重用與引用的，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：HTML5中SVG元素是怎么重用與引用的-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://muchs.cn/article30/ddhcpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)、建站公司、定制開發(fā)、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容