43.HTML5 SVG基礎(chǔ)

VG（Scalable Vector Graphics）是一種基于XML的圖像格式，用于定義用于網(wǎng)絡(luò)的矢量圖形。與柵格圖像如PNG或JPG不同，SVG圖像在放大或縮小時不會失真，這使得它特別適合于網(wǎng)頁設(shè)計和響應(yīng)式布局。

SVG的優(yōu)點包括：

可縮放性：矢量圖形可以無損放大或縮小。
可編輯性：作為XML文件，SVG可以通過文本編輯器進(jìn)行編輯。
交互性和動畫：可以通過CSS和JavaScript增強SVG的交互性和動畫效果。
DOM訪問：SVG元素可以通過DOM API進(jìn)行訪問和操作。

如何在HTML中使用SVG？

SVG可以直接嵌入到HTML頁面中，可以作為一個獨立的文件被引入，或者作為CSS背景圖像使用。

示例 1：直接嵌入SVG

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SVG 基礎(chǔ)示例</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
</body>
</html>

在這個例子中，我們創(chuàng)建了一個簡單的SVG圖形，包括一個黃色填充的圓，周圍有一個綠色的邊框。

示例 2：使用SVG文件

首先，創(chuàng)建一個SVG文件（例如：rectangle.svg）：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" fill="blue" />
</svg>

然后，在HTML文件中引用這個SVG文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用SVG文件</title>
</head>
<body>
    <img src="rectangle.svg" alt="藍(lán)色矩形" />
</body>
</html>

通過<img>標(biāo)簽，我們引入了一個外部SVG文件。

示例 3：SVG與CSS和JavaScript交互

我們可以使用CSS來改變SVG的樣式，也可以使用JavaScript來添加交互功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SVG 與 CSS 和 JavaScript 交互</title>
    <style>
        #myPolygon {
            fill: orange;
            transition: fill 0.5s ease;
        }
        #myPolygon:hover {
            fill: red;
        }
    </style>
</head>
<body>
    <svg width="300" height="200">
        <polygon id="myPolygon" points="100,10 40,198 190,78 10,78 160,198"
                 onclick="alert('多邊形被點擊!')" />
    </svg>

    <script>
        document.getElementById('myPolygon').addEventListener('click', function() {
            console.log('多邊形被點擊，并且已經(jīng)觸發(fā)了alert。');
        });
    </script>
</body>
</html>

在這個例子中，我們創(chuàng)建了一個SVG多邊形，通過CSS為其添加了懸停效果，并通過JavaScript為其添加了點擊事件。

結(jié)論

SVG是一個強大的工具，適用于現(xiàn)代的網(wǎng)頁設(shè)計和開發(fā)。通過上述例子，我們可以看到SVG在創(chuàng)建可縮放、可交互圖形方面的能力。隨著技術(shù)的不斷進(jìn)步，SVG將繼續(xù)在Web設(shè)計中扮演重要角色。

紹一些你可能沒用過的SVG小技巧。

在平時開發(fā)中，很多時候都會用到SVG。大部分情況我們都不必關(guān)注SVG里面到底是什么，直接當(dāng)成圖片資源引入就行，比如常見的圖標(biāo)資源

我們可以通過多種方式使用這個特殊的圖片

<img src="a.svg">

.icon{
  background: url("a.svg")
}

甚至直接放到HTML中

<div>
  <svg>
  	...
  </svg>
</div>

這些都沒什么問題，但有時候，我們需要的是可以自適應(yīng)尺寸的，比如像這樣的漸變邊框，尺寸會隨著文本內(nèi)容的變化而變化，而不是固定尺寸，如下

或者是這樣的虛線漸變邊框

這樣的該如何用 SVG 動態(tài)實現(xiàn)呢，一起看看吧

一、SVG導(dǎo)出的局限性

SVG通常不是手寫的（能手寫任意路徑的都是大神），幾乎都是設(shè)計師借助軟件繪制生成的，比如設(shè)計都很喜歡的Figma（對前端非常友好，可以嘗試一下）

比如前面提到的漸變邊框，在Figma中就是這樣

對于設(shè)計師來說，漸變邊框很容易，只需要選擇邊框類型就行了

