DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5之SVG 2D入門8—文檔結構及相關元素總結
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是放到父元素的第一個位置上。 
典型的用法如下: 

復制代碼代碼如下:www.mb5u.com
<svgXMLns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in"> 
<g> 
<title>Companysalesbyregion</title> 
<desc> 
Thisisabarchartwhichshows 
companysalesbyregion. 
</desc> 
<!--Barchartdefinedasvectordata--> 
</g> 
</svg> 

通常,最外層的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)就可以了。看個例子: 

復制代碼代碼如下:www.mb5u.com
<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> 

下面詳細看看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例子: 

復制代碼代碼如下:www.mb5u.com
<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> 

再看腳本的例子: 

復制代碼代碼如下:www.mb5u.com
<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元素 
條件處理屬性是能控制所在元素渲染與否的屬性。基本上大多數的元素(特別是圖形元素)都可以指定條件處理屬性。條件處理屬性有3個:requiredFeatures,requiredExtensions和systemLanguage。這些屬性就是一組測試,都允許指定一個值列表(前面兩個屬性是空格隔開的,語言這個屬性是使用逗號隔開的),默認值都為true。 

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

注意:子元素的display和visibility屬性值並不影響switch元素條件判斷的結果。 
條件處理屬性的取值列表參看官方文檔,這裡就看一個小例子: 

復制代碼代碼如下:www.mb5u.com
<switch> 
<rectrequiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter" 
x="10"y="10"width="322"height="502"opacity="0.6" 
fill="black"stroke="none"filter="url(#gblurshadow)"/> 
<rectx="10"y="10"width="322"height="502"opacity="0.6" 
fill="black"stroke="none"/> 
</switch> 

這個例子的意思簡單的說就是:使用的浏覽器支持filter特性,那麼就繪制上面的矩形(帶filter屬性),如果不支持filter特性,就繪制下面的矩形。 
其實更多的時候,用的比較多的屬性是systemLanguage,就是文本的多語言處理能力。例如: 

復制代碼代碼如下:www.mb5u.com
<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> 

實用參考
腳本索引: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/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved