project - SVG (資料結構部份)

SVG資料結構

 

<symbol>              <g>                <desc>         

<title>            <image>               <defs>

<svg>元素

<svg>元素用來產生一塊畫布,讓SVG圖形元素能被描繪在上面,它是SVG文件的根元素,<svg>~</svg>元素之間所包含的SVG被稱為SVG文件;在資源情況下,可以被嵌入行內作為XML父文件的裡的一個片段。SVG文件必須遵照在XML的名稱空間推薦,宣告名稱空間以便所有SVG元素能被辨認屬於這個SVG名稱空間。

<title><desc>元素

用來描述文字字串,常與群組結構元素或圖形元素連用以提供相關資訊。<desc><title>元素的內容不會被顯示畫布上,相當於是註解功能。

<g>元素

 

是一種用來群組相關圖形元素在一起的容器元素,群組元素被視為單獨物件,可以使用屬性id為群組命名以便做為動畫及再使用物件。

部份文件:

<desc>圓群組</desc>

<g id="g1"  fill="green" fill-opacity="0.5">   

<circle cx="60" cy="60" r="40" />

<circle cx="120" cy="60" r="40"  fill="red" />

<circle cx="90" cy="110" r="40"  fill="blue" />

</g>

 

<g>元素簡言之,其實就相當於今日大家所使用的msn的群組功能,而<g>元素可以將相似的圖形都歸類在一起,屬性id也相當於是群組的名稱,以便日後要再被使用時可以被呼叫。如上例,就有三個子元素的circle構成的一個群組,而此群組的名稱就稱為g1

 

<symbol>元素

主要用途是為相同文件裡,多次使用的圖形模版畫以增加文件結構性。

 

 

以右圖的箭頭為例:                                

<svg >                                                                                                         

<desc>定義箭頭符號</desc>

<symbol id="arrow" >

<path  d="M10 50 v -20 h50 v-25 l 40 45 M10 50 v 20 h50 v 25 l 40 -45 " />

</symbol>

<desc>symbol的使用方法</desc>

<use x="0" y="20"  xlink:href="#arrow"  fill="green"  stroke="red" fill-opacity="0.1"/>

</svg>

 

補充一下說明此箭頭的形成:參照上面範例的pathM是ㄧ個起點,1050這兩組數字分別代表XY的位置,而圖形從此這做起。接著v但表垂直,-20是相對於M的位置而言,所以要往下20,接著h50是水平線往右移動50,再來v-25又是往下25,接著|40 45,是畫斜的連接到(40,45)的位置,這樣就完成了一半,另外一半對稱圖形也是ㄧ此類推即可完成。

 

補充說明:

<symbol>元素與<g>元素的差別是:
<symbol>元素本身不被顯示,只有<symbol>元素的例證才會被顯示。

<symbol>元素的有viewBoxpreserveAspectRatio屬性允許
<symbol>做適合縮放以符合由<use>元素定義長方形的觀測阜。

<defs>元素

<defs>元素的內容模式和<g>元素一樣,因此,任何使用在<g>元素容器裡的子元素,同樣的也可以使用在<defs>元素裡,反之亦然,<defs>元素的內容不會直接被顯示。而<defs>元素是針對被參考元素的容器元素,為了文件的可讀性及可存取性而設置的,SVG規範建議盡可能將被參考的元素定義在<defs>元素中。

<desc>定義參考字串及文字路徑</desc>

<defs>

<text id="refText"> SVG </text>

<path id="pathText" d="M40 100 a 50 50 0 0 1 100 0 m 0 0 a 50 50 0 0 1 -100 0 "  />

</defs>

<text fill="green" font-size="20" letter-spacing="4">

<textPath xlink:href="#pathText">text reference to a path</textPath>

</text>

 

<image>元素

 

可以將一個完整個檔案內容顯示在當前使用者座標系統所指定的長方形<image>元素能參考光柵圖形影像檔案,像是PNGJPEGMIME格式的檔案。

<image x="40" y="40" width="100px" height="100px" xlink:href="./graphics/123123.gif" />

參考資料:

n      書籍:SVG程式設計實務

回應

可以設計簡易的小圖示加入XML文件內

把網頁點綴得更具美觀!