SVG 從入門到後悔,怎麼不早點學起來(圖解版)

来源:https://www.cnblogs.com/k21vin/archive/2022/12/19/16993321.html
-Advertisement-
Play Games

本文簡介 點贊 + 關註 + 收藏 = 學會了 作為一隻前端,只懂 Vue、React 感覺已經和大家拉不開距離了。 可視化、機器學習等領域 JS 都有涉及到,而可視化方面已經被很多領域用到,比如大屏項目。 可視化領域相關的技術有 canvas 和 SVG ,而這兩個東東是遲早要接觸的了。 在我接觸 ...


本文簡介

點贊 + 關註 + 收藏 = 學會了


作為一隻前端,只懂 VueReact 感覺已經和大家拉不開距離了。

可視化、機器學習等領域 JS 都有涉及到,而可視化方面已經被很多領域用到,比如大屏項目。

可視化領域相關的技術有 canvasSVG ,而這兩個東東是遲早要接觸的了。


在我接觸 SVG 之前,我覺得這是一個很高深的東西,有點恐懼。我第一次接觸 SVG 是在 iconfont網站,我沒理它是什麼東西,反正就跟著教程用。第二次接觸就是在 《CSS揭秘(圖靈出品)》 這本書,裡面會講到 SVG 相關的內容,而我選擇了跳過這部分內容。。。


之後是怎麼學會的我也忘了。

最近時間比較多,就把我懂的知識用人話整理出來,方便查詢。


本文主要把 “可視” 方面的內容整理出來,操作交互方面(動畫、交互事件等) 的內容留到下一篇~



什麼是SVG

在學習 SVG 之前,首先要瞭解 點陣圖矢量圖 的區別。

簡單來說:

  • 點陣圖:放大會失真圖像邊緣有鋸齒;是由像素點組成;前端的 Canvas 就是點陣圖效果。
  • 矢量圖:放大不會失真;使用 XML 描述圖形。

我在 知乎 上找了一個圖對說明一下。

左邊是點陣圖,右邊是矢量圖

file


那麼 SVG 是什麼呢?它是矢量圖的其中一種格式。它是用 XML 來描述圖形的

對於初學 SVG 的前端來說,可以簡單的理解為 SVG 是一套新標簽”

所以可以使用 CSS 來設置樣式,也可以使用 JSSVG 進行操作。



SVG的使用方式

使用方法

SVG 的使用方式有很多種,我最推薦直接在 HTML 中直接使用,也就是直接當 HTML 標簽使用。

我在 《SVG 在前端的7種使用方法》 里記錄了幾種使用方法:

  1. 在瀏覽器直接打開
  2. 內嵌到 HTML 中(推薦⭐⭐⭐)
  3. CSS 背景圖(推薦⭐)
  4. 使用 img 標簽引入(推薦⭐)
  5. 使用 iframe 標簽引入(不推薦❌)
  6. 使用 embed 標簽引入(不推薦❌)
  7. 使用 object 標簽引入(不推薦❌)

SVG預設寬高

HTML 中使用 SVG ,直接用 <svg> 標簽即可。

<svg></svg>

在不給 <svg> 設置寬高時,它的預設寬度是 300px ,預設高度是 150px 。這點和 <canvas> 是一樣的。



基礎圖形

HTML 的元素大多數預設都是矩形,SVG 在形狀上更加豐富。


矩形 rect

矩形使用 <rect> 標簽,預設填充色是黑色,當只設置寬高時,渲染出來的矩形就是黑色的矩形。

稍後還會說明如何設置樣式(比如邊框、填充色等),這裡只列出矩形基礎屬性:

  • x: 左上角x軸坐標
  • y: 左上角y軸坐標
  • width: 寬度
  • height: 高度
  • rx: 圓角,x軸的半徑
  • ry: 圓角,y軸的半徑

基礎款(只設置寬高)

file

<svg width="300" height="300" style="border: 1px solid red;">
  <rect width="200" height="100"></rect>
</svg>

設置矩形位置

通過 xy 可以設置矩形位置

file

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    x="30"
    y="20"
    width="200"
    height="100"
  >
  </rect>
