SVG入門指南(看完,對SVG結構不在陌生)

NO IMAGE

你知道的越多,你不知道的越多

點贊再看,養成習慣

本文 GitHub:github.com/qq449245884… 上已經收錄,更多往期高贊文章的分類,也整理了很多我的文檔,和教程資料。歡迎Star和完善,大家面試可以參照考點複習,希望我們一起有點東西。

SVG 簡介

SVG,即可縮放矢量圖形(Scalable Vector Graphics),是一種 XML 應用,可以以一種簡潔、可移植的形式表示圖形信息。目前,人們對 SVG 越來越感興趣。大多數現代瀏覽器都能顯示 SVG 圖形,並且大多數矢量繪圖軟件都能導出 SVG 圖形。SVG 主要可以概括為以下幾點:

  • SVG 指可伸縮矢量圖形
  • SVG 用來定義網絡的基於矢量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
  • SVG 是萬維網聯盟的標準
  • SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

SVG 的應用

  1. 圖表視圖(echart)、地圖視圖(WEB-GIS)
  2. 形象(AI)的全網應用
  3. UI 產品的設計
  4. SVG 動畫

SVG 瀏覽器的兼容情況

SVG入門指南(看完,對SVG結構不在陌生)

SVG 與 Canvas 區別

SVG入門指南(看完,對SVG結構不在陌生)

圖形系統

計算機中描述圖形信息的兩大系統是柵格圖形和矢量圖形。

柵格圖形

在柵格圖形系統中,圖像被表示為圖片元素或者像素的長方形數組如下圖片所示。每個像素用其 RGB 顏色值或者顏色表內的索引表示。這一系列也稱為 位圖,通過以某種壓縮格式存儲。由於大多數現代顯示設備也是柵格設備,顯示圖像時僅需要一個閱讀器將位圖解壓並將它傳輸到屏幕上。

SVG入門指南(看完,對SVG結構不在陌生)

矢量圖形

矢量圖是基於數學的描述,如下圖的多啦A夢,他的頭是一條怎麼樣的貝塞爾曲線,它的參數是什麼及用什麼顏色來填充貝塞爾曲線,通過這種方式描述圖片就是矢量圖形

想象一下在一張繪圖紙上作圖的過程,柵格圖形的工作就像是描述哪個方格應該填充什麼顏色,而矢量圖形的工作則像是描述要繪製從某個點到另一個點的直線或曲線。

創建 SVG 圖像

SVG 文檔基本結構

如下所示,是一個 SVG 文檔結構:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
</svg>

根元素 <svg> 以像素為單位定義了整個圖像的 widthheight,還通過 xmlns 屬性定義了 SVG 的命名空間。<title> 元素的內容可以被閱讀器顯示在標題欄上或者是作為鼠標指針指向圖像時的提示, <desc> 元素允許咱們為圖像定義完整的描述信息。

基本形狀和屬性

基本圖形

<rect><circle><ellipse><line><polyline><polygon>

基本屬性

fillstrokestroke-widthtransform

基本形狀 — 圓形

SVG入門指南(看完,對SVG結構不在陌生)

咱們可以通過 <circle> 元素來繪製貓的臉部。元素屬性的中心點 x 座標和 y 座標以為半徑。點(0,0) 為圖像左上角。水平向右移動時 x 座標增大,垂直向下移動時 y 座標增大。為了避免一些誤會,API 語義就很明確了,點 (cx, cy) 就表示圓心的位置,r 表示圓的半徑。

繪圖的顏色是表現的一部分,表現信息包含在 style 屬性中,這裡的輪廓顏色為黑色,填充顏色為 none 以使貓的臉部透明。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
</svg>      

SVG入門指南(看完,對SVG結構不在陌生)

指定樣式的屬性

接著在添加兩個圓表示兩個眼睛。上面的 strokefill 是寫在 style 裡面的,但是 SVG 也允許咱們使用單獨的屬性,而不用全部寫在 style 內,如下所示:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

