日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

path元素是用來定義形狀的通用元素。所有的基本形狀都可以用path元素來創(chuàng)建。SVG 元素用于繪制由直線，圓弧，曲線等組合而成的高級形狀，帶或不帶填充。該 元素可能是所有元素中最先進(jìn)，最通用的SVG形狀。

黃陵ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

一、弧線   使用元素繪制圓弧是使用A和a命令完成的。與直線類似，大寫命令(A)使用絕對坐標(biāo)作為其終點(diǎn)，而小寫命令(A)使用相對坐標(biāo)(相對于起點(diǎn))。 例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
  
  
  
 
  
  
  
  
      
  
  
  
          style="stroke:#660000; fill:none;"/> 
  
  
  
  
 
 
 
 

運(yùn)行結(jié)果:

例2：  

運(yùn)行結(jié)果:

1. 二次貝塞爾曲線   還可以使用元素繪制二次Bezier曲線。繪制二次Bezier曲線是使用Q和Q命令完成的。與直線一樣，大寫命令(Q)使用絕對坐標(biāo)作為其終點(diǎn)，而小寫命令(q)使用相對坐標(biāo)(相對于起點(diǎn))。下面是一個簡單的二次曲線示例：   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
      style="stroke: #006666; fill:none;"/> 
  
  
  
  
 
 
 
 

運(yùn)行結(jié)果:

該示例繪制一條二次 Bezier 曲線，從50,50到點(diǎn)100,100，控制點(diǎn)為50,200?？刂泣c(diǎn)是 Q 命令上設(shè)置的兩個參數(shù)中的第一個。   控制點(diǎn)像磁鐵一樣拉動曲線。曲線上的一個點(diǎn)離控制點(diǎn)越近，控制點(diǎn)就越往里拉，這意味著它離控制點(diǎn)越近。以下是一些在圖像上繪制控制點(diǎn)的示例：

實(shí)際上，如果從起點(diǎn)畫一條線到控制點(diǎn)，再畫一條從控制點(diǎn)到終點(diǎn)的線，那么從第一條線的中間到第二條線的中間就是曲線的切線。

2. 三次貝塞爾曲線   使用C和c命令繪制三次貝塞爾曲線。三次貝塞爾曲線類似于二次貝塞爾曲線，除了它們具有兩個控制點(diǎn)而不是一個控制點(diǎn)。與線條一樣，大寫命令(C)使用絕對坐標(biāo)作為其終點(diǎn)，小寫命令(c)使用相對坐標(biāo)（相對于起點(diǎn)）:  

 
 
 
 
  
  
  
  
  
  
  
  
  style="stroke: #006666; fill:none;"/> 
 
 
 

這是繪制了控制點(diǎn)的結(jié)果圖像，運(yùn)行后結(jié)果如下。

二、閉合路徑   該元件具有用于關(guān)閉所述通路，這意味著從繪制的最后一個點(diǎn)回到第一點(diǎn)的線的快捷命令。該命令是Z（或z-大寫和小寫閉合路徑命令之間沒有區(qū)別）。   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
    style="stroke: #006666; fill:none;"/> 
  
  
  
  
 
 
 
 

運(yùn)行結(jié)果:

 
三、組合命令   可以在同一元素中組合path命令。   示例  

此示例繪制一條直線、一條圓弧、一條二次Bezier曲線，并以一條回到起點(diǎn)的直線閉合路徑結(jié)束。以下是生成的圖像：

四、填充路徑   可以使用fill CSS屬性填充路徑。下面是一個實(shí)例：   示例  

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">  
  
  
  
      style="stroke: #ff0000; stroke-width: 2px; fill  : #ccccff;"/> 
  
  
  
  
 
 
 
 

運(yùn)行結(jié)果:

注： 形狀的內(nèi)部是如何用紅色填充的。
五、總結(jié) 本文基于SVG基礎(chǔ)，介紹了如何畫曲線，重點(diǎn)介紹了塞爾曲線的畫不規(guī)則圖像，二次貝塞爾曲線，三次貝塞爾曲線的實(shí)際應(yīng)用 ，通過項(xiàng)目，詳細(xì)介紹了閉合路徑， 填充路徑的實(shí)際應(yīng)用。 歡迎大家積極嘗試，有時候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。 代碼很簡單，希望能夠幫助你更好的學(xué)習(xí)。

 本文轉(zhuǎn)載自微信公眾號「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號。

當(dāng)前文章：一篇文章帶你了解SVG 路徑
鏈接URL：http://www.dlmjj.cn/article/ccieosp.html