</svg>

圓角矩形

file

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="20"
    ry="40"
  >
  </rect>
</svg>

rx 是設置x軸的半徑,ry 設置y軸的半徑。

rx 的最大值是矩形寬度的一半,ry 的最大值是矩形高度的一半。


當只設置 rx 或者 ry 其中一個值時,另一個屬性也會使用一樣的值。

比如

file

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="30"
  >
  </rect>
</svg>

此時 rxry 都是 30


rect版的圓形

圓角的概念和 CSSborder-radius 有點像,所以有沒有一種可能,用 <rect> 也可以畫圓形呢?

file

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="100"
    height="100"
    rx="50"
  >
  </rect>
</svg>

只要把寬高設成一樣,圓角設成寬度的一半就能實現圓形。這是在 HTML 里的實現方式之一。

同理也用 <rect> 實現橢圓,但在 SVG 中是不會這樣做的。因為 SVG 里有專門的圓形和橢圓的標簽。



圓形 circle

圓形使用 <circle> 標簽,基礎屬性有:

  • cx: 圓心在x軸的坐標
  • cy: 圓心在y軸的坐標
  • r: 半徑

file

<svg width="300" height="300" style="border: 1px solid red;">
  <circle
    cx="60"
    cy="80"
    r="50"
  >
  </circle>
</svg>

橢圓 ellipse

橢圓使用 <ellipse> 標簽,基礎屬性有:

  • cx: 圓心在x軸的坐標
  • cy: 圓心在y軸的坐標
  • rx: x軸的半徑
  • ry: y軸的半徑

file

<svg width="300" height="300" style="border: 1px solid red;">
  <ellipse
    cx="100"
    cy="40"
    rx="80"
    ry="30"
  >
  </ellipse>
</svg>

<ellipse><circle> 差不多,只是將半徑拆成x軸和y軸的。


直線 line

直線使用 <line> 標簽,基礎屬性有:

  • x1: 起始點x坐標
  • y1: 起始點y坐標
  • x2: 結束點x坐標
  • y2: 結束點y坐標
  • stroke: 描邊顏色

file

<svg width="300" height="300" style="border: 1px solid red;">
  <line
    x1="30"
    y1="40"
    x2="200"
    y2="180"
    stroke="blue"
  >
  </line>
</svg>

只有 x1x2 ,沒有 x3 ,也沒有 y3

需要註意的是,<line> 需要使用設置 stroke 屬性才會有繪製效果。


折線 polyline

使用 <polyline> 可以繪製折線,基礎屬性有:

  • points: 點集
  • stroke: 描邊顏色
  • fill: 填充顏色

file

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
    fill="none"
  >
  </polyline>
</svg>

points 接受的值是一串點集,點集是兩兩一組表示一個坐標。

其實點集完全不需要用逗號隔開,上面的例子中我使用了逗號隔開,完全是為了讓自己閱讀代碼時比價易懂。一個逗號分隔一個 xy 坐標。


在繪製折線是,我通常是將 fill 設置成 none ,因為 fill 預設值是黑色,如果不設置成 none 會出現以下效果:

file

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
  >
  </polyline>
</svg>

fill 設置成 none 後,必須設置 stroke 為一個有顏色的值,不然不會有渲染效果。


多邊形 polygon

多邊形使用 <polygon> 標簽,基礎屬性和 <polyline> 差不多:

  • points: 點集
  • stroke: 描邊顏色
  • fill: 填充顏色

<polygon> 會自動閉合(自動將起始點和結束點鏈接起來)。


file

<svg width="300" height="300" style="border: 1px solid red;">
  <polygon points="10 10, 200 80, 230 230"></polygon>
</svg>

直線路徑 path

其實在 SVG 里,所有基本圖形都是 <path> 的簡寫。所有描述輪廓的數據都放在 d 屬性里,ddata 的簡寫。