圖形對象分組

接著使用兩個 <line> 元素在貓的右臉上添加鬍鬚,先看下線的示意圖:

SVG入門指南(看完,對SVG結構不在陌生)

這很好理解,就不多說了。 這裡我們需要把鬍鬚作為一個部件,幷包裝在分組元素 <g> (後面會講)裡面,然後給下 id ,如下所示:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<g id='whiskers'>
<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
</g>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

圖形對象分組

接著使用 <use> 複用鬍鬚分組並將它變換(transfrom) 為左側鬍鬚,如下圖所示,首先在 scale 變換中對 x 座標乘以 -1,翻轉座標系統。這意味原始座標系統中的點(75, 95) 現在位於 (-75, 95)。接著通過 translate 向左平移調整對應的位置。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<g id='whiskers'>
<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
</g>
<use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

其他基本圖形

如下圖所示,咱們使用 <polyline> 元素構建嘴和耳朵,它接受一對 xy 座標為 points 屬性的值。你可以使用空格或者逗號分隔這些數值。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<g id='whiskers'>
<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
</g>
<use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
<!-- 耳朵 -->
<polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
style='stroke:black; fill:none' />
<!-- 嘴 -->
<polyline points='35 110,45 120, 95 120, 105, 110'
style='stroke:black; fill:none'/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

路徑

所有的基本形狀都是通用的 <path> 元素的快捷寫法。接著使用 <path> 元素為貓添加鼻子。如下所示的代碼,翻譯過來就是 “移動到座標(75, 90)。繪製一條到座標(65,90) 的直線。然後以 x 半徑為 5y 半徑為 10 繪製一個橢圓,最後回到座標 (75, 90) 處”

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<g id='whiskers'>
<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
</g>
<use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
<!-- 耳朵 -->
<polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
style='stroke:black; fill:none' />
<!-- 嘴 -->
<polyline points='35 110,45 120, 95 120, 105, 110'
style='stroke:black; fill:none'/>
<!-- 鼻子 -->
<path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'
style='stroke:black; fill:#ffcccc'
/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

路徑

由於這只是一個簡單的圖形,用戶可能看不出這是一隻貓,所以咱們可以使用 元素添加一些文本註釋。在 元素中,x 和 y 屬性用於指定文本的位置,如下所示:

<svg width='140' height='170' 
xmlns='http://wwww.w3.org/2000/svg'
xmlns:xlink='http://wwww.w3.org/1999/xlink'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
<g id='whiskers'>
<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
</g>
<use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
<!-- 耳朵 -->
<polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
style='stroke:black; fill:none' />
<!-- 嘴 -->
<polyline points='35 110,45 120, 95 120, 105, 110'
style='stroke:black; fill:none'/>
<!-- 鼻子 -->
<path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'
style='stroke:black; fill:#ffcccc'
/>
<text x="60" y="165" style='font-family:sans-serif;font-size: 14pt;
stroke:none; fill: black;
'>Cat</text>

SVG入門指南(看完,對SVG結構不在陌生)

如果看不懂代碼,沒關係,後面幾章節會深入這些基本及屬性。

在網頁中使用 SVG

SVG 是一種圖件格式,因此可以使用與其他圖像類型相同的方式包含在 HTML 頁面中。具體可以採用兩種方法:將圖像包含在 <img> 元素內(當圖像是頁面的基本組成部分時,推薦這種方式);或者將圖像作為另一個元素的 CSS 樣式屬性插入(當圖像主要用來裝飾時,推薦這種方式)。

SVG入門指南(看完,對SVG結構不在陌生) 元素內包含 SVG

<img> 元素內包含 SVG 圖像非常簡單,只需設置 src 指向 SVG 文件位置即可。如下:

<img src='cat.svg' alt=''/>

在 CSS 中包含 SVG

可以使用 background-image 屬性來顯示 SVG,如果沒有固有尺寸, SVG 會被縮放為元素高度和寬度的 100%,如下所示:

