HTML5之SVG 2D入門8—文件結構及相關元素總結_html5教學技巧

前面介紹了許多的基本元素，包括結構相關的組合和重用元素，這裡先對SVG的文檔結構中剩下的相關元素簡單總結一下，然後繼續向前領略SVG的其他特性。
SVG文件的元素基本上可分為以下幾類：
•動畫元素：animate,animateColor,animateMotion,animateTransform,set;
•解釋元素：desc,metadata,title;
•圖形元素：circle,ellipse,line,path,polygon,polyline,rect;
•結構元素：defs,g,svg,symbol,use；
•漸變元素：linearGradient,radialGradient；
•其他元素元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中圖形元素，漸變元素，文本，圖像元素和組合等都介紹過了，下面介紹另外幾個與結構相關的元素。

視窗-svg元素
可以在svg元素中以任何順序放置任何的其他元素，包括嵌套svg元素。
svg元素所支援的屬性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相關屬性。
svg元素支援的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。 svg元素就不多說了，完整的屬性和事件清單參考後面的官方文件。

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

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下:

Thisisabarchartwhichshows
companysalesbyregion.



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

標記-marker元素

標記定義了附加到一個或多個頂點(path,line,polyline或polygon的頂點)上的圖形元素(箭頭和多點標記)。箭頭可以透過把一個標記附加到path,line或polyline的起點或終點上。多點標記可以把一個標記附加到path,line,polyline或polygon的所有頂點。 標記是由marker元素定義的，然後在path,line,polyline或polygon中設定相關的屬性(marker,marker-start,marker-mid,和marker-end)就可以了。看範例：

複製程式碼


程式碼如下:



程式碼如下:


viewBox="0040002000"version="1.1"
xmlns="http://www.w3.org/2000/svg">

viewBox="001010"refX="0"refY="5"
markerUnits="strokeWidth"
markerWidth="4"markerHeight="3"

orient=" auto"> Placinganarrowheadattheendofapath. fill="none"stroke="black"stroke-width="100" marker-end="url(#Triangle)"/> >
以下詳細看看marker的相關知識：
1.marker是容器元素，可以存放任意順序的圖形元素，容器元素，動畫，漸變元素等。
2.marker元素可以建立新的視窗：設定viewBox的值。
3.marker比較重要的屬性：
markerUnits="strokeWidth|userSpaceOnUse"
這個屬性定義了屬性markerWidth,markerHeight和marker的內容所使用的座標系統。這個屬性有2個值可選，第一個值strokeWidth是預設值，代表屬性markerWidth,markerHeight和marker的內容所使用的座標系統的單位等於引用該marker的圖形元素的stroke-width設定的值。

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

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

腳本與樣式-script元素與style元素
實際上，基本上所有的屬性(對於所有元素，不僅是文本)都可以用CSS與一個元素關聯，且所有CSS屬性都在SVG影像中可用。可以直接用樣式屬性設計元素的樣式，或是引用樣式表設計元素的樣式。對XML檔案來說不應該解析樣式表(因為它們偶爾包含會引起問題的字元)，因此需要將它們置於XMLCDATA節。腳本也是同樣的道理，需要放到XMLCDATA節。看下面的CSS例子：

複製代碼

代碼如下:

Text

.abbreviation{text-decoration:underline;}
]]>



Colorscanbespecified
bytheir
R
G
Bvalues
orbykeywordssuchas

lightsteelblue,

再看腳本的範例：

複製程式碼

程式碼如下:

寫onclick 事件腳本
;

functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget. getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute( "fill","white");
}
]]>
腳本>
patternTransform="rotate(15)"
patternUnits="userSpaceOnUse"> ;

行程寬度="3"行程="黑色"/>
行程寬度=“3”行程=“黑色”/>
圖案>

fill =“url（#notes）”筆畫=“黑色”筆劃寬度=“5 ”/>

條件處理-switch 元素
處理屬性是能控制所在元素渲染與否的屬性。基本上大部分元素（特別是圖形元素）都可以指定條件處理屬性。條件處理屬性有3個：requiredFeatures,requiredExtensions和systemLanguage。這些屬性就是一組測試，都允許指定一個值列表(前面兩個屬性是空格隔開的，語言這個屬性是使用空格隔開

SVG的switch元素提供了按指定條件渲染的能力。 ，然後渲染滿足自身條件的第一個子元素，其他的子元素都會被忽略這些屬性和顯示屬性一樣，只是影響直接使用這些屬性的元素的渲染，不會影響引用的元素(比如使用引用的元素)。 （這些元素那麼不是可渲染的，或是引用其他元素）。 >條件處理屬性的值列表參考官方文檔，這裡就看一個小範例：



複製程式碼

程式碼如下： ; x="10"y=" 10"width="322"height="502"不透明度=“0.6”

填充=“黑色”筆畫=“無”過濾器=“url（#gblurshadow）”/>

填充=“黑色”描邊=“無”/>
開關>


這個例子的意思簡單的說就是：使用的瀏覽器支援過濾器特性，那麼就相當於上面的估計（帶過濾器屬性），如果不支援過濾器特性，就相當於下面的估計。
其實更多的時候，用的比較多的屬性是systemLanguage，就是文字的多語言處理能力。 >

代碼如下：

;
de-HAHA;

en-haha;

開關>

實用參考

：

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

開發中心：
https:// developer.mozilla.org/en/SVG

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

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