d 屬性又包括以下主要的關鍵字(註意大小寫!):

  • M: 起始點坐標,moveto 的意思。每個路徑都必須以 M 開始。M 傳入 xy 坐標,用逗號或者空格隔開。
  • L: 輪廓坐標,lineto 的意思。L 是跟在 M 後面的。它也是可以傳入一個或多個坐標。大寫的 L 是一個絕對位置
  • l: 這是小寫 L,和 L 的作用差不多,但 l 是一個相對位置
  • H: 和上一個點的Y坐標相等,是 horizontal lineto 的意思。它是一個絕對位置
  • h: 和 H 差不多,但 h 使用的是相對定位
  • V: 和上一個點的X坐標相等,是vertical lineto 的意思。它是一個絕對位置
  • v: 這是一個小寫的 v ,和大寫 V 的差不多,但小寫 v 是一個相對定位。
  • Z: 關閉當前路徑,closepath 的意思。它會繪製一條直線回到當前子路徑的起點。

概念說了一堆,還是用寫 demo 的方式來展示會更加直觀。


基礎版

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 L 50 40 L 100 10"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

上面的例子里,通過1個 M 和3個 L 描繪了3個點。

使用 stroke 設置描邊的顏色,使用 fill="none" 將填充色改成透明。最後就形成上圖的效果。


簡寫

如果全是使用大寫 L 來描述每個點的位置,那可以把 L 也去掉,直接寫點集。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 50 40 100 10"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

上面的 d="M 10 10 50 40 100 10" 等同於 d="M 10 10 L 50 40 L 100 10"


閉合路徑

d 的數據集里,使用 Z 可以閉合路徑。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 L 50 40 L 100 10 Z"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

輪廓坐標相對位置 l

使用 L 的小寫方式 l 可以實現相對位置寫法。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 l 50 40 l 100 10 Z"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

上面的代碼中,d="M 10 10 l 50 40 l 100 10 Z" 等同於 d="M 10 10 L 60 50 L 160 60 Z"

l 里的參數會與前一個點的 xy 進行相加,得到一個新的坐標。


H 和 h

H 後面只需傳入 X坐標 即可,它的 Y坐標 與前一個點相同。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 H 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

上面的代碼中,d="M 10 10 H 100" 等同於 d="M 10 10 L 100 10"


hH 的作用差不多,只不過傳入的數據會和前一個點的 X坐標 相加,形成一個新的點,這就是相對位置。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 h 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

可以講 Hh 的例子產生的圖片對照一下。


V 和 v

V 後面只需傳入 Y坐標 即可,它的 X坐標 與前一個點相同。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 V 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

vV 的作用差不多,小寫 v 是一個相對位置。

file

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 v 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

曲線 - 橢圓弧路徑 path

SVG 中,畫曲線其實有很多種方法。我覺得最簡單的是 橢圓弧曲線,其實還有 貝塞爾曲線三次貝塞爾曲線 等一系列複雜的曲線。但我覺得這對初學者來說可能一下子難以接受,所以我在 《Canvas 從入門到勸朋友放棄(圖解版)》 里也沒寫。之後打算再寫一篇貝塞爾曲線相關的文章騙點贊~


什麼是橢圓弧?

前面講到的 直線路徑 path 是比較好理解的,它把所有點都用直線連接起來即可。只要確定2個點就可以畫出一根線段。


但如果只用兩個點,可以產生無數條曲線。所以需要添加更多的參數來確定如何繪製一條曲線。而在種種方法中,我認為 橢圓弧曲線 是最簡單的。


橢圓弧曲線,顧名思義就是和橢圓有關的。如果在橢圓上選擇兩個點,就可以截取2條曲線。

file

比如這樣,紅線處就將橢圓截取成2段弧線。


橢圓弧公式

SVG 中可以使用 path 配合 A屬性 繪製橢圓弧。

A(rx, ry, xr, laf, sf, x, y)
  • rx: 橢圓X軸半徑
  • ry: 橢圓Y軸半徑
  • xr: 橢圓旋轉角度
  • laf: 是否選擇弧長較長的那一段。0: 短邊(小於180度); 1: 長邊(大於等於180度)
  • sf: 是否順時針繪製。0: 逆時針; 1: 順時針
  • x: 終點X軸坐標
  • y: 終點Y軸坐標