div.background-cat {
background-image: url('cat.svg');
background-size: 100% 100%;
}

使用 object 標籤引入 SVG (不推薦)

<object> 元素的 type 屬性表示要嵌入的文件類型。這個屬性應該是一個有效的網絡媒體類型(通常被稱為 MIME 類型)。對於 SVG,使用 type='image/svg+xml'。如下所示:

<object data='cat.svg' type='image/svg+xml' 
width='100' height='100'/>

在網頁中直接使用 SVG 標籤

直接引用 svg 定即可,如下所示:

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在這裡繪製圖像 -->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
</svg>    

SVG 的視窗,視野和全局(世界)

視窗

SVG的屬性widthheight來控制視窗的大小,也稱為SVG容器

世界

SVG裡面的代碼,就是對SVG世界的定義

視野

世界是無窮大的,視野是觀察世界的一個矩形區域。如下圖所示

SVG入門指南(看完,對SVG結構不在陌生)

世界不可變,而視野是可以改變的。在SVG中,提供了viewBoxpreserveAspectRatio屬性來控制視野。

線段

SVG 可以使用 元素畫出一條直線,使用只需要指定線段的起(x1, y1)止(x2, y2)點。

SVG入門指南(看完,對SVG結構不在陌生)

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
<line x1='0' y1='0' x2='100' y2='100' style='stroke:black'/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

筆畫的特性

線段可以看作畫面上畫出來的筆畫。筆畫的尺寸、顏色和風格都會影響線段的表現。這些特性都可以在 style 屬性指定。

stroke-width

stroke-width 是設置線段的粗細,如下所示:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
<line x1='0' y1='0' x2='100' y2='100' style='stroke-width:10;stroke:black'/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

筆畫的顏色和透明度

可以通過以下幾種方式指定筆畫顏色:

  • 基本顏色關鍵字: aqua、black、blue、fuchsia、gray、green 等
  • 由 6 位十六進制指定的顏色,形式為 #rrggbb,其中 rr 表示紅色, gg 表示綠色, bb 表示藍色,它們的範圍都是 00--ff
  • 由 3 位十六進制指定的顏色,形式為 #rgb,其中 r 表示紅色,g 表示綠色, b 表示藍色,它們的範圍都是 0-f
  • 通過 rgb() 形式指定的 rgb 顏色值,每個值的取值範圍都是整數 0-255 或者百分比 0 - 100%
  • currentColor 關鍵字,表示當前元素應用的 CSS 屬性 color 的值。color 是用來給 HTML 的文本設置顏色的,會被子元素繼承,但對 SVG 沒有直接效果。

線段都是實線,咱們也可以使用 stroke-opacity 來控制線的透明度,取值範圍和 CSS 一樣 0.0-1.0,來幾個例子演示一下:

來幾個例子演示一下:

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
<!-- 紅色 -->
<line x1='10' y1='10' x2='50' y2='10' style='stroke-width:5;stroke:red'/>
<!-- 談綠色 -->
<line x1='10' y1='20' x2='50' y2='20' style='stroke-width:5;stroke:#9f9f;stroke-opacity: 0.2' />
<!-- 橘色 -->
<line x1='10' y1='40' x2='50' y2='40' style='stroke-width:5;stroke:rgb(255,128,64);stroke-opacity: 0.5' />
<!-- 深紫色 -->
<line x1='10' y1='50' x2='50' y2='50' style='stroke-width:5;stroke:rgb(60%,20%,60%);stroke-opacity: 0.8' />
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

如果不指定筆畫顏色的話,將看不到任何線,因為 stroke 屬性的默認值是 none

stroke-dasharray 屬性

