資料視覺化-svg入門基礎(二)

saucxs發表於2019-05-20

接上一篇:資料視覺化-svg入門基礎(一),基礎一主要是介紹了svg概念,元素樣式設定等。

svg是(scalable vector graphic)伸縮向量影像。

一、目錄

(1)圖形元素

(2)文字元素

(3)特殊元素

(4)濾鏡元素

(5)漸變元素

 

二、圖形元素

1、矩形

矩形使用<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:填充顏色

 

2、圓形

圓形使用<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:半徑

 

3、橢圓形

橢圓形使用標籤<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:垂直方向上的半徑

 

4、線段

線段使用<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座標

 

5、折線和多邊形

折線和多邊形的繪製方法類似,都是用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座標之間使用逗號分開。

 

6、路徑

路徑使用標籤<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,繪製直線將終點與起點連線

再次提醒:大寫字母:表示座標系中使用絕對座標,小寫字母:使用相對座標(相對當前畫筆所在的點)

 

三、文字元素

1、基礎

在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>

 

2、文字路徑

如果要實現文字沿著路徑進行排列,可使用<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>

 

四、特殊元素

1、克隆元素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

 

2、模板元素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>

 

3、組元素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標籤的樣式。

 

4、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>

分析圖:

最終效果圖:

 

相關文章