上面的公式中並沒有開始點,開始點是由 M 決定的

也就是說,確定2個點,再確定橢圓半徑,就可畫出2個橢圓

file


通過開始點和結束點裁切,可以得到4條弧線,也就是說2個點可以確定2個相同旋轉角度的橢圓的位置,可以切出4條弧線。

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 紅 -->
  <path
    d="M 125 75 A 100 50 0 0 0 225 125"
    stroke="red"
    fill="none"
  />

  <!-- 黃 -->
  <path
    d="M 125 75 A 100 50 0 0 1 225 125"
    stroke="yellow"
    fill="none"
  />

  <!-- 藍 -->
  <path
    d="M 125 75 A 100 50 0 1 0 225 125"
    stroke="blue"
    fill="none"
  />

  <!-- 綠 -->
  <path
    d="M 125 75 A 100 50 0 1 1 225 125"
    stroke="green"
    fill="none"
  />
</svg>

繪製弧線是比較抽象的,通常我是不會手動繪製的,我會使用 Illustrator 繪製,然後生成 SVG 來使用。



設置樣式的方法

設置 SVG 元素樣式其實和 CSS 差不多,常見的方法有4種。

  • 屬性樣式
  • 內聯樣式
  • 內部樣式
  • 外部樣式

屬性樣式

直接在元素屬性上設置樣式,比如將矩形填充色改成粉紅

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="pink"
  />
</svg>

內聯樣式

把所有樣式寫在 style 屬性里

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
</svg>

內部樣式

將樣式寫在 <style> 標簽里

<style>
  .rect {
    fill: pink;
  }
</style>

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    class="rect"
  />
</svg>

外部樣式

將樣式寫在 .css 文件里,然後在頁面中引入該 CSS 文件。



常用樣式設置

SVG 設置樣式的屬性和 CSS 稍微有點不同,但初學時不需要瞭解太深入,我們只需將常用的學會即可。

比如填充色、描邊顏色等。


說到顏色,SVGCSS 支持的顏色值其實差不多的,比如:

  • 關鍵字: red、pink、blue 等
  • 十六進位: 支持3位或6位,#0f0#00ff00
  • RGB 和 RGBA: 比如 rgb(10, 20, 30)rgba(10, 20, 30, 0.4)
  • HSL 和 HSLA

接下來講到的所有常規屬性,除了在元素屬性上設置之外,都支持在 CSS 中設置。


填充 fill

要填充圖案顏色,可以設置 fill 屬性。這個屬性在前面的例子也使用過多次。

fill 預設是 #000000 ,也就是黑色。

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="greenyellow"
  />
</svg>

也可以使用 none 或者 transparent 將填充色設置成透明。


填充色的不透明度 fill-opacity

如果想讓填充色有點 半透明 的感覺,可以設置 fill-opacity 屬性,也可以在 fill 屬性中使用 RGBA 或者 HSLA

本例使用 fill-opacity 設置,它的取值是 0 - 10 代表完全透明,1 代表完全不透明。小於 0 的值會被改為 0,大於 1 的值會被改為 1

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="red"
    fill-opacity="0.2"
  />
</svg>

fill 屬性中使用 RGBA 或者 HSLA 的方式你自己動手試試看~


描邊顏色 stroke

可以通過 stroke 屬性設置描邊的顏色,之前也使用過。如果不設置 stroke ,圖形預設是沒有描邊顏色的。

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
  />
</svg>

我將填充色設置成透明,方便觀察藍色邊框。


描邊顏色的不透明度 stroke-opacity

fill-opacity 差不多,只不過 stroke-opacity 是設置描邊的不透明度

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-opacity="0.3"
  />
</svg>

描邊寬度 stroke-width

如果需要調整描邊的寬度,可以使用 stroke-width,它接收一個數值

file

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-width="10"
  />
</svg>

虛線描邊 stroke-dasharray

邊框的 點線 或者 虛線 樣式,可以使用 stroke-dasharray 設置,這和 Canvas 里設置虛線的操作其實是差不多。

stroke-dasharray 接收一串數字,這串數字可以用來代表 線的長度和空隙的長度,數字之間用逗號或者空格分隔。

