HTML學習筆記 五 SVG

2022-07-19 05:30:13 字數 1407 閱讀 4291

在容器中,預定義有一些圖形標籤,方便開發者用於繪製圖形

(0)通用屬性

這些圖形標籤有一些通用的屬性,用於控制圖形的樣式

(1)矩形

使用標籤可以繪製矩形,該標籤常用的屬性如下:

(2)圓形

使用標籤可以繪製圓形,該標籤常用的屬性如下:

(3)橢圓

使用標籤可以繪製橢圓,該標籤常用的屬性如下:

(4)線段

使用標籤可以繪製線段,該標籤常用的屬性如下:

(5)折線

折線其實就是由一條條線段連線而成,使用標籤可以繪製折線,常用的屬性如下:

(6)多邊形

多邊形和折線類似,區別在於多邊形最後會自動閉合,使用標籤可以繪製多邊形,常用的屬性如下:

(7)路徑

路徑可以用於繪製任何圖形,使用標籤可以繪製路徑,它通過屬性d定義繪製的順序

實際上它的值表示一組繪製命令,通過簡寫的字母表示動作,後面跟著必要的引數,常見的命令如下:

只移動不繪製

繪製直線

繪製曲線

(8)文字

使用標籤可以繪製文字,該標籤常用的屬性如下:

除了圖形標籤,在容器中還能使用一些功能標籤實現特定功能

(1)展示

使用標籤可以複製並展示乙個圖形,常用的屬性如下:

(2)組合

使用標籤可以將多個圖形組合在一起

(3)定義

使用標籤可以自定義乙個圖形,這個圖形不會被顯示,但能被引用

(4)模式

使用標籤可以自定義乙個圖形,這個圖形不會被顯示,但能被引用填充乙個區域,常用的屬性如下:

(5)

(6)動畫

使用標籤可以產生動畫,常用的屬性如下:

【 閱讀更多 html 系列文章,請看 html學習筆記 】

SVG學習筆記(1)

以前聽過svg,那麼svg到底是什麼呢?跟著慕客老師一起來學習吧。1.svg是使用xml描述的向量檔案。2.點陣圖和向量圖的定義 點陣圖是基於顏色的描述,也就是每乙個顏色畫素點的組合。而向量圖呢,則是基於數學的描述,比如說一條曲線,還有svg ai等都是向量圖。3.svg的4種使用方式 瀏覽器直接開...

HTML5中的SVG學習

什麼是svg?svg 的優勢 與其他影象格式相比 比如 jpeg 和 gif 使用 svg 的優勢在於 瀏覽器支援 internet explorer 9 firefox opera chrome 以及 safari 支援內聯 svg。把 svg 直接嵌入 html 頁面 在 html5 中,您能夠...

HTML學習筆記 表單設計(五)

定義表單的開始位置和結束位置,表單提交時的內容就是表單中的內容。基本格式 常用屬性 name 表單名稱 method 傳輸資料的方式,分別為post和get兩種 預設為get方式 get 表單內容附加在url位址後面,限制長度8192不具備保密性。post 將表單中的資料報含在表單主體中,無大小限制...