有時咱們需要點線和虛線,剛需要使用 stroke-dasharray 屬性,它的值由一列數字構成,代表線的長度和空隙的長度,數字之間用逗號或空格隔開。數字的個數應該為偶數,但如果是奇數,則 SVG 會重複幾次,讓總數為偶數。

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
<!-- 9個像素的虛線,5個像素的空隙 -->
<line x1='10' y1='10' x2='100' y2='10'
style='stroke-dasharray:9, 5; stroke: black; stroke-width:2'
/>
<!-- 5個像素的虛線,3個像素的空隙 ,9個像素的虛線,2個像素的空隙 -->
<line x1='10' y1='30' x2='100' y2='30'
style='stroke-dasharray:9, 5, 9, 2; stroke: black; stroke-width:2' />
<!-- 複製奇數個數 -->
<line x1='10' y1='50' x2='100' y2='50'
style='stroke-dasharray:9, 3, 5; stroke: black; stroke-width:2' />
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

矩形

SVG入門指南(看完,對SVG結構不在陌生)

矩形是最簡單基本形狀,只需要其左上角 xy 座標以及它的寬度(width)和高度(height),如果想要指定圓角,可以指定 rx(x方向的圓角半徑),該最大值是矩形寬度的一半,同理,ry(y 方向的圓角半徑),該最大值是矩形高度的一半。如果只指定了 rxry 中的一個值,則認為它們相等,矩形內部還可以使用 fill 屬性來填充顏色,默認為黑色,用 stroke 來繪製邊框,默認透明。來幾個例子看看。

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'>
<!-- 內部填充為黑色,不繪製邊框 -->
<rect x='10' y='10' width='30' height='50'/>
<!-- 內部填充為藍色,繪製較粗,半透明紅色邊框-->
<rect x='50' y='10' width='30' height='50'
style='fill: #0000ff;stroke: red;stroke-width: 7; stroke-opacity: .5'/>
<!-- rx 和 ry 相等,逐漸增大-->
<rect x='10' y='70' rx='2' ry='2' width='20' height='40' 
style='stroke:black; fill:none'/>ry5'
<!-- rx 和 ry 相等,逐漸增大-->
<rect x='50' y='70' rx='5'  width='20' height='40' 
style='stroke:black; fill:none' />
<!-- rx 和 ry 不相等 -->
<rect x='10' y='130' rx='10' ry='5' width='20' height='40' style='stroke:black; fill:none' />
<rect x='50' y='130' rx='10' ry='5' width='10' height='40' style='stroke:black; fill:none' />
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

圓和橢圓

SVG入門指南(看完,對SVG結構不在陌生)

SVG入門指南(看完,對SVG結構不在陌生)

畫一個圓,需要使用 <circle> 元素,並指定圓心的 xy 座標(cx/cy) 以及半徑(r)。和矩形一樣,不指定 fill 和 stroke 時,圓會使用黑色填充並且沒有輪廓線。

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'>
<circle cx='30' cy='30' r='20' style='stroke:black; fill:none'/>
<circle cx='80' cy='30' r='20' style='stroke-width:5;stroke:black; fill:none' />
<ellipse cx='30' cy='80' rx='10' ry='20'
style='stroke:black; fill:none'
/>
<ellipse cx='80' cy='80' rx='20' ry='10'
style='stroke:black; fill:none'
/>
</svg>

對於橢圓來說,除了指定圓心和座標外,還需要同時指定 x 方向的半徑和 y 方向的半徑,屬性分為是 rxry。對於圓和橢圓來說,如果省略 cx 或者 cy ,則默認為 0,如果半徑為 0,則不會顯示圖形,如果半徑為負數,則會報錯。來幾個例子看看:

SVG入門指南(看完,對SVG結構不在陌生)

多邊形

SVG入門指南(看完,對SVG結構不在陌生)

