path-路徑
上面的基本形狀其實(shí)都屬于路徑的一個(gè)延伸，都是基于 path 實(shí)現(xiàn)的。
path 有很多的語法屬性，可以自定義實(shí)現(xiàn)復(fù)雜的形狀。
其中坐標(biāo)點(diǎn)有多種寫法，且繪制屬性不區(qū)分大小寫。

逗號(hào)分割坐標(biāo)點(diǎn)：x1 y1 , x2 y2
無逗號(hào)：x1 y1 x2 y2
逗號(hào)分隔 x y ：x1,y1 x2,y2

M/m
語法：M x y | m x y | m x,y
描述：定義起始點(diǎn)，沒什么效果
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 10 10"/>
</svg>

L/l
語法：L x y
描述：畫線段，移動(dòng)到某一坐標(biāo)，可以使用 m 重新定義起點(diǎn)
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 10 10 L 10 50 L 50 50 L 100 80 M 100 100 L 180 50" stroke="#000" fill="none"/>
</svg>

H/h
語法：H x
描述：畫一條橫線
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 50 50 H 150" stroke="#000" fill="none"/>
</svg>

V/v
語法：V y
描述：畫一條豎線
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 100 10 v 120" stroke="#000" fill="none"/>
</svg>

Z/z
語法：Z
描述：標(biāo)示結(jié)束，并且和開始的點(diǎn)連起來
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="m 10 10 h 10 v 10 l 50 0 v 50 z" stroke="#000" fill="orange" stroke-width="3"/>
</svg>

命令	名稱	參數(shù)
M	moveto ?移動(dòng)到	(x y)+
Z	closepath ?關(guān)閉路徑	(none)
L	lineto ?畫線到	(x y)+
H	horizontal lineto ?水平線到	x+
V	vertical lineto ?垂直線到	y+
C	curveto ?三次貝塞爾曲線到	(x1 y1 x2 y2 x y)+
S	smooth curveto ?光滑三次貝塞爾曲線到	(x2 y2 x y)+
Q	quadratic Bézier curveto ?二次貝塞爾曲線到	(x1 y1 x y)+
T	smooth quadratic Bézier curveto ?光滑二次貝塞爾曲線到	(x y)+
A	elliptical arc ?橢圓弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	Catmull-Rom curveto* ?Catmull-Rom曲線	x1 y1 (x y)+

SVG中的路徑數(shù)據(jù)，即path元素的 d 屬性，有一系列的路徑繪制指令，其中橢圓弧指令(A)最復(fù)雜，不算橢圓弧起始點(diǎn)的x,y坐標(biāo)的話，依然有7個(gè)參數(shù)。

SVG橢圓弧指令的參數(shù)，與Canvas等圓弧指令的參數(shù)有很大差別，Canvas中使用圓心、半徑、起始角度、結(jié)束角度等為參數(shù)，而SVG使用起始點(diǎn)坐標(biāo)、半徑、方向、結(jié)束點(diǎn)坐標(biāo)等為參數(shù)。

SVG之所以實(shí)現(xiàn)為這樣的參數(shù)形式，是因?yàn)镾VG中的路徑包含的每段子路徑具有依次首尾相連的特性，這樣每一段路徑繪制的起點(diǎn)終點(diǎn)就比較明確直觀。

SVG橢圓弧路徑指令說明：

指令 A (絕對) a (相對)
名稱 elliptical arc 橢圓弧
參數(shù)
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

rx ry 是橢圓的兩個(gè)半軸的長度。

x-axis-rotation 是橢圓相對于坐標(biāo)系的旋轉(zhuǎn)角度，角度數(shù)而非弧度數(shù)。

large-arc-flag 是標(biāo)記繪制大弧(1)還是小弧(0)部分。

sweep-flag 是標(biāo)記向順時(shí)針(1)還是逆時(shí)針(0)方向繪制。

x y 是圓弧終點(diǎn)的坐標(biāo)。

描述 從當(dāng)前點(diǎn)繪制一段橢圓弧到點(diǎn) (x, y)，橢圓的大小和方向由 (rx, ry) 和 x-axis-rotation 參數(shù)決定，x-axis-rotation 參數(shù)表示橢圓整體相對于當(dāng)前坐標(biāo)系統(tǒng)的旋轉(zhuǎn)角度。橢圓的中心坐標(biāo)(cx, cy) 會(huì)自動(dòng)進(jìn)行計(jì)算從而滿足其它參數(shù)約束。large-arc-flag 和 sweep-flag 也被用于圓弧的計(jì)算與繪制。
實(shí)例：

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />

<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
————————————————

總結(jié)

以上是生活随笔為你收集整理的svg基础标签说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。