主頁(yè) > 知識(shí)庫(kù) > HTML5之SVG 2D入門(mén)8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)

HTML5之SVG 2D入門(mén)8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)

前面介紹了很多的基本元素，包括結(jié)構(gòu)相關(guān)的組合和重用元素，這里先對(duì)SVG的文檔結(jié)構(gòu)中剩下的相關(guān)元素簡(jiǎn)單總結(jié)一下，然后繼續(xù)向前領(lǐng)略SVG的其他特性。
SVG文檔的元素基本可以分為以下幾類(lèi)：
•動(dòng)畫(huà)元素：animate,animateColor,animateMotion,animateTransform,set；
•解釋元素：desc,metadata,title；
•圖形元素：circle,ellipse,line,path,polygon,polyline,rect；
•結(jié)構(gòu)元素：defs,g,svg,symbol,use；
•漸變?cè)兀簂inearGradient,radialGradient；
•其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中圖形元素，漸變?cè)兀谋?，圖像元素和組合等都介紹過(guò)了，下面介紹另外幾個(gè)與結(jié)構(gòu)相關(guān)的元素。

視窗-svg元素
可以在svg元素中以任何順序放置任何的其他元素，包括嵌套svg元素。
svg元素支持的屬性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相關(guān)屬性。
svg元素支持的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。svg元素就不多說(shuō)了，完整的屬性和事件列表參看后面的官方文檔。

解釋性元素-desc元素與title元素
每個(gè)容器元素(可以包含其他容器元素或者圖形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和圖形元素都可以包含desc和title元素，這兩個(gè)元素都是輔助性的元素，用于解釋相關(guān)情境；它們的內(nèi)容都是文本。當(dāng)SVG文檔被渲染的時(shí)候，這2個(gè)元素不會(huì)被渲染到圖形中。這個(gè)2個(gè)元素之間差別不是太大，title在有些實(shí)現(xiàn)中是作為提示信息出現(xiàn)的，所以通常title是放到父元素的第一個(gè)位置上。
典型的用法如下：

復(fù)制代碼

代碼如下:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">
<g>
<title>Companysalesbyregion</title>
<desc>
Thisisabarchartwhichshows
companysalesbyregion.
</desc>

</g>
</svg>

通常，最外層的svg元素要配以title說(shuō)明，這樣程序可讀性更好。

標(biāo)記-marker元素
標(biāo)記定義了附加到一個(gè)或者多個(gè)頂點(diǎn)(path,line,polyline或者polygon的頂點(diǎn))上的圖形元素(箭頭和多點(diǎn)標(biāo)記)。箭頭可以通過(guò)把一個(gè)標(biāo)記附加到path,line或者polyline的起點(diǎn)或者終點(diǎn)上。多點(diǎn)標(biāo)記可以把一個(gè)標(biāo)記附加到path,line,polyline或者polygon的所有頂點(diǎn)上。

標(biāo)記是由marker元素定義的，然后在path,line,polyline或者polygon中設(shè)置相關(guān)的屬性(marker,marker-start,marker-mid,和marker-end)就可以了?？磦€(gè)例子：

復(fù)制代碼

代碼如下:

<svgwidth="4in"height="2in"
viewBox="0040002000"version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<markerid="Triangle"
viewBox="001010"refX="0"refY="5"
markerUnits="strokeWidth"
markerWidth="4"markerHeight="3"
orient="auto">
<pathd="M00L105L010z"/>
</marker>
</defs>
<desc>Placinganarrowheadattheendofapath.
</desc>
<pathd="M1000750L2000750L25001250"
fill="none"stroke="black"stroke-width="100"
marker-end="url(#Triangle)"/>
</svg>

下面詳細(xì)看看marker的相關(guān)知識(shí)：
1.marker是容器元素，可以存放任意順序的圖形元素，容器元素，動(dòng)畫(huà)，漸變?cè)氐取?
2.marker元素可以創(chuàng)建新的視窗：設(shè)置viewBox的值。
3.marker比較重要的屬性：
markerUnits="strokeWidth|userSpaceOnUse"
這個(gè)屬性定義了屬性markerWidth,markerHeight和marker的內(nèi)容使用的坐標(biāo)系統(tǒng)。這個(gè)屬性有2個(gè)值可選，第一個(gè)值strokeWidth是默認(rèn)值，代表屬性markerWidth,markerHeight和marker的內(nèi)容使用的坐標(biāo)系統(tǒng)的單位等于引用該marker的圖形元素的stroke-width設(shè)置的值。

例如上面的例子中，marker元素的width是400,height是300，不過(guò)千萬(wàn)不要混淆了，mark元素中的path使用的坐標(biāo)是viewBox設(shè)置的新的用戶坐標(biāo)系。
該屬性另外一個(gè)取值userSpaceOnUse，代表屬性markerWidth,markerHeight和marker的內(nèi)容使用引用該marker的圖形元素的坐標(biāo)系統(tǒng)。
refX,refY：定義了引用的點(diǎn)與marker對(duì)齊的位置坐標(biāo)。例如上面的例子中，引用的點(diǎn)是終點(diǎn)，要把它對(duì)齊到marker的(0,5)位置。注意refX,refY使用的是經(jīng)過(guò)viewBox變換過(guò)的最終用戶坐標(biāo)系。
markerWidth,markerHeight：marker視窗的寬和高，這個(gè)很好理解。
orient：定義了marker旋轉(zhuǎn)的角度。可以指定一個(gè)角度或者直接賦值auto。
auto代表x軸正方向按照下列規(guī)則旋轉(zhuǎn)：
a.如果marker所在的點(diǎn)只屬于一個(gè)path，則marker的x軸正向與path走向相同。參看上面例子。
b.如果marker所在的點(diǎn)屬于兩個(gè)不同的path，則marker的x軸正向與兩個(gè)path的夾角的角等分線走向一致。
4.圖形元素的marker屬性