咱們可以使用 <polygon> 元素繪製多邊形,使用 points 屬性指定一系列的 x/y 座標對,並用逗號或者空格分隔座標個數必須是偶數。指定座標不需要在最後指定返回起始座標, <polygon> 元素會自動回到起始座標。來幾個例子看看:

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
<!--平等四邊形-->
<polygon points='15,10 55,10 45,20 5,20'
style='fill:red; stroke: black;'
/>
<!--五角星-->
<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: #ccffcc; stroke: green;'
/>
<!--不規則圖形-->
<polygon points='60 60, 65,72 80 60, 90,90 72,85 50,95'
style="fill: yellow; fill-opacity:.5; stroke:black"
/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

從上面很容易看出多邊形都很容易填充,因為多邊形的各邊都沒有交叉,很容易區分出多邊形的內部區域和外部區域。但是,當多邊形彼此交叉的時候,要區分哪些區域是圖形內部並不容易。如下如融合所示,中間的區域是算內部還是外部呢?

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
<polygon points='48,16 16,96 96,48 0,48 80,96'
style='fill:none; stroke: black;'
/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

SVG有兩種判斷某個點是否在多邊形中的規則。分別對應fill-true屬性的nonezero(默認值)和evenodd。其效果圖分別如下:

<body style='padding: 100px 0 0 200px'>
<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
<polygon points='48,16 16,96 96,48 0,48 80,96'
style='fill-rule: nonzero; fill:yellow; stroke: black;'
/>
<polygon points='148,16 116,96 196,48 100,48 180,96'
style='fill-rule: evenodd; fill:red; stroke: black;' />
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

折線

SVG入門指南(看完,對SVG結構不在陌生)

<polyline> 元素與 有相同的屬性,不同之處在於圖形並不封閉,直接來個事例看看:

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
<polyline points="5,20 20,20 25,10 35,30 45,10
55,30 65,10 74,30 80,20 95,20"
style="stroke:black; stroke-width:3; fill:none"
/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

總結

形狀元素

線段:<line x1=" " y1=" " x2=" " y2=" " style=" "/>

矩形:<rect x=" "  y=" "  width=" "  height=" "  style=" "/>

圓角矩形:<rect x=" "  y=" "  rx=" "  ry=" "  style=" "/>

圓形:<circle cx=" "  cy=" "  r=" " style=" "/>

橢圓形:<ellipse cx=" "  cy=" "  rx=" "  ry=" "  style=" " />

多邊形:<polygon points="      "  style=" "/>

折線:<polyline points="    "  style=" "/> //注意需把fill設成none

SVG有兩種判斷某個點是否在多邊形中的規則。分別對應fill-true屬性的nonezero(默認值)和evenodd。其效果圖分別如下:

SVG入門指南(看完,對SVG結構不在陌生)

筆畫特性:

屬性
stoke筆畫顏色,默認為none
stroke-opacity筆畫透明度,默認為1.0(完全不透明),值範圍:0.0~1.0
stroke-dasharray用一系列數字指定虛線和間隙的長度,如:stroke-dasharray:5,10,5,20
stroke-linecap線頭尾的形狀:butt(默認)、round、square
stroke-linejoin圖形的稜角或一系列連線的形狀:miter(尖的,默認值)、round(圓的)、bevel(平的)
stroke-miterlimit相交處顯示寬度與線寬的最大比例,默認為4

填充顏色

屬性
fill指定填充顏色,默認值為 black
fill-opacity從 0.0 到 1.0 的數字, 0.0 表示完全透明, 1.0(默認值) 表示完全不透明
fill-rule屬性值為 nonzero (默認值) 或 evenodd。

在 SVG 中使用樣式

在 SVG 的使用樣式中 CSS 很相似,主要有 4 種,分別如下:

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

內聯樣式

用法跟 css 一樣,如下所示:

<line style="fill:yellow;stroke:blue;stroke-width=4" x1="10" y1="10" x2="100" y2="100"/>* 

內部樣式表

用法也跟 css 的類名一樣,如下所示:

.linestyle{
stroke:red;
stroke-width:2;
}
// 那麼在使用標籤時,指定此樣式即可:
<line class="linestyle" x1="10" y1="10" x2="100" y2="100"/>

外部樣式表