對于 CSS 來說，這還算一個比較麻煩的事，通常我們需要額外嵌套一層漸變背景，通過遮蓋或者mask裁切的方式實現(xiàn)，有興趣的可以嘗試一下，這里暫不展開。

那么，這個設(shè)計可以直接通過導(dǎo)出SVG實現(xiàn)嗎？

先試試，Figma中可以直接將這個邊框復(fù)制成SVG格式

下面是這段復(fù)制出來的SVG代碼（大概還是能看得懂一些的...）

<svg width="41" height="25" viewBox="0 0 41 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="39" height="23" rx="4" stroke="url(#paint0_linear_1_2)" stroke-linecap="round"/>
  <defs>
  <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
  	<stop stop-color="#FFD75A"/>
  	<stop offset="1" stop-color="#ED424B"/>
  </linearGradient>
  </defs>
</svg>

我們嘗試讓這段SVG尺寸跟隨button的大小，就行這樣

<style>
  svg{
    position: absolute;
    inset: 0;
  }
</style>
<button>
  CSS
  <svg>...</svg>
</button>

在內(nèi)容不定的情況下，就變成了這樣

很顯然不行，因為生成的SVG寬高是固定的，沒法跟隨文本內(nèi)容自適應(yīng)尺寸

既然 SVG很擅長漸變邊框，而 CSS很擅長自適應(yīng)，那么，有沒有取長補短的辦法呢？

當(dāng)然也是有的！不過需要“改造”一下，接著往下看

二、SVG 自適應(yīng)尺寸

首先我們把上面的那段SVG拿過來

<svg width="41" height="25" viewBox="0 0 41 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="39" height="23" rx="4" stroke="url(#paint0_linear_1_2)" stroke-linecap="round"/>
  <defs>
  <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
  	<stop stop-color="#FFD75A"/>
  	<stop offset="1" stop-color="#ED424B"/>
  </linearGradient>
  </defs>
</svg>

有沒有發(fā)現(xiàn)這里很多數(shù)值都固定的？如果想實現(xiàn)自適應(yīng)，我們就需要將這些值改成百分比形式，注意看這個rect，有個x、y坐標(biāo)，我們現(xiàn)在寬高都是100%了，所以這里的坐標(biāo)也要改成0，不然就撐出去了

<svg width="100%" height="100%" viewBox="0 0 100% 100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" rx="4" stroke="url(#paint0_linear_1_2)" stroke-linecap="round"/>
  <defs>
  <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
  	<stop stop-color="#FFD75A"/>
  	<stop offset="1" stop-color="#ED424B"/>
  </linearGradient>
  </defs>
</svg>

為了驗證這個 SVG的自適應(yīng)，我們將這個SVG放在一個div中

<div style="width: 100px;height: 80px;">
  <svg>...</svg>
</div>

<div style="width: 200px;height: 180px;">
  <svg>...</svg>
</div>

效果如下

是不是已經(jīng)自適應(yīng)了？

不過還是有點問題，仔細(xì)觀察，圓角處有些不自然，感覺被裁剪了一樣

造成這種現(xiàn)象的原因有兩個：

SVG描邊是居中描邊，并且不可修改
SVG默認(rèn)是超出隱藏的，也就是自帶overflow:hidden

我們把邊框改大一點就可以很明顯的觀察到描邊是居中的

由于是居中的，所以在不做修改的情況下，我們看到的其實只有原邊框的一半，利用這個原理我們其實可以實現(xiàn)常說的0.5px邊框，有興趣的可以參考我之前這篇文章：使用svg描邊來實現(xiàn)移動端1px

在這里，我再介紹一種新的方式，那就是利用 CSS calc !

沒錯，在 SVG中也可以使用CSS函數(shù)，比如我們這里邊框是4px，那么坐標(biāo)x、y就應(yīng)該是2，然后寬高應(yīng)該是calc(100% - 4px)，所以可以很自然的改成這樣

<div style="width: 100px;height: 80px;">
  <svg width="100%" height="100%">
    <rect x="2" y="2" width="100%" height="100%" style="width: calc(100% - 4px);height: calc(100% - 4px);"  rx="4" stroke="url(#paint0_linear_1_2)" stroke-width="4" stroke-linecap="round"/>
     <defs>
    <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#FFD75A"/>
      <stop offset="1" stop-color="#ED424B"/>
    </linearGradient>
    </defs>
  </svg>
</div>

非常完美了，不會有任何裁剪！（大家也可以復(fù)制上面這段代碼放在 HTML 中驗證）

這樣就“輕易”實現(xiàn)了SVG的尺寸自適應(yīng)

這里小結(jié)一下

將SVG的尺寸改為`百分比
由于是居中描邊，所以要修正一下坐標(biāo)和大小

除此之外，還能直接加上style樣式，就像這樣

<svg width="100%" height="100%" viewBox="0 0 100% 100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect{
      width: calc(100% - 4px);
      height: calc(100% - 4px);
    }
  </style>
  <rect x="2" y="2" width="100%" height="100%" rx="4" stroke="url(#paint0_linear_1_2)" stroke-width="4" stroke-linecap="round"/>
  <defs>
    <linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
      <stop stop-color="#FFD75A"/>
      <stop offset="1" stop-color="#ED424B"/>
    </linearGradient>
  </defs>
</svg>

雖然看著多，但后面作用更大，可以添加更多的 CSS 樣式

三、SVG 在 HTML 中的應(yīng)用

其實前面的這段 SVG 可以直接放到 HTML 中用了，比如

<button>
  <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="2" y="2" width="100%" height="100%" style="width: calc(100% - 4px);height: calc(100% - 4px);" rx="16" stroke-width="2" stroke="url(#paint0_linear_3269_5233)"/>
    <defs>
      <linearGradient id="paint0_linear_3269_5233" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFD75A"/>
        <stop offset="1" stop-color="#ED424B"/>
      </linearGradient>
    </defs>
  </svg>
  CSS
</button>

我們需要將這個 SVG撐滿整個button，所以可以直接絕對定位

button{
  position: relative;
}
button>svg{
  position: absolute;
  inset: 0;
}

這樣就得到了一個自適應(yīng)尺寸的、帶有漸變邊框的按鈕，效果如下

你也可以訪問在線鏈接：buton with SVG (juejin.cn)[1]

四、SVG 在 CSS 中的應(yīng)用

不知道你有沒有這樣的感覺，把一大段 SVG放在 HTML不是特別優(yōu)雅，總覺得太臃腫了。

如果你有這種感覺，不妨將這段 SVG轉(zhuǎn)換成內(nèi)聯(lián)CSS代碼。

在這里可以借助張鑫旭老師的這個工具：SVG在線壓縮合并工具[2]

我們將這段SVG粘貼過去，可以得到這樣的一段內(nèi)聯(lián)SVG

data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='100%25' height='100%25' style='width:calc(100%25 - 2px);height:calc(100%25 - 2px)' rx='16' stroke-width='2' stroke='url(%23paint0_linear_3269_5233)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3269_5233' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD75A'/%3E%3Cstop offset='1' stop-color='%23ED424B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E

有了這段內(nèi)聯(lián)SVG，我們可以直接用在background背景上

button{
  background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='100%25' height='100%25' style='width:calc(100%25 - 2px);height:calc(100%25 - 2px)' rx='16' stroke-width='2' stroke='url(%23paint0_linear_3269_5233)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3269_5233' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD75A'/%3E%3Cstop offset='1' stop-color='%23ED424B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")
}

而HTML只需要干凈的button元素就夠了

<button>CSS</button>
<button>CSS & SVG</button>

神奇的是，即便是轉(zhuǎn)為內(nèi)聯(lián)了，SVG仍然保持著自適應(yīng)特性，這樣也能實現(xiàn)同樣的效果，是不是好多了？

你也可以訪問在線鏈接：button with SVG background (juejin.cn)[3]

五、SVG 的獨特魅力

如果說上面的效果 CSS 還能勉強模擬一下，那如果是這樣的虛線呢？

對于 SVG 就非常容易了，只需要設(shè)置stroke-dasharray屬性就行，并且可以隨意更改虛線的間隔

<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="2" y="2" width="100%" height="100%" style="width: calc(100% - 4px);height: calc(100% - 4px);" rx="16" stroke-width="2" stroke="url(#paint0_linear_3269_5233)"  stroke-dasharray="8 4"/>
  <defs>
    <linearGradient id="paint0_linear_3269_5233" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFD75A"/>
      <stop offset="1" stop-color="#ED424B"/>
    </linearGradient>
  </defs>
</svg>

還有這種虛線邊緣是圓角的情況，CSS就更加無能為力了

SVG只需要設(shè)置stroke-linecap就行

<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="2" y="2" width="100%" height="100%" style="width: calc(100% - 4px);height: calc(100% - 4px);" stroke-width="2" rx="16" stroke-linecap="round"  stroke="url(#paint0_linear_3269_5233)"  stroke-dasharray="8 6"/>
  <defs>
    <linearGradient id="paint0_linear_3269_5233" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFD75A"/>
      <stop offset="1" stop-color="#ED424B"/>
    </linearGradient>
  </defs>
</svg>

更進(jìn)一步，SVG還能實現(xiàn)虛線滾動動畫，CSS 應(yīng)該是實現(xiàn)不了了

看似復(fù)雜，其實只需要改變stroke-dashoffset屬性就行了，我們可以直接在SVG中插入CSS動畫

<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    .rect{
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      animation: move .3s infinite linear;
    }
    @keyframes move {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 14; }
    }
  </style>
  <rect class="rect" x="2" y="2" width="100%" height="100%" stroke-width="2" rx="16" stroke-linecap="round"  stroke="url(#paint0_linear_3269_5233)"  stroke-dasharray="8 6"/>
  <defs>
    <linearGradient id="paint0_linear_3269_5233" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFD75A"/>
      <stop offset="1" stop-color="#ED424B"/>
    </linearGradient>
  </defs>
</svg>

所有情況都可以將 SVG轉(zhuǎn)為內(nèi)聯(lián)CSS直接用在背景上，極大的保證了HTML的簡潔性

你也可以訪問在線鏈接：dot border with animation (juejin.cn)[4]

六、總結(jié)一下

以上就是本文的全部內(nèi)容了，主要介紹了如何利用 SVG和CSS各種的優(yōu)勢來實現(xiàn)更加靈活的布局，下面總結(jié)一下

設(shè)計軟件導(dǎo)出的SVG都是固定尺寸的，不能自適應(yīng)尺寸
SVG很擅長漸變邊框，而CSS很擅長自適應(yīng)尺寸，得想辦法取長補短
SVG部分屬性支持百分比類型，可以實現(xiàn)尺寸自適應(yīng)
SVG描邊是居中描邊，并且不可修改，所以需要調(diào)整圓角矩形的坐標(biāo)的大小
SVG中也支持 CSS部分特性，比如calc計算函數(shù)
SVG還支持內(nèi)嵌style標(biāo)簽，直接插入CSS代碼
可以將SVG轉(zhuǎn)為內(nèi)聯(lián)CSS代碼，在支持SVG特性的同時極大的保證了HTML的整潔
借助SVG可以很輕松的實現(xiàn)漸變虛線邊框
SVG中還支持CSS動畫，可以實現(xiàn)虛線滾動動畫

你可能已經(jīng)發(fā)現(xiàn)SVG并不是非常孤立的一門語言，現(xiàn)在還能和 CSS、HTML聯(lián)動起來，充分發(fā)揮各自的優(yōu)勢，這樣才能事半功倍。

[1]buton with SVG (juejin.cn)： https://code.juejin.cn/pen/7341373491785236532

[2]SVG在線壓縮合并工具： https://www.zhangxinxu.com/sp/svgo/

[3]button with SVG background (juejin.cn)： https://code.juejin.cn/pen/7341378448348643379

[4]dot border with animation (juejin.cn)： https://code.juejin.cn/pen/7341382517888876582

作者:XboxYan

來源-微信公眾號:前端偵探

出處:https://mp.weixin.qq.com/s/VH2U-jqm3cXI0yQFrR3adQ

者：馭劍淘系前端團隊

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/jReoLQsNzW_rGUDbZfPtqA

在線咨詢

上一篇：一個簡單的CSS屬性助你實現(xiàn)頁面的等比例縮放，快來學(xué)習(xí)一下吧
下一篇：html5的video標(biāo)簽實現(xiàn)對m3u8格式視頻(HLS)的支持親測可用

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商