數據可視化系列--svg入門基礎（二）

接上一篇：數據可視化-svg入門基礎（一），基礎一主要是介紹了svg概念，元素樣式設置等。

svg是（scalable vector graphic）伸縮矢量圖像。

1、目錄

（1）圖形元素

（2）文字元素

（3）特殊元素

（4）濾鏡元素

（5）漸變元素

2、圖形元素

一、矩形

矩形使用<rect></rect>標籤來進行繪製。

示例圖：

代碼：

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
</svg>

參數說明：

（1）x：左上角x的座標，距離左邊的距離，至關於margin-left；

（2）y：左上角y的座標，距離頂部的距離，至關於margin-top；

（3）width：矩形的寬度；

（4）height：矩形的高度；

（5）rx：圓角矩形，x軸方向的半徑；

（6）ry：圓角矩形，y軸方向的半徑

（7）fill：填充顏色

二、圓形

圓形使用<circle></circle>標籤來進行繪製。

示例圖：

實例代碼：

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>

參數說明：

（1）cx：圓形的x座標；

（2）cy：圓心的y作標；

（3）r：半徑

三、橢圓形

橢圓形使用標籤<ellipse></ellipse>標籤進行繪製，與圓形的繪製方法相似。

示例圖：

實例代碼以下：

<svg width="200" height="200">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
</svg>

參數說明：

cx：圓心的x座標；

cy：圓心的y座標；

rx：水平方向上的半徑；

ry：垂直方向上的半徑

四、線段

線段使用<line></line>標籤進行繪製。

實例代碼

<svg width="200" height="200">
  <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
</svg>

參數說明：

x1：起點的x座標；

y1：起點的y座標；

x2：終點的x座標；

y2：終點的y座標

五、折線和多邊形

折線和多邊形的繪製方法相似，都是用points屬性設置各個點的座標。

折線使用標籤<polyline></polyline>進行繪製，而多邊形使用標籤<polygon></polygon>進行繪製，且多邊形會將起點和終點鏈接起來，折線不會。

示例圖：

實例代碼：

/* 圖一 折線，不會將起點與終點鏈接 */
<svg width="200" height="200">
  <polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
</svg>

/* 圖二 多邊形，將起點與終點鏈接 */
<svg width="200" height="200">
  <polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polygon>
</svg>

參數說明：

ponits：設置各個點的座標，各組座標之間使用空格分隔，x座標和y座標之間使用逗號分開。

六、路徑

路徑使用標籤<path></path>進行繪製，使用d屬性控制路徑的類型和繪製。路徑的功能最多，前面的全部圖形均可以使用路徑進行繪製。

d屬性值的書寫有兩種，使用逗號分隔座標，如：d="M10, 10"，也能夠使用空格的形式，如：d="M 10 10"

注意：大寫字母：表示座標系中使用絕對座標，小寫字母：使用相對座標（相對當前畫筆所在的點）

6.1移動類參數

M：moveto，將畫筆移動到指定座標，如：d="M10,10"，表示將畫筆移動到座標(10,10)的位置。

示例圖：

實例代碼：

<svg width="200" height="200">
    <path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path>
   </svg>

6.2繪製直線類參數

L：lineto，繪製直線到指定座標，如：d="M 10 10 L 80 80"，表示繪製一條起點座標爲(10,10)，終點座標爲(80,80)的直線。

H：horizontal lineto，繪製水平直線到指定座標，如：d="M 10 10 H 100"，表示是繪製一條起點座標爲(10,10)，終點座標爲(100,10)的直線，注意：H只須要設置一個值，若是設置了多個值，則最後取最後一個值。

V：vertical，繪製垂直直線到指定座標，如：d="M 10 10 V 100"，表示繪製一條起點座標(10,10)，終點座標爲(10,100)的直線，注意：V只須要設置一個值，若是是多個值，則取最後一個值。

6.3繪製曲線類參數

C：curveto，繪製三次方貝塞爾曲線到終點座標，中間通過兩個控制點控制曲線的弧度，因此須要制定三個座標來實現繪製曲線，如：d="M10,10 C40,5 40,140 100,100"

S：shorthand/smooth curveto，繪製平滑三次方貝塞爾曲線到終點座標，與上一條三次方貝塞爾曲線相連，第一個控制點爲上一條曲線第二個控制點的對稱點，因此還需制定一個控制點座標和終點座標。如：d="M10,10 C40,5 40,140 100,100 S140,180 160,160"，若是不與貝塞爾曲線相連，即：d="M10,10 S140,180 160,160"，則繪製的圖線接近於二次貝塞爾曲線

Q：quadratic Bezier curveto，繪製二次貝塞爾曲線到終點座標，中間通過一個控制點控制曲線的弧度，如：d="M10,10 Q40,140 100,100"