跟 CSS 用法一樣,把樣式寫在另外文件中,然後導入使用。

表現屬性

咱們可能通過 style 屬性修改樣式,當然 style 裡面的屬性值,可以單獨寫,這種也叫表現屬性:

<circle cx='10' cy='10' r='5'
fill='red' stroke='black' stroke-width='2'/>    

分組與引用對象

雖然可以將所有的繪圖看成是由一系列幾乎一樣的形狀和線條組成的,但通常咱們還是認為大多數非抽象的藝術作品是由一系列命名對象組成的,而這些對象由形狀和線條組合而成。SVG 提供了一些元素,允許咱們對元素進行這樣的分組,從而使文檔更加結構化以及更易理解。

<g> 元素

1)<g>元素會將所有子元素作為一個組合,通常還有一個唯一的id作為名稱;
2)每個組合還可以擁有自己的<title><desc>來供基於文本的xml應用程序識別或者為視障用戶提供更好的可訪問性;
3)閱讀器會讀取<title><desc>元素的內容。鼠標懸停或者輕觸組合內的圖形時,會顯示<title>元素內容的提示框。
4)<g>元素可以組合元素並可以提供一些註釋,組合還可以比較嵌套;

在起始 標籤中指定的所有樣式會應用於組合內的所有子元素,如下面示例所示,咱們可以不用複製每個元素上的 style='fill:none; stroke:black;'

 <svg width='240' height='240' xmlns='http://wwww.w3.org/2000/svg'>
<title>歡樂一家人</title>
<desc>一家人在一起就是簡單幸福的了</desc>
<g id='house' style='fill:none; stroke:black'>
<desc>房子</desc>
<rect x='6' y='50' width='60' height='60'/>
<polyline points='6 50, 36 9, 66 50' />
<polyline points='36 110, 36 80, 50 80, 50 110' />
</g>
<g id='man' style='fill:none; stroke:green'>
<desc>男人</desc>
<circle cx='85' cy='56' r='10'/>
<line x1='85' y1='66' x2='85' y2='80'/>
<polyline points='76 104, 85 80, 94 104'/>
<polyline points='76 70, 85 76, 94 70'/>
</g>
<g id='woman' style='fill:none; stroke:red'>
<desc>女人</desc>
<circle cx='110' cy='56' r='10'/>
<polyline points='110 66, 110 80, 100 90, 120 90, 110 80'/>
<line x1='104' y1='104' x2='108' y2='90'/>
<line x1='112' y1='90' x2='116' y2='104'/>
<polyline points='101 70, 110 76, 119 80'/>
</g>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

<use> 元素

1)複雜的圖形中經常會出現重複元素,svg 使用<use>元素為定義在<g>元素內的組合或者任意獨立圖形元素提供了類似複雜黏貼的能力;
2)定義了一組<g>圖形對象後,使用<use>標籤再次顯示它們。要指定想要的重用的組合就給xlink:href屬性指定URI即可,同時還要指定xy的位置以表示組合應該移動到的位置。
3)<use>元素並不限制只使用在同一個文件內的對象,還可以指定任意有效的文件或者URI.

因此為了創建另一個上面的房子和一組小人,只要把下面的代碼入 <svg> 元素裡面即可。

<use xlink:href='#house' x='70' y='100'/>
<use xlink:href='#woman' x='-80' y='100'/>
<use xlink:href='#man' x='-30' y='100'/>  

SVG入門指南(看完,對SVG結構不在陌生)

<defs>元素

上面例子有幾個缺點:

  • 複用 manwoman 組合時,需要知道原始圖像中這些圖形的位置,並以此位置作為利用的基礎,而不是使用諸如 0 這樣的簡單數字

  • 房子的填充和筆畫顏色由原始圖形建立,並且不能通過 元素覆蓋,這說明咱們不能構造一行彩色的房子。

  • 文檔中會畫出所有的三個元素 woman,man 和 house,並不能將它們單獨 ‘存儲’ 下來,然後只繪製一排房子或者只繪製一組人。

