SVG <path> 路徑元素

admin發表於2019-04-18
SVG

SVG具有強大的繪圖能力，為了使用方便，內建了很多圖形元素。

比如<polygon>可以繪製多邊形，<ellipse>可以繪製橢圓，<rect>可以繪製矩形。

應用非常的方便，但是上述元素有一個共同的缺點，那就是圖形固定，不能靈活繪製。

實際專案中，所需要的圖形是多種多樣的，於是<path>路徑元素的優勢得到體現。

利用它可以繪製任意形狀的圖形，簡單程式碼演示如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="400" height="300">
    <path 
      fill="#FFFFFF" 
      stroke="#000000" 
      stroke-width="4" 
      d="M66.039,133.545 
         c0,0-21-57,18-67
         s49-4,65,8
         s30,41,53,27
         s66,4,58,32
         s-5,44,18,57
         s22,46,0,45
         s-54-40-68-16
         s-40,88-83,48
         s11-61-11-80
         s-79-7-70-41
         C46.039,146.545,53.039,128.545,66.039,133.545
         z" />
</svg>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/160147egjt2fea5ytymz2c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過<path>元素繪製一個曲折複雜的圖形，體現了此元素的強大功能。

當然我們也不能想象完全依靠手寫引數的方式繪製更為複雜龐大的圖形，可以使用一些工具輔助。

首先對<path>元素的主要屬性簡單介紹如下：

（1）.fill：此屬性規定路徑的填充顏色。

（2）.stroke：此屬性規定路徑的描邊顏色，也就是路徑的邊框顏色。

（3）.fill-rule：此屬性規定路徑的填充規則，具體參閱canvas 非零繞組規則與奇偶規則一章節。

（3）.d：此屬性用於規定路徑的具體繪製規則，從上述程式碼來看確實比較複雜。

下面通過一段更為簡短的程式碼簡單分析一下d屬性的用法：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <svg width="400" height="300">
      <path 
        d="M50,50
           l150,50"
        stroke="red"
        fill="none"
        stroke-width="1"/> 
</svg>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/160215ms6cmm1cz0mw2zmw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過<path>路徑元素繪製一條斜線，極為簡單，目的是為了介紹d屬性，分析如下：

（1）.d屬性值是兩個圖形繪製命令，分別以字母開頭。

（2）.每一組命令中的引數用逗號分隔，命令與命令之間可以用空格或者換行分隔。

（3）.M是Move to的縮寫，表示將筆觸移動到指定座標，也就是從指定位置開始繪製。

（4）.L是Line的縮寫，表示繪製一條直線，L後面的參數列示直線的終點座標。

（5）.命令區分大小寫，這一點需要特別注意，大寫表示絕對座標，小寫表示相對座標。

（6）.絕對座標表示以座標系原點（0,0）為參考點，相對座標表示當前座標值相對上一個控制點座標的變化。

對上述程式碼的座標分析如下：

（1）.M50,50：M是大寫，說明是絕對座標，相對於當前使用者座標系原點進行定位。

（2）.l150,50：l是小寫，相對的是M50,50，此點的絕對座標位置就是（50+150,50+50）。

<path>路徑命令眾多，考慮到篇幅問題，文字不再逐一進行詳細介紹，具體可以參閱本教程相關文章。

主要命令列表如下：

（1）.M（m）：將畫筆移動到點指定座標。

（2）.L（l）：繪製一條直線。

（3）.H（h）：繪製一條水平線段。

（4）.V（v）：繪製一條垂直線段。

（5）.A（a）：繪製一段圓弧。

（6）.C（c）：繪製三次賽貝爾曲線。

（7）.S（s）：特殊版本的三次賽貝爾曲線。

（8）.Q（q）：繪製二次賽貝爾曲線。

（9）.T（t）:繪製特殊版本二次賽貝爾曲線。

（10）.Z（z）:繪製閉合圖形，如果不指定z命令，那麼不是繪製閉合圖形，而是繪製線段。

相關文章