svg形狀相關的學習(二)

閱讀目錄

• 一：線段
• 二：筆畫特性
  1. stroke-width
  2. stroke-opacity
  3. stroke-dasharray 屬性
• 三：常見的形狀
  1. 矩形
  2. 圓角矩形
  3. 圓和橢圓
  4. 多邊形
  5. 折線

回到頂部

一：線段

在上一篇文章中，咱們已經瞭解了座標系統，如今咱們在該座標系統中開始繪圖了。

在svg中可以使用<line>元素畫出一條直線段。<line>標籤是用來建立線條的。以下代碼所示：

<line x1="start-x" y1="start-y" x2="end-x" y2="end-y"></line>

x1：該屬性在x軸定義線條的開始的位置。
y1: 該屬性在y軸定義線條的開始的位置。
x2: 該屬性在x軸定義線條的結束的位置。
y2: 該屬性在y軸定義線條的結束的位置。

以下代碼所示：

<svg 
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <!-- 水平線條 -->
  <line x1="40" y1="20" x2="100" y2="20" style="stroke: red;"></line>
  <!-- 垂直線條 -->
  <line x1="40" y1="50" x2="40" y2="150" style="stroke: black;"></line>
</svg>

效果以下所示：

回到頂部

二：筆畫特性

回到頂部

1. stroke-width

 線段能夠看做在畫布上畫出來的筆畫，可是筆畫從尺寸，顏色和風格都會影響線段的表現，那麼這些特性咱們均可以在style屬性中指定。

如上咱們經過線段能夠繪出一條線，可是線也有粗和細之分，想要粗和細可使用 stroke-width 這個屬性。咱們如今將上面的列子的寬度設置爲10，就能夠看到線段會更粗更明顯了，以下代碼：

<svg 
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <!-- 水平線條 -->
  <line x1="40" y1="20" x2="100" y2="20" style="stroke-width: 10; stroke: red;"></line>
  <!-- 垂直線條 -->
  <line x1="40" y1="50" x2="40" y2="150" style="stroke-width: 10; stroke: black;"></line>
</svg>

效果以下所示：

回到頂部

2. stroke-opacity

如上咱們全部的線條都是實線，可是若是咱們想要透明的線，不會擋住下面的東西，咱們可使用該屬性，該屬性的取值範圍是：0.0~1.0 其中0表明完成透明，1表明徹底不透明。小於0的值會被更改成0，大於1的值會被更改成1. 以下代碼演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <line x1="30" y1="0" x2="30" y2="60" style="stroke: red; stroke-width: 5;"></line>
  <line x1="10" y1="10" x2="50" y2="10" style="stroke: black; stroke-width: 5;stroke-opacity:0.2;"></line>
  <line x1="10" y1="20" x2="50" y2="20" style="stroke: black; stroke-width: 5;stroke-opacity:0.4;"></line>
  <line x1="10" y1="30" x2="50" y2="30" style="stroke: black; stroke-width: 5;stroke-opacity:0.6;"></line>
  <line x1="10" y1="40" x2="50" y2="40" style="stroke: black; stroke-width: 5;stroke-opacity:0.8;"></line>
  <line x1="10" y1="50" x2="50" y2="50" style="stroke: black; stroke-width: 5;stroke-opacity:1;"></line>
</svg>

以下圖效果所示：

回到頂部

3. stroke-dasharray 屬性

若是咱們須要繪製虛線邊框的話，咱們可使用 stroke-dasharray 屬性。它的值由一列數字構成，表明線的長度和空隙的長度，數字之間用逗號或空格分割。數字的個數爲偶數，可是若是咱們指定的數字個數爲奇數的話，則SVG會重複繪一次，使得總個數爲偶數。

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 9個像素的虛線, 5個像素的空隙 -->
  <line x1="10" y1="10" x2="100" y2="10" style="stroke-dasharray: 9, 5; stroke: black; stroke-width:2;"></line>
  <!-- 9個像素的虛線, 5個像素的空隙, 5個像素的虛線 -->
  <line x1="10" y1="20" x2="100" y2="20" style="stroke-dasharray: 9, 5, 5; stroke: black; stroke-width:2;"></line>
</svg>

效果以下所示：

注意：9個像素的虛線，是指該線條的長度爲9，5個像素的空隙，是指該空隙的長度爲5. 而不是說在一根線條上有9個虛線和5個空隙。至於有多少個，計算機會本身根據線條的長度計算出來的。

回到頂部

常見的形狀

回到頂部

1. 矩形

矩形咱們以前使用過的，它是使用 <rect> 這個標籤來指定的，它有 x(左上角) 和 y(左上角)座標，以及它的寬度(width) 和 高度(height)便可。矩形內部咱們可使用fill屬性表明顏色進行填充。若是沒有指定fill顏色，則默認會使用黑色填充。

咱們也能夠指定 fill: none; 即不填充矩形內部，保持透明。至於矩形邊框，咱們可使用 stroke來指定，若是咱們不指定stroke的話，則它的值爲none。將不會繪製矩形邊框。

以下代碼所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 矩形內部填充爲黑色，不繪製邊框 -->
  <rect x="10" y="10" width="30" height="50"></rect>
  <!-- 內部不填充顏色，繪製黑色邊框-->
  <rect x="50" y="10" width="20" height="40" style="fill:none;stroke: black;"></rect>
  <!-- 內部填充爲藍色，半透明紅色邊框 -->
  <rect x="10" y="70" width="25" height="30" style="fill: blue;stroke:red;stroke-width:7;stroke-opacity:0.5;"></rect>
  <!-- 內部填充爲半透明的黃色，用虛線繪製綠色邊框 -->
  <rect x="50" y="70" width="35" height="30" style="fill: yellow;stroke:green;stroke-width:2;stroke-opacity:0.5;stroke-dasharray: 5, 2"></rect>
