本文簡介 點贊 + 關註 + 收藏 = 學會了 作為一隻前端,只懂 Vue、React 感覺已經和大家拉不開距離了。 可視化、機器學習等領域 JS 都有涉及到,而可視化方面已經被很多領域用到,比如大屏項目。 可視化領域相關的技術有 canvas 和 SVG ,而這兩個東東是遲早要接觸的了。 在我接觸 ...
本文簡介
點贊 + 關註 + 收藏 = 學會了
作為一隻前端,只懂 Vue
、React
感覺已經和大家拉不開距離了。
可視化、機器學習等領域 JS
都有涉及到,而可視化方面已經被很多領域用到,比如大屏項目。
可視化領域相關的技術有 canvas
和 SVG
,而這兩個東東是遲早要接觸的了。
在我接觸
SVG
之前,我覺得這是一個很高深的東西,有點恐懼。我第一次接觸SVG
是在 iconfont網站,我沒理它是什麼東西,反正就跟著教程用。第二次接觸就是在 《CSS揭秘(圖靈出品)》 這本書,裡面會講到SVG
相關的內容,而我選擇了跳過這部分內容。。。
之後是怎麼學會的我也忘了。
最近時間比較多,就把我懂的知識用人話整理出來,方便查詢。
本文主要把 “可視” 方面的內容整理出來,操作交互方面(動畫、交互事件等) 的內容留到下一篇~
什麼是SVG
在學習 SVG
之前,首先要瞭解 點陣圖 和 矢量圖 的區別。
簡單來說:
- 點陣圖:放大會失真圖像邊緣有鋸齒;是由像素點組成;前端的
Canvas
就是點陣圖效果。 - 矢量圖:放大不會失真;使用
XML
描述圖形。
我在 知乎 上找了一個圖對說明一下。
左邊是點陣圖,右邊是矢量圖
那麼 SVG
是什麼呢?它是矢量圖的其中一種格式。它是用 XML
來描述圖形的。
對於初學 SVG
的前端來說,可以簡單的理解為 “SVG
是一套新標簽”。
所以可以使用 CSS
來設置樣式,也可以使用 JS
對 SVG
進行操作。
SVG的使用方式
使用方法
SVG
的使用方式有很多種,我最推薦直接在 HTML
中直接使用,也就是直接當 HTML
標簽使用。
我在 《SVG 在前端的7種使用方法》 里記錄了幾種使用方法:
- 在瀏覽器直接打開
- 內嵌到
HTML
中(推薦⭐⭐⭐) CSS
背景圖(推薦⭐)- 使用
img
標簽引入(推薦⭐) - 使用
iframe
標簽引入(不推薦❌) - 使用
embed
標簽引入(不推薦❌) - 使用
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軸的半徑
基礎款(只設置寬高)
<svg width="300" height="300" style="border: 1px solid red;">
<rect width="200" height="100"></rect>
</svg>
設置矩形位置
通過 x
和 y
可以設置矩形位置
<svg width="300" height="300" style="border: 1px solid red;">
<rect
x="30"
y="20"
width="200"
height="100"
>
</rect>
</svg>
圓角矩形
<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
其中一個值時,另一個屬性也會使用一樣的值。
比如
<svg width="300" height="300" style="border: 1px solid red;">
<rect
width="200"
height="100"
rx="30"
>
</rect>
</svg>
此時 rx
和 ry
都是 30
。
rect版的圓形
圓角的概念和 CSS
的 border-radius
有點像,所以有沒有一種可能,用 <rect>
也可以畫圓形呢?
<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
: 半徑
<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軸的半徑
<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
: 描邊顏色
<svg width="300" height="300" style="border: 1px solid red;">
<line
x1="30"
y1="40"
x2="200"
y2="180"
stroke="blue"
>
</line>
</svg>
只有 x1
和 x2
,沒有 x3
,也沒有 y3
。
需要註意的是,<line>
需要使用設置 stroke
屬性才會有繪製效果。
折線 polyline
使用 <polyline>
可以繪製折線,基礎屬性有:
points
: 點集stroke
: 描邊顏色fill
: 填充顏色
<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
會出現以下效果:
<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>
會自動閉合(自動將起始點和結束點鏈接起來)。
<svg width="300" height="300" style="border: 1px solid red;">
<polygon points="10 10, 200 80, 230 230"></polygon>
</svg>
直線路徑 path
其實在 SVG
里,所有基本圖形都是 <path>
的簡寫。所有描述輪廓的數據都放在 d
屬性里,d
是 data
的簡寫。
d
屬性又包括以下主要的關鍵字(註意大小寫!):
- M: 起始點坐標,
moveto
的意思。每個路徑都必須以M
開始。M
傳入x
和y
坐標,用逗號或者空格隔開。 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
的方式來展示會更加直觀。
基礎版
<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
也去掉,直接寫點集。
<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
可以閉合路徑。
<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
可以實現相對位置寫法。
<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
里的參數會與前一個點的 x
和 y
進行相加,得到一個新的坐標。
H 和 h
H
後面只需傳入 X坐標
即可,它的 Y坐標
與前一個點相同。
<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"
而 h
和 H
的作用差不多,只不過傳入的數據會和前一個點的 X坐標
相加,形成一個新的點,這就是相對位置。
<svg width="300" height="300" style="border: 1px solid red;">
<path
d="M 10 10 h 100"
stroke="blue"
fill="none"
>
</path>
</svg>
可以講 H
和 h
的例子產生的圖片對照一下。
V 和 v
V
後面只需傳入 Y坐標
即可,它的 X坐標
與前一個點相同。
<svg width="300" height="300" style="border: 1px solid red;">
<path
d="M 10 10 V 100"
stroke="blue"
fill="none"
>
</path>
</svg>
v
和 V
的作用差不多,小寫 v
是一個相對位置。
<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條曲線。
比如這樣,紅線處就將橢圓截取成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個橢圓
通過開始點和結束點裁切,可以得到4條弧線,也就是說2個點可以確定2個相同旋轉角度的橢圓的位置,可以切出4條弧線。
<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種。
- 屬性樣式
- 內聯樣式
- 內部樣式
- 外部樣式
屬性樣式
直接在元素屬性上設置樣式,比如將矩形填充色改成粉紅
<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
稍微有點不同,但初學時不需要瞭解太深入,我們只需將常用的學會即可。
比如填充色、描邊顏色等。
說到顏色,SVG
和 CSS
支持的顏色值其實差不多的,比如:
- 關鍵字: 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
,也就是黑色。
<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 - 1
,0
代表完全透明,1
代表完全不透明。小於 0
的值會被改為 0
,大於 1
的值會被改為 1
。
<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
,圖形預設是沒有描邊顏色的。
<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
是設置描邊的不透明度
<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
,它接收一個數值
<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
會將這串數字重覆一遍,使它的數量變成 偶數個 。
<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
屬性設置偏移量,它接收一個數值類型的值。
<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
: 方頭
<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>
可以看到 square
比 butt
要稍微長一丟丟。
拐角 stroke-linejoin
拐角就是折線的交接點,可以使用 stroke-linejoin
設置,它接收以下屬性:
miter
: 尖角(預設)round
: 圓角bevel
: 平角
<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
的文本對齊方式是以第一個字基線的左下角為基準。
<svg width="400" height="400" style="border: 1px solid red;">
<text>雷猴啊</text>
</svg>
可以看到,文字跑去左上角了。但這並不是我們想要的效果。
SVG
如果沒設置字型大小,它會跟隨父元素的字型大小,一直往上跟跟跟上去。
在本例中,預設字型大小是跟隨了瀏覽器的,也就是 16px
。
如果我們想看到文本,就需要將文字往下移動 16px
,因為本文的對齊方式是以第一個字的基線的左下角為參考,預設的位置坐標是 (0, 0)
,現在要將y軸坐標改成 16px
才能完整顯示文本
<svg width="400" height="400" style="border: 1px solid red;">
<text y="16">雷猴啊</text>
</svg>
設置字型大小 font-size
<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
是一樣的
<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
: 刪除線
<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>
標簽輔助實現
<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>
的樣式。
水平對齊方式
<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
: 在基線下方
<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
就可以讓文字縱向排列。
需要註意英文和中文的文字角度!
<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"
。
<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
屬性獲取圖片的
<svg width="400" height="400" style="border: 1px solid red;">
<image xlink:href="./img.jpg"></image>
</svg>
圖片標簽其實沒什麼好說的,和 HTML
的 <img>
標簽用法差不多。
總結
通過上面這麼多例子應該對 SVG
有一個大致的瞭解了。SVG
在前端編碼中,感覺就像一堆新的標簽。我們只要當它是 HTML
那樣使用就行了。
本文記錄的所有知識點都是 SVG
基礎中的基礎。
下一篇會介紹進階的標簽。比如實現漸變、分組,還會介紹比較難理解的坐標系統。
代碼倉庫
推薦閱讀