當(dāng)前位置：首頁 > 科技 > 軟件

不一樣的SVG！SVG在 CSS 中的應(yīng)用

來源：責(zé)編：時間：2024-04-08 17:19:57 192觀看

導(dǎo)讀介紹一些你可能沒用過的SVG小技巧。在平時開發(fā)中，很多時候都會用到SVG。大部分情況我們都不必關(guān)注SVG里面到底是什么，直接當(dāng)成圖片資源引入就行，比如常見的圖標(biāo)資源。我們可以通過多種方式使用這個特殊的圖片。<img src=

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

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

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

<img%20src="a.svg">

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

甚至直接放到HTML中。

<div>%20%20<svg>%20%20 ...%20%20</svg></div>

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

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

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

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

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

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

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

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

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

先試試，F(xiàn)igma中可以直接將這個邊框復(fù)制成SVG格式。

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

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

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

<style>%20%20svg{%20%20%20%20position:%20absolute;%20%20%20%20inset:%200;%20%20}</style><button>%20%20CSS%20%20<svg>...</svg></button>

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

很顯然不行，因?yàn)樯傻腟VG寬高是固定的，沒法跟隨文本內(nèi)容自適應(yīng)尺寸。

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

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

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

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

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

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

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

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

<div%20style="width:%20100px;height:%2080px;">%20%20<svg>...</svg></div><div%20style="width:%20200px;height:%20180px;">%20%20<svg>...</svg></div>

效果如下：

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

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

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

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

我們把邊框改大一點(diǎn)就可以很明顯的觀察到描邊是居中的。

由于是居中的，所以在不做修改的情況下，我們看到的其實(shí)只有原邊框的一半，利用這個原理我們其實(shí)可以實(shí)現(xiàn)常說的0.5px邊框。

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

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

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

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

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

這里小結(jié)一下

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

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

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

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

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

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

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

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

button{%20%20position:%20relative;}button>svg{%20%20position:%20absolute;%20%20inset:%200;}

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

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

四、SVG%20在%20CSS%20中的應(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%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20x='1'%20y='1'%20width='100%25'%20height='100%25'%20style='width:calc(100%25%20-%202px);height:calc(100%25%20-%202px)'%20rx='16'%20stroke-width='2'%20stroke='url(%23paint0_linear_3269_5233)'/%3E%3Cdefs%3E%3ClinearGradient%20id='paint0_linear_3269_5233'%20y2='100%25'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23FFD75A'/%3E%3Cstop%20offset='1'%20stop-color='%23ED424B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E

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

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

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

<button>CSS</button><button>CSS%20&%20SVG</button>

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

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

五、SVG%20的獨(dú)特魅力

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

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

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

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

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

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

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

看似復(fù)雜，其實(shí)只需要改變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)勢來實(shí)現(xiàn)更加靈活的布局，下面總結(jié)一下：

設(shè)計軟件導(dǎo)出的SVG都是固定尺寸的，不能自適應(yīng)尺寸。
SVG很擅長漸變邊框，而CSS很擅長自適應(yīng)尺寸，得想辦法取長補(bǔ)短。
SVG部分屬性支持百分比類型，可以實(shí)現(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可以很輕松的實(shí)現(xiàn)漸變虛線邊框。
SVG中還支持CSS動畫，可以實(shí)現(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。

本文鏈接：http://www.tebozhan.com/showinfo-26-82040-0.html不一樣的SVG！SVG在 CSS 中的應(yīng)用

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java中的String，這一篇就夠了

下一篇： Springboot 3.1.x：快速掌握事件驅(qū)動的實(shí)用技巧

標(biāo)簽：

熱門焦點(diǎn)

Golang 中的 io 包詳解：組合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是對Reader和Writer接口的組合，
Flowable工作流引擎的科普與實(shí)踐

一.引言當(dāng)我們在日常工作和業(yè)務(wù)中需要進(jìn)行各種審批流程時，可能會面臨一系列技術(shù)和業(yè)務(wù)上的挑戰(zhàn)。手動處理這些審批流程可能會導(dǎo)致開發(fā)成本的增加以及業(yè)務(wù)復(fù)雜度的上升。在這
破圈是B站頭上的緊箍咒

來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之每年的暑期檔都少不了瞄準(zhǔn)追劇女孩們的古偶劇集，2021年有優(yōu)酷的《山河令》，2022年有愛奇藝的《蒼蘭訣》，今年卻輪到小破站抓住了追
自律，給不了Keep自由！

來源 | 互聯(lián)網(wǎng)品牌官作者 | 李大為編排 | 又耳審核 | 谷曉輝自律能不能給用戶自由暫時不好說，但大概率不能給Keep自由。近日，全球最大的在線健身平臺Keep正式登陸港交所，努力
東方甄選單飛：有些鳥注定是關(guān)不住的

文/彭寬鴻編輯/羅卿東方甄選創(chuàng)始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一年多時間里，東方甄選要脫離抖音自立門戶的傳聞不絕于耳，“7
國行版三星Galaxy Z Fold5/Z Flip5發(fā)布售價7499元起

2023年8月3日，三星電子舉行Galaxy新品中國發(fā)布會，正式在國內(nèi)推出了新一代折疊屏智能手機(jī)三星Galaxy Z Fold5與Galaxy Z Flip5，以及三星Galaxy Tab S9
超閉合精工鉸鏈徹底消滅縫隙三星Galaxy Z Flip5與Galaxy Z Fold5發(fā)布

2023年7月26日，三星電子正式發(fā)布了Galaxy Z Flip5與Galaxy Z Fold5。三星新一代折疊屏手機(jī)采用超閉合精工鉸鏈，讓折疊后的縫隙不再可見。同時，配合處
7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

上半年已接近尾聲，截至目前各大品牌旗下的頂級旗艦都已悉數(shù)亮相，而下半年即將推出的頂級旗艦已經(jīng)成為了數(shù)碼圈爆料的主流，其中就包括全新的iQOO 11S系
榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強(qiáng)勁影音系統(tǒng)

2022年第一季度臨近尾聲，在該季度內(nèi)，許多品牌陸續(xù)發(fā)布自己的最新產(chǎn)品，讓大家從全新的角度來了解當(dāng)今的手機(jī)技術(shù)。手機(jī)是電子設(shè)備中，更新迭代十分迅速的一款產(chǎn)品，基

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

不一樣的SVG！SVG在 CSS 中的應(yīng)用

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

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

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

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

五、SVG%20的獨(dú)特魅力

六、總結(jié)一下

Golang 中的 io 包詳解：組合接口

Flowable工作流引擎的科普與實(shí)踐

破圈是B站頭上的緊箍咒

自律，給不了Keep自由！

東方甄選單飛：有些鳥注定是關(guān)不住的

國行版三星Galaxy Z Fold5/Z Flip5發(fā)布售價7499元起

超閉合精工鉸鏈徹底消滅縫隙三星Galaxy Z Flip5與Galaxy Z Fold5發(fā)布

7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強(qiáng)勁影音系統(tǒng)

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