SVG中常用基本形狀教程

2021-08-27 09:17:50 字數 2086 閱讀 9089

svg的基礎形狀矩形(rect)、圓(circle)、橢圓(ellipse)、線段(line)、折線(polyline)和多邊形(polygon),本文介紹了svg中這些常用基本形狀的語法及教程。

一、矩形

矩形標記允許你建立矩形或它的變體,比如正方形,圓角矩形等。語法如下:

x屬性定義了矩形左上角頂點在使用者座標系x軸上的座標,預設值為 0;

y屬性定義了矩形左上角頂點在使用者座標系 y軸上的座標,預設值為 0;

width和 height屬性定義了矩形的寬度和高度,其中任意乙個值為 0,矩形都不顯示style屬性允許我們定義 svg推薦標準支援的 css樣式屬性。

fill 屬性定義了長方形的填充顏色,這裡採用的是 rgb 的格式,svg 也支援顏色名和 16進製制的顏色格式,比如:fill:red或 fill:#ff0000。

比如將填充紅色,可以用fill=」red」 或用 fill=」rgb(255,0,0)」 亦或用 fill=」#ff0000」。

stroke屬性定義邊框線,svg中,如果不定義,邊框線沒有任何寬度,換句話說,svg預設邊框線寬度為 0,對所有的 svg的形狀都是這樣的。

如果需要定義邊框線的話,採用這樣的確語法格式:stroke:rgb(0,0,128)定義顏色,stroke-width:1定義寬度

我門還可以改變填充顏色的透明度,可以這樣寫:fill-opacity: 0.1,透明度範圍是從 0到 1

也可以定義整個元素的透明度,opacity:0.5,該透明度對填充和邊框線都有效

也可以單獨定義邊框線的透明度:stroke-opacity:0.8

定義圓角矩形,使用 rx,ry屬性定義圓角的半徑。

rx定義圓角矩形的橢圓角在x方向的半軸長度。如果rx的值大於矩形寬度的一半,則取值矩形寬度的一半。

ry定義圓角矩形的橢圓角在y方向的半軸長度。如果ry的值大於矩形高度的一半,則取值矩形高度的一半。

圓要定義乙個圓,只需要指頂圓心的座標、半徑即可,也可使用樣式單屬性定義外觀的樣式,語法如下:

circle cx="143" cy="163" r="84" style="fill:rgb(192,192,255); stroke:rgb(0,0,128); stroke-width:1"/>

其屬性定義如下:

cx:是圓心在使用者座標系中的x座標值,預設值為0.

cy:是圓心在使用者座標系中的y座標值,預設值為0.

r:是圓的半徑,不允許為負數。如果是0,則圓形不顯示。

橢圓定義橢圓和定義圓很相象,指定圓心,x,y軸的半徑即可。語法如下:

其常用屬性定義如下:

cx:是橢圓中心在使用者座標系中的x座標值,預設值為0。

cy:是橢圓中心在使用者座標系中的y座標值,預設值為0。

rx:是x方向上橢圓的半軸長,不允許為負數。如果是0,則橢圓不顯示。

ry:是y方向上橢圓的半軸長,不允許為負數。如果是0,則橢圓不顯示。

線段通過指定開始點 (x1,y1)、結束點(x2,y2)和寬度 stroke定義一條直線。如:

要想得到很細的線,可以指定 stroke-width為大於 0小於 1的數值。

其常用屬性定義如下:

x1:是線段起點的x座標值,預設值為0。

yl:是線段起點的y座標值,預設值為0。

x2:是線段終點的x座標值,預設值為0。

y2:是線段終點的y座標值,預設值為0。

折線這個標記通過指定各個點的座標,來定義一條折線,格式如下:

其主要屬性為points:

points:表示折線各頂點座標的乙個列表,頂點座標的格式為」x,y,其中x表示頂點的橫座標、x表示頂點的縱座標,不同頂點座標之間用空格分開。繪圖程式將按照points中的頂點依次繪製圖形。

多邊形這個標記用來指定連續的點的座標來,定義多邊形。語法如下:

其主要屬性為points

points:points的取值與折線的points一樣,但是在繪製多邊形的時候,繪圖程式不但按照points中的頂點依次繪製圖形,而且還將最後乙個頂點與第乙個頂點連線起來構成乙個封閉圖形。

注:在 svg中,允許使用浮點數來達到精確控制。

基本形狀 基本 SVG 文件 2

定義和組 如前一頁中定義的多邊形和漸變,預定義項的實際用法通常有兩種形式。在這兩種形式下,定義的項都通過其本地 url 或 uri 引用。象 html 頁面一樣,id 屬性建立了文件中的乙個引用點。舉例說來,這意味著 uri irisgradient 引用標識為 irisgradient 的文件部分...

vim中常用基本命令

一般模式可用命令,含游標移動 複製貼上 查詢替換等功能 ctrl f 螢幕向下移動一頁,相當page down按鈕 ctrl b 螢幕向上移動一頁,相當page up按鈕 0或home鍵 移動到行首 或end 移動到行尾 ng 移動到當前檔案第n行,省略n則移動到最後一行 gg或1g 移動到當前檔案...

Linux中常用的基本操作命令

常用指令 ls 顯示檔案或目錄 l 列出檔案詳細資訊l list a 列出當前目錄下所有檔案及目錄,包括隱藏的a all mkdir 建立目錄 p 建立目錄,若無父目錄,則建立p parent cd 切換目錄 touch 建立空檔案 echo 建立帶有內容的檔案。cat 檢視檔案內容 cp 拷貝 m...