HTML5之SVG 2D入門8―文檔結構及相關元素總結

2024-09-05 07:20:09

字體：大中小

來源：轉載

供稿：網(wǎng)友

前面介紹了很多的基本元素，包括結構相關的組合和重用元素，這里先對SVG的文檔結構中剩下的相關元素簡單總結一下，然后繼續(xù)向前領略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在有些實現(xiàn)中是作為提示信息出現(xiàn)的，所以通常title是放到父元素的第一個位置上。
典型的用法如下：

復制代碼

上一篇：HTML5之SVG 2D入門7―SVG元素的重用與引用

下一篇：HTML5之SVG 2D入門9―蒙板及mask元素介紹與應用