SVG/path：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
 
（未顯示同用戶所作出之54次版本）
第 1 行： 第 1 行：
−
*[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html 語法說明]
+
[[分類:SVG]]
−
*參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
+
*[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html A以外的語法說明]
 +
*[http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html A的語法說明]
 
*點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
 
*點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
 +
*參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
 
<table class=nicetable>
 
<table class=nicetable>
 
<tr>
 
<tr>
第 48 行： 第 50 行：
 
<td>A(Arc)</td>
 
<td>A(Arc)</td>
 
<td colspan=2>rx ry x-axis-rotation large-arc-flag sweep-flag x y</td>
 
<td colspan=2>rx ry x-axis-rotation large-arc-flag sweep-flag x y</td>
−
<td>從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向</td>
+
<td>從目前點的座標畫個橢圓弧到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向<br/>小寫 a 與大寫 A 的區別只在於： a 最後的 x,y 是相對於目前點的相對座標</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
第 67 行： 第 69 行：
 
</tr>
 
</tr>
 
</table>
 
</table>
 +
 +
====(一)一次圖形(相對表示)====
 +
#以 m 或 l 連續處理皆可
 +
#每一節放一個「下個點」，
 +
<img src='http://jendo.org/~thisNasAdmin/pathL.svg' width=50% height=50% />
 +
<pre style='font-size:small;'><path d='m0,51 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/></pre>
 +
 +
<pre style='font-size:small;'><path d='m0,51 l 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/></pre>
 +
 +
====(二)二次圖形(相對表示)====
 +
#以 q 或 q,t 連續處理皆可
 +
#q 每一小節放兩個點：「控制點 下個節點」，兩點同座標系，皆參考上個節點。
 +
#q,t 的 t 每一小節放一個點：「下個節點」，控制點省略，省略的控制點為上一小節控制點對上個節點的鏡像點。
 +
<img src='http://jendo.org/~thisNasAdmin/pathQ.svg' width=50% height=50% />
 +
 +
以 q 表示
 +
 +
<pre style='font-size:small;'><path d='m0,51 q50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0' style='stroke:black;fill:none;'/></pre>
 +
 +
以 q,t 表示
 +
 +
<pre style='font-size:small;'><path d='m0,51 q50,50 100,0 t100,0 100,0 100,0 100,0 100,0' style='stroke:black;fill:none;'/></pre>
 +
 +
====(三)三次圖形(相對表示)====
 +
#以 c 或 c,s 連續處理皆可
 +
#c 每一小節放三個點：「控制點1 控制點2 下個節點」，三點同座標系，皆參考上個點。
 +
#c,s 的 s 每一小節放兩個點：「控制點2 下個節點」，控制點1省略，省略的控制點1為上一小節控制點2對上個節點的鏡像點。
 +
=====例一=====
 +
<img src='http://jendo.org/~thisNasAdmin/pathCS.svg' width=50% height=50% />
 +
 +
以 c 表示
 +
 +
<pre style='font-size:x-small;'><path d='m0,51 c40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0' style='stroke:black;fill:none;'/></pre>
 +
 +
以 c,s 表示
 +
 +
<pre style='font-size:89%;'><path d='m0,51 c40,40 60,40 100,0 s60,-40 100,0 60,40 100,0 60,-40 100,0 60,40 100,0 60,-40 100,0' style='stroke:black;fill:none;'/></pre>
 +
 +
=====例二=====
 +
#以下心形由四段三次貝茲曲線組成，每段皆含三點：兩個控制點、一個下一節點。
 +
##AB 段以 P<sub>1</sub>,P<sub>2</sub> 為控制點， B 為下一節點，三個點座標參照 A 點。
 +
##BC 段以 Q<sub>1</sub>,Q<sub>2</sub> 為控制點， C 為下一節點，三個點座標參照 B 點。 Q<sub>2</sub> 和 C點重合。
 +