T：shorthand/smooth quadratic Bezier curveto，繪製平湖二次貝塞爾曲線到終點座標，與上一條二次貝塞爾曲線相連，控制點爲上一條曲線控制點的對稱點，因此還需指定一個終點座標，如：d="M10,10 Q40,140 100,100 T160,160"，若是不與貝塞爾曲線相連，即：d="M10,10 T160,160"，則繪製的圖線是一條直線。

示例圖：

實例代碼：

/* 圖一 三次方貝塞爾曲線 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 圖二 三次方貝塞爾曲線，與上一條曲線相連 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 圖三 二次貝塞爾曲線 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 圖四 二次方貝塞爾曲線，與上一條曲線相連 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

6.4繪製弧線類參數

A：el liptical arc，繪製橢圓曲線到指定座標，需設置的參數有：

（1）rx，ry：x軸方向半徑，y軸方向半徑；

（2）x-axis-rotation：x軸與水平順時針方向夾角；

（3）large-arc-flag：角度弧線大小(1：大，0：小)；

（4）sweep-flag：繪製方向(1：順時針，0：逆時針)；

（5）x y：終點座標

示例圖：

實例代碼：

<svg width="500" height="500">
    <path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
  </svg>

分析：起點座標(50,50)，終點座標(150,50)，角度爲0，角度弧線大小large-arc-flag爲1，選擇大弧度，根據分析，即選擇紅色的弧線，又繪製方向sweep-flag爲0，爲逆時針，即從起點沿着逆時針方向繪製到終點，因此是紅色虎先位於下方。

注意：當 (起點與終點之間的直線距離／2) > (橢圓的水平半徑) 時，角度爲0的狀況下，此時橢圓會等比放大，到相等爲止。

6.5閉合類參數

Z：closepath，繪製直線將終點與起點鏈接

再次提醒：大寫字母：表示座標系中使用絕對座標，小寫字母：使用相對座標（相對當前畫筆所在的點）

3、文字元素

一、基礎

在svg中使用<text></text>標籤繪製文字。

參數說明：

x：文字的x座標；

y：文字的y座標；

dx：相對於當前位置x方向的距離；

dy：相對於當前位置的y方向的距離；

textLength：文字的顯示長度；

rotate：旋轉角度，也能夠使用transform="rotate(30)"

示例圖：

實例代碼：

<svg width="200" height="200">
  <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>
</svg>

二、文本路徑

若是要實現文字沿着路徑進行排列，可以使用<textPath></textPath>標籤來實現。須要提早定義好路徑path，並指定id，textPath使用xlink:href定義文字要匹配的路徑。

示例圖：

實例代碼：

<svg width="600" height="600">
        <path id="textPath1" d="M100,100 C140,50 140,240 200,200 S240,280 360,360" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
        <text x="10" y="10" dx="-10" dy="-10" rotate="20">
          <textPath xlink:href="#textPath1" textLength="300">
            很扭曲的測試示例文字
          </textPath>
        </text>
      </svg>

4、特殊元素

一、克隆元素use

use標籤用來克隆其餘元素，克隆後的元素不能修改樣式。 示例圖：

示例代碼：

<svg>
  <rect id="rect1"
        x="10" y="10" width="100" height="100"
        stroke="#5588aa" stroke-width="5"
        fill="transparent"
  ></rect>
  <use x="20" y="20" xlink:href="#rect1"></use>
  </svg>

參數說明：

x：相對被克隆元素x軸偏移量；

y：相對被克隆元素y軸偏移量；

xlink:href：指向被克隆元素的ID

二、模板元素symbol

symbol標籤用定義模版，須要結合use標籤使用，模版在未被使用以前，不會展現在頁面上。模版內部可包含多個元素

示例代碼：

<svg>
  <symbol id="template1">
    <rect x="10" y="10" width="100" height="100"
          stroke="#5588aa" stroke-width="5"
          fill="transparent"
    ></rect>
  </symbol>
  <use x="20" y="20" xlink:href="#template1"></use>
  </svg>

三、組元素g

group的簡寫，用來建立分組，組內全部的元素都會繼承g的屬性，能夠嵌套使用，也能夠和use標籤結合使用。另外可以使用transform屬性定義控制整個組的位置。

示例代碼：

<svg>
  <g stroke="#5588aa" stroke-width="5" fill="transparent">
    <rect x="10" y="10" width="100" height="100"></rect>
    <rect x="120" y="120" width="100" height="100"></rect>
  </g>
</svg>

g標籤內部的兩個矩形，都會繼承g標籤的樣式。

四、clipPath裁剪元素

lipPath元素主要用來剪裁元素，clipPath元素定義範圍外的內容將不會被展現。另外要注意寫在<clipPath></clipPath>標籤內部的元素不會被顯示，clipPath標籤須要放在defs標籤內。其餘元素在引用clipPath元素時，須要使用clip-path="url(#ID)"。

示例代碼：

<svg height="200" width="200">
    <defs>
      <clipPath id="clip">
        <rect width="100" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
  </svg>

分析圖：

最終效果圖：

【謝謝關注和閱讀，後續新的文章首發：sau交流學習社區：https://www.mwcxs.top/】