SVG格式化 PATH 說明

2021-10-17 11:25:07 字數 2153 閱讀 4524

用於定義乙個向量形狀。字串中包含的關鍵命令不外乎:

下面的命令中,大寫說明後面的數值是絕對位置(position),小寫表示後面的數值是相對於當前的位置(shift/offset).

-

-moveto: 想象【哆啦a夢】,開啟【任意門】瞬移到某個位置,因此軌跡是不連續的

--格式: `m x y` 或者 `m dx dy`

-

-lineto: 想象【彩虹馬】,拖著軌跡走直線

--格式: `l x y` 或者 `l dx dy`

-

- horizontally moveto: 後面不管跟著多少個數值,都將其作為橫軸上的(沿直線)移動

-- 格式: `h x1 x2 .

.. x_n` 或者 `h dx1 dx2 .

.. dx_n`

-- 等價於: `l x1 0 l x2 0..

. l x_n 0` 或者 `l dx1 0 l dx2 0..

. l dx_n 0`

-

- vertically moveto: 後面不管跟著多少個數值,都將其作為縱軸上的(沿直線)移動

-- 格式: `v y1 y2 .

.. y_n` 或者 `v dy1 dy2 .

.. dy_n`

-- 等價於: `l 0 y1 l 0 y2 .

.. l 0 y_n` 或者 `l 0 dy1 l 0 dy2 .

.. l 0 dy_n`

-

- 三次貝塞爾曲線

-- 需要4個點確定一段曲線,除卻起點 `x0 y0` 外,還需要標誌點1、標誌點2、終點

-- 格式:`cx1 y1 x2 y2 x3 y3` 或者 `c(x1-x0)

(y1-y0)

(x2-x0)

(y2-y0)

(x3-x0)

(y3-y0)`

下圖所示的兩個例子:左子圖是基於絕對座標表示的,右子圖是基於相對座標表示的。其中,為了簡便表示:1️⃣ 數字與字母之間無空格;2️⃣ 數字之間用逗號隔開;3️⃣ 當第二個數是負數時,逗號省略。如m320,160c100,-150,200,-150,300,0=m320,160c100-150,200-150,300,0

-- quadratic bézier curve 二次 b-樣條曲線

-- 說明我們需要 3 個點,包括當前所在的位置點,還需要兩個,因此,其

-- 格式: `q x1 y1 x2 y2` 或者 `q dx1 dy1 dx2 dy2`

-- 其中,

dx1 = x1-x0, dx2 = x2-x0

dy1 = y1-y0, dy2 = y2-y0

-- 乙個例子如下圖:

doctype

html

>

>

>

-

- 橢圓曲線

-- 引數:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

-- 具體引數表示意義見下頁 ppt

-- p.s. f12 開啟開發者模式調整資料觀察圖形變化便於理解!!

-

- close path

-- 從最後的乙個點直接**沿直線** 回到最近的乙個 `m/m` 的位置,構成閉合圖行,因此不需要自定任何點的座標或者偏移

-- 格式:

"*** z" 或者 "*** z"

???,?!

參考:1️⃣ svg path命令屬性??

2️⃣ svgwg.org path

日期格式化說明

d 月中的某一天。一位數的日期沒有前導零。dd 月中的某一天。一位數的日期有乙個前導零。ddd 週中某天的縮寫名稱,在 abbreviateddaynames 中定義。dddd 週中某天的完整名稱,在 daynames 中定義。m 月份數字。一位數的月份沒有前導零。mm 月份數字。一位數的月份有乙個...

IOS 時間格式 格式化說明

swiftui 字串關於時間的格式佔位符說明 static func formatfixed date date,format string,locale locale locale.autoupdatingcurrent string d 將日顯示為不帶前導零的數字 如 1 如果這是使用者定義的數...

mysql format時間格式化說明

mysql format時間格式化說明 date format datetime,formatting 可以格式日期和時間 例如 yyyy mm dd hh mm ss 和 hh mm ss time format datetime,formatting 只可以格式時間 hh mm ss 例如dat...