##CD 段以 R<sub>1</sub>,R<sub>2</sub> 為控制點， D 為下一節點，三個點座標參照 C 點。 R<sub>1</sub> 和 C點重合。
 +
##DA 段以 S<sub>1</sub>,S<sub>2</sub> 為控制點， A 為下一節點，三個點座標參照 D 點。
 +
#P<sub>2</sub> 、 B 、Q<sub>1</sub> 三點共線，所以 AB 段才能和 BC 平滑銜接。
 +
#R<sub>2</sub> 、 D 、S<sub>1</sub> 三點共線，所以 CD 段才能和 DA 平滑銜接。
 +
#C 點和 Q<sub>2</sub> 、 R<sub>1</sub> 重合，所以 BC 段和 CD 段，兩節點間有一個控制點和節點重合。但並不是退回到二次貝茲曲線，只是近似二次貝茲曲線而已。
 +
#由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達。
 +
<img src='http://jendo.org/~thisNasAdmin/hart.svg'/><br/><br/>
 +
<img src='http://jendo.org/~thisNasAdmin/hart1.svg'/>
 +
 +
<pre style='font-size:83%;'><path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 30,0 51,38.5 51,38.5 0,0 -21,38.5 -51,38.5 -24,0 -31,-27.4 -9.7,-38.5 z'/></pre>
 +
由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達：
 +
 +
<pre style='font-size:86%;'><path fill='#f00' d='m12.7,38.5 c-21.3,-11.2 -14.3,-38.5 9.7,-38.5 c30,0 51,38.5 51,38.5 s-21,38.5 -51,38.5 c-24,0 -31,-27.4 -9.7,-38.5z'/></pre>
 +
 +
 +
將紅心的尖部換成 q ，會使紅心尖部顯得略胖，但非常近似原來的紅心：
 +
 +
<img src='http://jendo.org/~thisNasAdmin/hart2.svg'/><br/>
 +
<pre style='font-size:88%;;'><path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 q 30,0 51,38.5 -21,38.5 -51,38.5 c -24,0 -31,-27.4 -9.7,-38.5 z'/></pre>
 +
 +
比較原來的紅心和紅心的尖部換成 q (綠色部分)：
 +
 +
<img src='http://jendo.org/~thisNasAdmin/hart3.svg'/>

2022年4月9日 (六) 21:23的最新修訂版本

  • A以外的語法說明
  • A的語法說明
  • 點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
  • 參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
指令 參數 示例 指令說明
M(move to) x y <path d='M0 0' style='stroke:black'/> 起始點的 x , y 座標
線 H(horizontal line to) x <path d='M0 0 H50' style='stroke:black'/> 從目前點的座標畫水平直線到指定的 x 軸座標
V(vertical line to) y <path d='M0 0 V50' style='stroke:black'/> 從目前點的座標畫垂直線到指定的 y 軸座標
L(line to) x y <path d='M0 0 L50 50' style='stroke:black'/> 從目前點的座標畫直線到指定點的 x , y 座標
二
次		 Q(quadratic Bézier curve) x1 y1 x y

<path d='M0,0 Q50,50 100,0' style='stroke:black'/>		 從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點
T(smooth quadratic Bézier curve) x y

<path d='M0,0 Q50,50 100,0 T200,0' style='stroke:black'/>		 前方要接上 Q 才能畫，從目前點以前一個 Q 的控制點之鏡射點為控制點，畫二次貝茲曲線到指定點(x,y)。
A(Arc) rx ry x-axis-rotation large-arc-flag sweep-flag x y 從目前點的座標畫個橢圓弧到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向
小寫 a 與大寫 A 的區別只在於： a 最後的 x,y 是相對於目前點的相對座標
三
次		 C(curve) x1 y1 x2 y2 x y

<path d='M0,0 C40,40 60,40 100,0' style='stroke:black'/>		 從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點
S(smooth curve) x2 y2 x y