圖形元素要引用一個(gè)marker則需要使用相關(guān)的屬性，主要是這3個(gè)：marker-start(把引用的marker放到起點(diǎn)),marker-mid(把引用的marker放到除起點(diǎn)和終點(diǎn)外的所有點(diǎn)),marker-end(把引用的marker放到終點(diǎn))。這3個(gè)屬性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(這個(gè)不用多說(shuō)了)。
從上面的例子中也可以看到marker的用法。

腳本與樣式-script元素與style元素
實(shí)際上，基本上所有的屬性(對(duì)于所有元素，不僅是文本)都可以用CSS與一個(gè)元素關(guān)聯(lián)，并且所有CSS屬性都在SVG圖像中可用。可以直接用樣式屬性設(shè)計(jì)元素的樣式，或者引用樣式表設(shè)計(jì)元素的樣式。對(duì)XML文件來(lái)說(shuō)不應(yīng)該解析樣式表(因?yàn)樗鼈兣紶柊瑫?huì)引起問(wèn)題的字符)，因此需要將它們置于XMLCDATA節(jié)。腳本也是同樣的道理，需要放到XMLCDATA節(jié)中。看下面的CSS例子：

復(fù)制代碼

代碼如下:

<svgwidth="400"height="200"xmlns="http://www.w3.org/2000/svg">
<desc>Text</desc><defs>
<styletype="text/css">
<![CDATA[
.abbreviation{text-decoration:underline;}
]]>
</style>
</defs>
<g>
<textx="20"y="50"font-size="30">Colorscanbespecified</text>
<textx="20"y="100"font-size="30">bytheir
<tspanfill="rgb(255,0,0)"class="abbreviation">R</tspan>
<tspanfill="rgb(0,255,0)"class="abbreviation">G</tspan>
<tspanfill="rgb(0,0,255)"class="abbreviation">B</tspan>values</text>
<textx="20"y="150"font-size="30">orbykeywordssuchas</text>
<textx="20"y="200">
<tspanstyle="fill:lightsteelblue;font-size:30">lightsteelblue</tspan>,
</text>
</g>
</svg>

再看腳本的例子：

復(fù)制代碼

代碼如下:

<svgwidth="500"height="300"xmlns="http://www.w3.org/2000/svg">
<desc>Scriptingtheonclickevent</desc>
<defs>
<scripttype="text/ecmascript">
<![CDATA[
functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute("fill","white");
}
]]>
</script>
<patternid="notes"x="0"y="0"width="50"height="75"
patternTransform="rotate(15)"
patternUnits="userSpaceOnUse">
<ellipsecx="10"cy="30"rx="10"ry="5"/>
<linex1="20"y1="30"x2="20"y2="0"
stroke-width="3"stroke="black"/>
<linex1="20"y1="0"x2="30"y2="5"
stroke-width="3"stroke="black"/>
</pattern>
</defs>
<ellipseonclick="hideReveal(evt)"cx="175"cy="100"rx="125"ry="60"
fill="url(#notes)"stroke="black"stroke-width="5"/>
</svg>

條件處理-switch元素
條件處理屬性是能控制所在元素渲染與否的屬性?；旧洗蠖鄶?shù)的元素(特別是圖形元素)都可以指定條件處理屬性。條件處理屬性有3個(gè)：requiredFeatures,requiredExtensions和systemLanguage。這些屬性就是一組測(cè)試，都允許指定一個(gè)值列表(前面兩個(gè)屬性是空格隔開(kāi)的，語(yǔ)言這個(gè)屬性是使用逗號(hào)隔開(kāi)的)，默認(rèn)值都為true。

SVG的switch元素提供了按指定條件渲染的能力。switch元素是一個(gè)容器元素，可以包含圖形元素，解釋性元素，動(dòng)畫(huà)元素，a,foreignObject,g,image,svg,switch,text,use等元素。switch元素會(huì)按順序檢查直接子元素的條件處理屬性，然后渲染滿足自身?xiàng)l件的的第一個(gè)子元素，其他的子元素都會(huì)被忽略。這些屬性與display屬性一樣，只會(huì)影響直接使用這些屬性的元素的渲染，不會(huì)影響引用的元素(比如use引用的元素)。簡(jiǎn)單的說(shuō)，這3個(gè)屬性會(huì)影響a,altGlyph,foreignObject,textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素，不會(huì)影響defs,cursor,mask,clipPath,pattern等元素(這些元素那么不是可渲染的，要么就是引用別的元素)。

注意：子元素的display和visibility屬性值并不影響switch元素條件判斷的結(jié)果。
條件處理屬性的取值列表參看官方文檔，這里就看一個(gè)小例子：

復(fù)制代碼

代碼如下:

這個(gè)例子的意思簡(jiǎn)單的說(shuō)就是：使用的瀏覽器支持filter特性，那么就繪制上面的矩形(帶filter屬性)，如果不支持filter特性，就繪制下面的矩形。
其實(shí)更多的時(shí)候，用的比較多的屬性是systemLanguage，就是文本的多語(yǔ)言處理能力。例如：

復(fù)制代碼

代碼如下:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="5cm"height="5cm">
<switch>
<textx='10'y='20'systemLanguage="de">de-HAHA</text>
<textx='10'y='20'systemLanguage="en">en-haha</text>
</switch>
</svg>

實(shí)用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開(kāi)發(fā)中心：https://developer.mozilla.org/en/SVG
熱門(mén)參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/

標(biāo)簽：煙臺(tái) 黃山湖北懷化賀州山南通遼湘潭

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5之SVG 2D入門(mén)8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。