當前位置:
首頁 > 知識 > SVG 路徑<path>

SVG 路徑<path>

<path> 元素用於定義一個路徑。

下面的命令可用於路徑數據:

  • M = moveto

  • L = lineto

  • H = horizontal lineto

  • V = vertical lineto

  • C = curveto

  • S = smooth curveto

  • Q = quadratic Bézier curve

  • T = smooth quadratic Bézier curveto

  • A = elliptical Arc

  • Z = closepath

注意:以上所有命令均允許小寫字母。大寫表示絕對定位,小寫表示相對定位。



實例 1

上面的例子定義了一條路徑,它開始於位置150 0,到達位置75 200,然後從那裡開始到225 200,最後在150 0關閉路徑。

下面是SVG代碼:

實例

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><pathd="M150 0 L75 200 L225 200 Z"/></svg>

SVG 路徑<path>

對於Opera用戶:查看SVG文件(右鍵單擊SVG圖形預覽源)。



實例 2

下面的例子創建了一個二次方貝塞爾曲線,A 和 C 分別是起點和終點,B 是控制點:

下面是SVG代碼:

實例

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><pathid="lineAB"d="M 100 350 l 150 -300"stroke="red"stroke-width="3"fill="none"/><pathid="lineBC"d="M 250 50 l 150 300"stroke="red"stroke-width="3"fill="none"/><pathd="M 175 200 l 150 0"stroke="green"stroke-width="3"fill="none"/><pathd="M 100 350 q 150 -300 300 0"stroke="blue"stroke-width="5"fill="none"/><!-- Mark relevant points --><gstroke="black"stroke-width="3"fill="black"><circleid="pointA"cx="100"cy="350"r="3"/><circleid="pointB"cx="250"cy="50"r="3"/><circleid="pointC"cx="400"cy="350"r="3"/></g><!-- Label the points --><gfont-size="30"font="sans-serif"fill="black"stroke="none"text-anchor="middle"><textx="100"y="350"dx="-30">A</text><textx="250"y="50"dy="-10">B</text><textx="400"y="350"dx="30">C</text></g></svg>

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

MySQL 安裝
XML DOM 載入函數

TAG:程序員小新人學習 |