<path d='M0,0 C40,40 60,40 100,0 S150,-40 200,0' style='stroke:black'/>		 在目前點之前必須有一個貝茲控制點，在目前點之後會以同樣的斜率鏡射一個貝茲控制點，再由參數(x2,y2)補上第二個貝茲控制點，再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。
Z(closepath)
<path d='M0,0 Q50,50 100,0 T200,0 Z' style='stroke:black'/>		 關閉路徑，將目前點的座標與第一個點的座標連接起來

(一)一次圖形(相對表示)

  1. 以 m 或 l 連續處理皆可
  2. 每一節放一個「下個點」， 

<path d='m0,51 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>
<path d='m0,51 l 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>

(二)二次圖形(相對表示)

  1. 以 q 或 q,t 連續處理皆可
  2. q 每一小節放兩個點：「控制點 下個節點」，兩點同座標系，皆參考上個節點。
  3. q,t 的 t 每一小節放一個點：「下個節點」，控制點省略，省略的控制點為上一小節控制點對上個節點的鏡像點。

以 q 表示 

<path d='m0,51 q50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0' style='stroke:black;fill:none;'/>

以 q,t 表示 

<path d='m0,51 q50,50 100,0 t100,0 100,0 100,0 100,0 100,0' style='stroke:black;fill:none;'/>

(三)三次圖形(相對表示)

  1. 以 c 或 c,s 連續處理皆可
  2. c 每一小節放三個點：「控制點1 控制點2 下個節點」，三點同座標系，皆參考上個點。
  3. c,s 的 s 每一小節放兩個點：「控制點2 下個節點」，控制點1省略，省略的控制點1為上一小節控制點2對上個節點的鏡像點。
例一

以 c 表示 

<path d='m0,51 c40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0' style='stroke:black;fill:none;'/>

以 c,s 表示 

<path d='m0,51 c40,40 60,40 100,0 s60,-40 100,0 60,40 100,0 60,-40 100,0 60,40 100,0 60,-40 100,0' style='stroke:black;fill:none;'/>
例二
  1. 以下心形由四段三次貝茲曲線組成，每段皆含三點：兩個控制點、一個下一節點。
    1. AB 段以 P1,P2 為控制點， B 為下一節點，三個點座標參照 A 點。
    2. BC 段以 Q1,Q2 為控制點， C 為下一節點，三個點座標參照 B 點。 Q2 和 C點重合。
    3. CD 段以 R1,R2 為控制點， D 為下一節點，三個點座標參照 C 點。 R1 和 C點重合。
    4. DA 段以 S1,S2 為控制點， A 為下一節點，三個點座標參照 D 點。
  2. P2 、 B 、Q1 三點共線，所以 AB 段才能和 BC 平滑銜接。
  3. R2 、 D 、S1 三點共線，所以 CD 段才能和 DA 平滑銜接。
  4. C 點和 Q2 、 R1 重合，所以 BC 段和 CD 段，兩節點間有一個控制點和節點重合。但並不是退回到二次貝茲曲線，只是近似二次貝茲曲線而已。
  5. 由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達。 



<path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 30,0 51,38.5 51,38.5 0,0 -21,38.5 -51,38.5 -24,0 -31,-27.4 -9.7,-38.5 z'/>

由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達： 

<path fill='#f00' d='m12.7,38.5 c-21.3,-11.2 -14.3,-38.5 9.7,-38.5 c30,0 51,38.5 51,38.5 s-21,38.5 -51,38.5 c-24,0 -31,-27.4 -9.7,-38.5z'/>


將紅心的尖部換成 q ，會使紅心尖部顯得略胖，但非常近似原來的紅心： 


<path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 q 30,0 51,38.5 -21,38.5 -51,38.5 c -24,0 -31,-27.4 -9.7,-38.5 z'/>

比較原來的紅心和紅心的尖部換成 q (綠色部分)：

取自「http://well-being-ng.net/wiki1231/index.php?title=SVG/path&oldid=57006」