建議傳入偶數個數字。但如果你傳入了奇數個數字,SVG 會將這串數字重覆一遍,使它的數量變成 偶數個

file

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
  />

  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-dasharray="20 10"
  />

  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-dasharray="20 10 30"
  />
</svg>

虛線偏移量 stroke-dashoffset

虛線還可以通過 stroke-dashoffset 屬性設置偏移量,它接收一個數值類型的值。

file

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
  />

  <line
    x1="30"
    y1="90"
    x2="300"
    y2="90"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
    stroke-dashoffset="10"
  />
</svg>

我加粗了虛線,方便觀察偏移量。


線帽 stroke-linecap

線帽就是線的起始點和結束點的位置,用 stroke-linecap 屬性可以設置線帽樣式。

線帽有3個值:

  • butt: 平頭(預設值)
  • round: 圓頭
  • square: 方頭

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 平頭 -->
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="butt"
  />

  <!-- 圓頭 -->
  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="round"
  />

  <!-- 方頭 -->
  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="square"
  />
</svg>

可以看到 squarebutt 要稍微長一丟丟。


拐角 stroke-linejoin

拐角就是折線的交接點,可以使用 stroke-linejoin 設置,它接收以下屬性:

  • miter: 尖角(預設)
  • round: 圓角
  • bevel: 平角

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 尖角 -->
  <polyline
    points="30 60, 60 30, 90 60"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="miter"
  />

  <!-- 圓角 -->
  <polyline
    points="30 120, 60 90, 90 120"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="round"
  />

  <!-- 平角 -->
  <polyline
    points="30 180, 60 150, 90 180"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="bevel"
  />
</svg>

消除鋸齒 shape-rendering

如果你覺得 SVG 在瀏覽器顯示出來的圖像有點模糊,那可能是開啟了 反鋸齒 功能,可以通過 CSS 屬性關閉該功能。

shape-rendering: crispEdges;

將該屬性設置到對應的 svg 元素上,就會關閉反鋸齒功能,突顯看起來就會清晰很對,但在某些情況關閉了該功能會讓圖像看起來有點毛躁的感覺。


如果想開啟反鋸齒功能,可以這樣設置:shape-rendering: geometricPrecision;



文本元素 text

SVG 可以使用 <text> 標簽渲染文本。文本是有 “基線” 概念的,這個概念和 CSS 的一樣。這裡推薦 AndyHu 的文章,可以快速搞懂基線。《徹底搞懂vertical-align 底線、基線、中線的含義》


基礎版

Canvas 一樣,SVG 的文本對齊方式是以第一個字基線的左下角為基準。

file

<svg width="400" height="400" style="border: 1px solid red;">
  <text>雷猴啊</text>
</svg>

可以看到,文字跑去左上角了。但這並不是我們想要的效果。

SVG 如果沒設置字型大小,它會跟隨父元素的字型大小,一直往上跟跟跟上去。

在本例中,預設字型大小是跟隨了瀏覽器的,也就是 16px

如果我們想看到文本,就需要將文字往下移動 16px,因為本文的對齊方式是以第一個字的基線的左下角為參考,預設的位置坐標是 (0, 0) ,現在要將y軸坐標改成 16px 才能完整顯示文本


file

<svg width="400" height="400" style="border: 1px solid red;">
  <text y="16">雷猴啊</text>
</svg>

設置字型大小 font-size

file

<svg width="400" height="400" style="border: 1px solid red;">
  <text
    y="60"
    font-size="60"
  >
    雷猴啊
  </text>
</svg>

粗體 font-weight

使用 font-weight 可以將文本設置成粗體。

  • normal: 預設(非粗體)
  • bold: 粗體

這和 CSS 是一樣的


file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 預設 -->
  <text
    y="60"
    font-size="60"
    font-weight="normal"
  >
    雷猴啊
  </text>

  <!-- 粗體 -->
  <text
    y="140"
    font-size="60"
    font-weight="bold"
  >
    雷猴啊
  </text>
</svg>

裝飾線 text-decoration