<defs> 元素可以解決這些問題

1)SVG規範推薦我們將所有想要複用的對象放置在元素內,這樣SVG閱讀器進入流式環境中就能更輕鬆地處理數據。
2)由於組合在<defs>元素內,它們不會立刻繪製到屏幕上,而是作為”模板”供其他地方使用。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
<title>歡樂一家人</title>
<desc>一家人在一起就是簡單幸福的了</desc>
<defs>
<g id='house' style='stroke:black'>
<desc>房子</desc>
<rect x='0' y='41' width='60' height='60' />
<polyline points='0 41, 30 0, 60 41' />
<polyline points='30 110, 30 71, 44 71, 44 101' />
</g>
<g id='man' style='fill:none; stroke:green'>
<desc>男人</desc>
<circle cx='10' cy='10' r='10' />
<line x1='10' y1='20' x2='10' y2='44' />
<polyline points='1 58, 10 44, 19 58' />
<polyline points='1 24, 10 30, 19 24' />
</g>
<g id='woman' style='fill:none; stroke:red'>
<desc>女人</desc>
<circle cx='10' cy='10' r='10' />
<polyline points='10 20, 10 34, 0 44, 20 44, 10 34' />
<line x1='4' y1='58' x2='8' y2='44' />
<line x1='12' y1='44' x2='16' y2='58' />
<polyline points='1 24, 10 30, 19 24' />
</g>
<g id='couple'>
<desc>夫妻</desc>
<use xlink:href='#man' x='0' y='0'/>
<use xlink:href='#woman' x='25' y='0'/>
</g>
</defs>
<use xlink:href='#house' x='0' y='0' style='fill:#cfc'/>
<use xlink:href='#couple' x='70' y='40'/>
<use xlink:href='#house' x='120' y='0' style='fill:#99f' />
<use xlink:href='#couple' x='190' y='40' />
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

<symbol>元素

<symbol>作為模板,同<defs>一樣,內部的所有元素都不會展現在畫布上,因此咱們無需把它放在 規範內。然而,咱們還是習慣將它放到 <defs> 中,因為 symbol 也是咱們定義的供後續使用的元素。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
<defs>
<symbol id="circle" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="50"></circle>
</symbol>
<symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice">
<polygon points="0 0, 100 0, 50 100"></polygon>
</symbol>
</defs>
<g stroke="grey" fill="none">
<rect x="0" y="0" width="50" height="100"></rect>
<rect x="100" y="0" width="50" height="100"></rect>
</g>
<use xlink:href="#circle" width="50" height="100" fill="red"></use>
<use xlink:href="#triangle" width="50" height="100" fill="red" x="100"></use>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

image 元素

<image>顧名思義裡面放圖片的,至於說是矢量圖(vector)還是位圖(raster),都成,用起來也方便:

<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww.w3.org/2000/svg'>
<ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>
<ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />
<image xlink:href='3.jpg' x='72' y='92'
width='160' height='120'
/>
</svg>

SVG入門指南(看完,對SVG結構不在陌生)

代碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

參考:

騰訊課堂《走入SVG》
慕課網《走進SVG》
<SVG 精髓>

交流(歡迎加入群,群工作日都會發紅包,互動討論技術)

乾貨系列文章彙總如下,覺得不錯點個Star,歡迎 加群 互相學習。

github.com/qq449245884…

因為篇幅的限制,今天的分享只到這裡。如果大家想了解更多的內容的話,可以去掃一掃每篇文章最下面的二維碼,然後關注咱們的微信公眾號,瞭解更多的資訊和有價值的內容。

SVG入門指南(看完,對SVG結構不在陌生)

相關文章

CSS3Transition過渡動畫用法介紹

Java線程池的四種用法與使用場景

如何真正寫好代碼註釋—現代JavaScript教程

0.57*100===56.99999999999999之謎