SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令

目錄

SVG 學習<一>基礎圖形及線段

SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組

SVG 學習<三>漸變

SVG 學習<四> 基礎API

SVG 學習<五> SVG動畫

SVG 學習<六> SVG的transform

SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令

SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

查閱一些關於貝塞爾曲線資料後，對貝塞爾曲線有了大概的瞭解。

我的對貝塞爾曲線的理解：

二次貝塞爾曲線：由起點、終點和一個控制點控制的範圍內繪製的一條曲線；

三次貝塞爾曲線：由起點、終點和兩個個控制點控制的範圍內繪製的一條曲線；

四次貝塞爾曲線/五次貝塞爾曲線 ... ... 以此類推。

 

貝塞爾曲線命令

理解了什麼是貝塞爾曲線，貝塞爾曲線命令就很好理解了。

SVG中只能定義二次 三次貝塞爾曲線

二次貝塞爾曲線：Q x1 y1 x y； x1 y1 定義二次貝塞爾曲線控制點座標， x y 定義二次貝塞爾曲線終點的位置；

三次貝塞爾曲線：C x1 y1 x2 y2 x y； x1 y1 定義三次貝塞爾曲線第一個控制點座標，x2 y2 定義三次貝塞爾曲線第二個控制點位置  x y 定義三次貝塞爾曲線終點的位置；

例：

        <path d="M10 10 Q200 250 10 500" stroke="rgb(0,150,255)"/>
        <path d="M130 300 C250 0 800 600 900 300" stroke="rgb(255,0,0)"/>

藍色爲二次貝塞爾曲線，紅色爲三次貝塞爾曲線。

 

光滑貝塞爾曲線命令

光滑貝塞爾曲線是貝塞爾曲線的光滑版（曲線更圓滑）；

光滑貝塞爾曲線命令：S 光滑版二次貝塞爾曲線  Q 普通二次貝塞爾曲線   T 光滑版三次貝塞爾曲線   C 普通版三次貝塞爾曲線。

例：

        <path d="M10 100 S100 600 310 100" stroke="rgb(0,150,255)"/>
        <path d="M10 100 Q100 600 310 100" stroke="rgb(0,0,0)"/>

        <path d="M130 300 C250 100 500 300 900 300" stroke="rgb(255,0,0)"/>
        <path d="M130 300 T250 100 500 300 900 300" stroke="rgb(0,0,0)"/>

以上是兩種貝塞爾曲線的對比

 

還有關於更詳細的貝塞爾曲線視頻教程  光滑貝塞爾曲線視頻教程