SVG <path> 元素A指令繪製弧線

admin發表於2019-04-22
SVG

<path>元素具有強大的繪圖能力，能夠繪製靈活複雜多樣的圖案。

之所以如此強大，是因為它具有多種多樣的圖形繪製命令，本文只介紹一下弧線繪製指令A。

A是arc的縮寫，翻譯成漢語具有"圓弧"的意思，瞭解命令縮寫的全稱在一定程度上有助於記憶。

關於<path>元素的基本用法和一些基本規則本文不做介紹，具體參閱SVG <path> 路徑元素一章節。

首先通過一段程式碼例項感受一下A指定的作用，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:150px;
  height:100px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M40,20
          A30,30 0 0,0 70,70"
          stroke="red"
          stroke-width="2"
          fill="none" />
  </svg>                            
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/132808wppncapzzpf0caf2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中，通過A指令繪製了一段弧線，下面分步介紹一下此命令的具體用法。

此命令區分大小寫，也就是說A與a是不同的，大寫表示絕對座標，也就是命令中的座標都是相對於座標系的原點，小寫表示相對座標，也就是相對於上一個點的增量。

語法結構：

[HTML] 純文字檢視 複製程式碼
A（a）rx ry x-axis-rotation large-arc-flag sweep-flag x y

命令解析如下：

（1）.rx：規定圓弧在x軸方向的半徑吃尺寸。

（2）.ry ：規定元素在y軸方向的半徑尺寸，如果與rx相等則正圓圓弧，否則是橢圓圓弧。

（3）.x-axis-rotation：規定圓弧的橫軸與x軸的夾角，正數表示順時針旋轉，反之表示逆時針。

（4）.large-arc-flag：規定繪製大圓弧還是小圓弧，1表示繪製大角度圓弧，0表示繪製小角度圓弧。

（5）.sweep-flag：規定繪製順時針方向繪製，還是逆時針方向繪製，1表示順時針，0表示逆時針。

（6）.x：規定圓弧終點的x軸座標。

（7）.y：規定圓弧終點的y軸座標。

上面對命令的細節進行了概念上的介紹，相信相當大的一部分朋友會感覺一頭霧水。

不用擔心，後面會結合程式碼例項繪製圖案對此命令各個細節進行詳細分析，理解起來更為輕鬆。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:150px;
  height:100px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M40,20
      A30,30 0 0,0 70,70"
      stroke="red"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 0,1 70,70"
      stroke="green"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 1,0 70,70"
      stroke="blue"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 1,1 70,70"
      stroke="yellow"
      stroke-width="2"
      fill="none" />
  </svg>                            
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/132935nvtut4g7le4rev5a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分析如下：

（1）.上述程式碼繪製了四個不同顏色的圓弧。

（2）.四個圓弧的半徑尺寸、圓弧繪製的起點座標和圓弧繪製的中點座標都是相同的。

（3）.它們的不同點在於中間靠後的二個引數，也就是large-arc-flag和sweep-flag。

（4）.圓弧半徑與繪製的起點與終點確定之後，你既可以選擇繪製較大一側的弧，也可以選擇繪製較小一側的弧，當然也可以順時針繪製，也可以逆時針繪製，當然圓弧也有可能兩側同樣大。

（5）.紅色圓弧large-arc-flag和sweep-flag值都為0，表示繪製較小弧度和逆時針繪製，藍色圓弧同樣是逆時針繪製，但繪製的是較大的弧度，兩個一起對比是不是非常容易理解了。

（6）.綠色圓弧是順時針繪製，繪製較小圓弧，黃色圓弧同樣是順時針繪製，繪製較大圓弧。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  margin:100px;
  width:450px;
  height:400px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M10 315
      L110 215
      A30 50 0 0 1 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.5" />
    <path d="M10 315
      L110 215
      A30 50 0 1 0 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.2" />
    <path d="M10 315
      L110 215
      A30 50 30 0 1 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.5" />
    <path d="M10 315
      L110 215
      A30 50 30 1 0 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.2" />
  </svg>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133002txsqhq7qxxdgxdz2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼用於演示x-axis-rotation的功能，上述程式碼簡單分析如下：

（1）.為了便於觀察我們繪製了四個圓弧，首先將後面兩個刪除，那麼就會剩下如下圖案：

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133019x7vkkvvxpio7vtrk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

兩個組合成一個整個橢圓，橢圓沒有任何旋轉效果，也就是沒有規定x-axis-rotation值為0。

可以看到橢圓豎直站立，黑色線條只是一條為了便於觀察的輔助線，沒有其他含義。

（2）.下面再將後面兩個圖形繪製出來：

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133045bc6d2zqd0cee8t0y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

後面的圖案規定了x-axis-rotation屬性值，那麼就會進行旋轉。

旋轉點是圓弧繪製的起點座標，正數是順時針旋轉，負數為逆時針旋轉。

角度是圓弧的x軸（也叫橫軸）與使用者座標系x軸的夾角，可以看到整個橢圓進行了順時針旋轉。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  margin: 100px;
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M50,50
    A2,2 0 0,1 100,100"
    stroke="black"
    fill="green"
    stroke-width="2"
    fill-opacity="0.5" />
 </svg>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133108ally9jh39j02t97h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

簡單程式碼分析如下：

（1）.上述程式碼規定圓弧的半徑為2，但是實際繪製的圓的半徑明顯要大於2。

（2）.是不是瀏覽器解析出現了bug，其實並不是，繪製的起點座標是（50,50），終點座標是（100,100），包含這兩個座標的圓弧再怎麼繪製，圓弧的半徑也是遠大於2的，所以瀏覽器就自作主張繪製一個半徑儘可能小的圓弧，也就是起點與終點連線起來恰好是圓的直徑，上述類似的情況一定要注意下。

相關文章