CSS 一樣,可以使用 text-decoration 設置裝飾線

  • none:預設
  • underline: 下劃線
  • overline: 上劃線
  • line-through: 刪除線

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 預設 -->
  <text
    y="30"
    font-size="30"
    text-decoration="none"
  >
    雷猴啊
  </text>

  <!-- 上劃線 -->
  <text
    y="100"
    font-size="30"
    text-decoration="overline"
  >
    雷猴啊
  </text>

  <!-- 刪除線 -->
  <text
    y="170"
    font-size="30"
    text-decoration="line-through"
  >
    雷猴啊
  </text>

  <!-- 下劃線 -->
  <text
    y="240"
    font-size="30"
    text-decoration="underline"
  >
    雷猴啊
  </text>
</svg>

水平對齊方式 text-anchor

可以通過 text-anchor 屬性設置文本水平對齊方式。

如果本子是從左向右書寫,那這幾個參數的意思就是:

  • start: 左對齊
  • middle: 居中對齊
  • end: 右對齊

多行文本

多行文可以使用本 <tspan> 標簽輔助實現

file

<svg width="400" height="400" style="border: 1px solid red;">
  <text fill="blue">
    <tspan x="10" y="30" fill="red">雷猴</tspan>
    <tspan x="10" y="60">鯊魚辣椒</tspan>
    <tspan x="10" y="90">蟑螂惡霸</tspan>
    <tspan x="10" y="120">蝎子萊萊</tspan>
  </text>
</svg>

<tspan> 要放在 <text> 里,而且會繼承 <text> 設置的樣式。

如果在 <tspan> 里設置的樣式和 <text> 的樣式有衝突,最後會使用 <tspan> 的樣式。


水平對齊方式

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 參考線 -->
  <path d="M 200 0 200 400" stroke="red"></path>

  <!-- 左對齊 -->
  <text
    x="200"
    y="100"
    text-anchor="start"
  >
    雷猴
  </text>

  <!-- 居中對齊 -->
  <text
    x="200"
    y="130"
    text-anchor="middle"
  >
    雷猴
  </text>

  <!-- 右對齊 -->
  <text
    x="200"
    y="160"
    text-anchor="end"
  >
    雷猴
  </text>
</svg>

垂直對齊方式 dominant-baseline

可以通過 dominant-baseline 屬性設置文本垂直對齊方式

  • auto: 預設的對齊方式,保持與父元素相同的配置。
  • text-after-edge: 在基線上方
  • middle: 居中基線
  • text-before-edge: 在基線下方

file

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 參考線 -->
  <path d="M 0 200 400 200" stroke="red"></path>

  <!-- 預設 -->
  <text
    x="20"
    y="200"
    dominant-baseline="auto"
  >
    雷猴
  </text>

  <!-- 在基線上方 -->
  <text
    x="80"
    y="200"
    dominant-baseline="text-after-edge"
  >
    雷猴
  </text>

  <!-- 居中基線 -->
  <text
    x="160"
    y="200"
    dominant-baseline="middle"
  >
    雷猴
  </text>

  <!-- 在基線下方 -->
  <text
    x="240"
    y="200"
    dominant-baseline="text-before-edge"
  >
    雷猴
  </text>
</svg>

縱向文字 writing-mode

writing-mode 設置成 tb 就可以讓文字縱向排列。

需要註意英文和中文的文字角度!


file

<svg width="400" height="400" style="border: 1px solid red;">
  <text x="20" y="20" writing-mode="tb">Hello World!</text>
  <text x="100" y="20" writing-mode="tb">鯊魚辣椒</text>
</svg>

有些教程裡面會講 glyph-orientation-vertical 屬性可以旋轉文字方向,但不推薦這個方法,因為現在的瀏覽器可能不再支持它了。

可以看看這個文檔的說明:《glyph-orientation-vertical》



超鏈接

HTML 一樣,超鏈接可以使用 <a> 標簽實現。

SVG 里,鏈接要放在 xlink:href 屬性里。

如果希望滑鼠放到鏈接上出現提示信息,可以在 xlink:title 屬性里編寫提示信息。

