SVG簡易入門(極簡)

2021-10-05 21:26:26 字數 4085 閱讀 7194

圖形的style設定

其他常用標籤

標籤相當於螢幕的視窗(也就是視口),所有的圖形都繪製在這個視口上,可以在svg標籤內通過widthheight為它設定大小,例:

width

="200px"

height

="200px"

>

這裡的視口是寬高均為200px的正方形,寬高的長度也可以不使用px,而是使用相對大小:

width

="200"

height

="200"

>

這樣它的寬高實際上螢幕大小單位,例如px

svg標籤內含有乙個屬性viewboxviewbox屬性定義了視口上可以顯示的區域:

width

="200"

height

="200"

viewbox

="0 0 50 50"

>

上述**表示viewbox從(0,0)點開始,100寬100高的區域。這個100100的區域,會放到200*200的畫布上顯示。於是就形成了放大兩倍的效果。(也就是說第乙個、第二個引數是起點的座標,第

三、第四個引數是終點的座標,切記y軸是從上往下的)。

標籤用於繪製線段:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

"50"

y1="0" x2

="40"

y2="10"

/>

svg>

標籤內有四個屬性,x1y1用來表示線段起點的座標,x2y2用來表示線段終點的座標。

用來繪製折線:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

points

="45,0 50,0 50,15 40,15 45,0"

/>

svg>

標籤內含有points屬性,用來表示折線的每個端點的座標,端點橫座標與縱座標用,隔開,而每個端點的座標用空格隔開。

要注意的是標籤在繪製折線時,在預設情況下繪製的是乙個閉合的圖形,即第乙個座標會與最後乙個座標有條連線,被折線包裹的區域會被上色為預設顏色。

用來繪製矩形:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

"10" y=

"10"

width

="10"

height

="10"

/>

svg>

屬性xy用來表示矩形左上角端點的座標,widthheight用來控制寬度與長度。

標籤用來繪製多邊形:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

points

="0,0 10,0 20,5 5,5"

/>

svg>

與「折線」相同,points屬性用來確定多邊形每個端點的座標。

標籤用來繪製圓形:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

"20"

cy="30" r=

"5"/>

svg>

標籤有三個基本屬性,cxcy用來表示圓心的座標,r用來表示圓的半徑。

標籤用來繪製橢圓:

width

="200"

height

="100"

viewbox

="0 0 200 50"

>

"40"

cy="30"

rx="10"

ry="5"/>

svg>

標籤的cxcy表示橢圓的中心座標,rxry分別橫軸的半長與縱軸的半長。

可以在css中設定圖形的style

stroke

:"black"

;stroke-width

: 1;

stroke類似於普通css容器中的border屬性,可以設定圖形邊框的顏色,如果是「線」或「折線」即表示線段的顏色。

stroke-width能設定圖形邊框或者線段的寬度。

fill

:red;

fill

: transparent;

fill用來設定圖形的填充色,如果設定成transparent則表示填充成透明色。

表示文字,生成的類似於我們使用adobe illustrator建立文字後儲存的向量圖,可以用改標籤包裹文字:

"50" y=

"25"

>

hello worldtext

>

xy表示文字區塊的基線的起點文字的,文字樣式可以在css中設定。

表示組,用它來包裹其他圖形標籤能通過控制來統一控制被包裹圖形的位置資訊等。

也是來繪製線條的,但與不同,它繪製的線條始終是光滑的(還能繪製曲線,這裡不進行贅述)。

有以下幾個命令:

move命令

move命令即m x ymove命令將畫筆移動到座標為(x,y)的點上。

l命令l命令即l x y,例:

"m10 10 l 5 30"

stroke

="red"

>

path

>

上例中畫筆從座標(10,10)到(5,30)畫了一條紅線。

h命令與v命令

h x (or h dx)

v y (or v dy)

這兩個命令分別繪製垂直線與水平線。

Docker極簡入門

我有幾張阿里雲幸運券分享給你,用券購買或者公升級阿里雲相應產品會有特惠驚喜哦!把想要買的產品的幸運券都領走吧!快下手,馬上就要搶光了。root chatdevops yum y install docker root chatdevops docker version docker version ...

django極簡入門

django極簡入門 i.安裝python環境 ii.安裝django pip install djangoiii.建立django專案資料夾 django admin startproject myprojectiv.在專案資料夾內,如myproject myproject,建立視 件,如view...

Shell極簡入門

簡單shell案例 使用vim建立乙個檔案hello.sh 首行新增宣告,使用的是 bin目錄下的bash直譯器,因為linux有很多的直譯器 bin bash 然後新增上一句 echo hello 按 輸入wq 儲存退出 為檔案新增可執行許可權 控制台輸入以下內容 chmod x hello.sh...