</svg>

效果以下所示：

回到頂部

2. 圓角矩形

若是咱們想要獲得一個圓角矩形的話，咱們能夠分別指定x方向和y方向的圓角半徑，即 rx 和 ry. 若是咱們只指定了rx和ry中的一個值，則默認認爲他們是相等的。若是咱們的矩形的寬度和高度相同的話，咱們想畫個圓，咱們能夠設置 rx 和 ry 的大小是該寬度的一半便可，就和咱們以前css中的 border-radius 相似的。好比以下代碼：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 圓角半徑 rx 和 ry 爲2-->
  <rect x="10" y="10" width="20" height="40" rx="2" ry="2" style="fill:none;stroke: black;"></rect>
  <!-- 圓角半徑 rx 爲2，ry默認也會設置爲2-->
  <rect x="50" y="10" width="20" height="40" rx="2" ry="2" style="fill:none;stroke: black;"></rect>
  <rect x="90" y="10" width="40" height="40" rx="25" ry="25" style="fill:none;stroke: black;"></rect>
</svg>

效果以下所示：

回到頂部

3. 圓和橢圓

要畫一個圓，咱們也可使用 <circle>元素，須要指定圓心的x和y座標(cx/cy)以及半徑(r). 橢圓除了須要指定圓心的座標外，還須要同時指定x方向的半徑和y方向的半徑，屬性分別爲 rx 和 ry.

對圓或橢圓來講，若是省略了cx或cy, 則默認爲0，若是半徑爲0，則不會顯示圖形。若是半徑爲負數，則會報錯，以下代碼：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 畫一個圓，圓心相對x座標和y座標距離爲50，半徑爲20畫圓 -->
  <circle cx="50" cy="50" r="20" style="stroke:black;fill:none;"></circle>
</svg>

效果以下所示：

再來看看橢圓，橢圓須要使用 <ellipse> 元素來指定，以下代碼所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 畫一個橢圓，圓心相對x座標和y座標距離爲40，橢圓相對於x軸半徑爲10，相對於y軸半徑爲20 畫橢圓 -->
  <ellipse cx="40" cy="40" rx="10" ry="20" style="stroke: black;fill:none;"></ellipse>
</svg>

效果以下所示：

如上，若是咱們把該x軸的半徑和y軸的半徑同樣的話，那麼也就會變成圓了，以下代碼所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 畫一個橢圓，圓心相對x座標和y座標距離爲40，橢圓相對於x軸半徑爲10，相對於y軸半徑爲20 畫橢圓 -->
  <ellipse cx="60" cy="40" rx="20" ry="20" style="stroke: black;fill:none;"></ellipse>
</svg>

效果以下所示：

回到頂部

4. 多邊形

除了上面矩形，圓和橢圓外，若是咱們還想畫五角星，六邊形，或八邊形，或其餘的封閉圖形的話，咱們可使用 <polygon> 元素能夠用來畫任意的封閉圖形。該元素使用了points屬性指定了每一個端點的座標，橫座標與縱座標之間用逗號分隔，點與點之間用空格分隔。以下代碼

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 平行四邊形 -->
  <polygon points="15,10 55,10 45,20 5,20" style="fill:red; stroke: black;"></polygon>
  <!-- 五角星 -->
  <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7, 60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #cfc; stroke: green;"></polygon>
  <!-- 不規則圖形 -->
  <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill:yellow;fill-opacity:0.5;stroke: black; stroke-width:2;"></polygon>
</svg>

效果以下所示：

咱們來簡單的分析一下，上面的代碼，好比說 平行四邊形，points="15,10 55,10 45,20 5,20" 首先x軸的橫座標是15，而後縱座標是10，所以第一個是左上角的點，而後 55, 10, x軸的橫座標是55，y軸的縱座標是10，所以是右上角的那個點座標。
而後就是右下角那邊座標點了，是45,20，離x軸距離45， 離y軸的距離是20， 最後就是 5, 20了，是左下角那個座標點了。

理解填充邊線交叉的多邊形

咱們以前使用fill對其餘多邊形填充顏色很簡單，由於其餘的多邊形的各個邊都沒有交叉，很容易區分出多邊形的內部區域和外部區域。
可是，當多邊形的邊彼此交叉的時候，要區分哪些區域是圖形的內部是不容易區分的，好比咱們的上面五角星，在SVG中有兩種判斷某個點是不是在多邊形中的規則，有 fill-rule 這個屬性，該屬性有2種值分別爲：nonzero（默認值）和 evenodd 。 以下演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 五角星 -->
  <polygon points="48,16 16,96 96,48 0,48 80,96" style="fill: #cfc; stroke: green;fill-rule: nonzero"></polygon>
  <polygon points="148,16 116,96 196,48 100,48 180,96" style="fill: #cfc; stroke: green;fill-rule: evenodd;"></polygon>
</svg>

效果以下：

回到頂部

5. 折線

有時候咱們須要作折線這種效果，咱們可使用 <polyline>元素來作會更簡單的，它與<polygon>元素有相同的points屬性。
可是不一樣的地方是它的圖形並不封閉，以下代碼演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" style="stroke: black;stroke-width:3;fill:none;"></polyline>
</svg>

效果以下所示：