如需在新視窗打開鏈接,可以設置 target="_blank"


file

<svg width="400" height="400" style="border: 1px solid red;">
  <a xlink:href="https://juejin.cn/post/7116784455561248775" xlink:title="canvas" target="_blank">
    <text x="20" y="20">也學學Canvas吧</text>
  </a>
</svg>

此時點擊圖片上的鏈接就會跳到對應的頁面。


<a> 標簽里除了可以包裹文本外,還可以包裹各種圖形和圖片等元素。



圖片 image

SVG 中可以使用 <image> 標簽載入圖片,包括點陣圖。

<image> 是使用 xlink:href 屬性獲取圖片的

file

<svg width="400" height="400" style="border: 1px solid red;">
  <image xlink:href="./img.jpg"></image>
</svg>

圖片標簽其實沒什麼好說的,和 HTML<img> 標簽用法差不多。



總結

通過上面這麼多例子應該對 SVG 有一個大致的瞭解了。SVG 在前端編碼中,感覺就像一堆新的標簽。我們只要當它是 HTML 那樣使用就行了。


本文記錄的所有知識點都是 SVG 基礎中的基礎。

下一篇會介紹進階的標簽。比如實現漸變、分組,還會介紹比較難理解的坐標系統。



代碼倉庫

雷猴 SVG



推薦閱讀


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Azure App Service 提供了一個應用內的MySQL,可以供測試、開發使用。 前提條件是需要使用Windows的操作系統。 創建完App Server 之後,只需要在設置下開啟 MySQL In App 即可。 在應用中可以從環境變數中獲取連接字元串。 var mysqlconnstr ...
  • 作者:鄭龍飛 範式定義 百度百科:設計關係資料庫時,遵從不同的規範要求,設計出合理的關係型資料庫,這些不同的規範要求被稱為不同的範式,各種範式呈遞次規範,越高的範式資料庫冗餘越小。 人類語言: 範式可以理解為設計一張數據表的表結構,符合的標準級別、規範和要求。 而通常我們用的最多的就是第一範式(1N ...
  • 摘要:GaussDB(DWS)提供了資源管理功能,用戶可以根據自身業務情況對資源進行劃分,將資源按需劃分成不同的資源池,不同資源池之間資源互相隔離。 本文分享自華為雲社區《GaussDB(DWS)資源管理排隊原理與問題定位》,作者: 門前一棵葡萄樹 。 一、記憶體管控原理 GaussDB(DWS)提供 ...
  • Redis——02 前面瞭解了 Redis 以及在 Linux 的安裝,下麵瞭解一些 Redis 常用的命令。 Redis 常用命令: Redis 是 Key-Value 形式,Key 為字元串類型,而 Value 的取值類型如下: String 字元串 Hash 哈希表 List 列表 Set 集 ...
  • 摘要:以下提供的都是各個資料庫較為官方的jar包獲取方式。 本文分享自華為雲社區《JDBC連接相關jar包獲取及上傳管理中心白名單處理》,作者:HuaWei XYe。 jar包獲取 以下提供的都是各個資料庫較為官方的jar包獲取方式 1、Mysql https://dev.mysql.com/dow ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:葉金榮 文章來源:社區原創 可能會執行非常慢,線上生產環境千萬別寫出這種SQL ... 背景交代 用 tpcc-mysql 工具生成 50個倉庫 ...
  • 1. 判斷本地是否已經安裝MySQL ① 在運行界面輸入services.msc進入服務界面,查看是否有MySQL服務 ② 進入任務管理器,點擊服務看是否有MySQL服務 2. 安裝MySQL(壓縮包版) 1. 下載MySQL社區伺服器(ZIP): MySQL zip下載 點擊No thanks,j ...
  • 華為運動健康服務(HUAWEI Health Kit)提供原子化數據開放,用戶數據被授權獲取後,應用可通過介面訪問運動健康數據,對相關數據進行增、刪、改、查等操作。這篇文章彙總了申請開通Health Kit測試許可權的常見問題,並給出了詳細解答,希望為開發者提供相關參考。 (1) 申請Health K ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...