手把手教你用 SVG 符號和 CSS 變量做出彩色圖標(biāo)

時(shí)間：2023-07-05 21:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-05 21:00:01 來源：網(wǎng)站運(yùn)營

手把手教你用 SVG 符號和 CSS 變量做出彩色圖標(biāo)：

簡評：使用圖片和 CSS 樣式來制作網(wǎng)頁圖標(biāo)的日子已經(jīng)過去了，隨著網(wǎng)頁字體的爆發(fā)，圖標(biāo)字體成為展示圖標(biāo)的第一解決方案。

字體都是向量，所以你不必?fù)?dān)心分辨率的問題。它們能作為文本來用 CSS 屬性修飾，所以你能夠完全掌控它們的大小，顏色以及樣式。還可以添加變換，效果以及裝飾比如旋轉(zhuǎn)，下劃線或陰影。

然而圖標(biāo)字體還不夠完美，這就是為什么越來越多的人使用內(nèi)嵌 SVG 圖片的原因。CSS Tricks 寫了一個(gè)圖標(biāo)字體和原生的 SVG 元素相比的諸多缺點(diǎn)：清晰度，位置，因?yàn)槭艿娇缬蚣虞d，瀏覽器兼容，以及廣告攔截器等因素影響甚至稱得上失敗?，F(xiàn)在通過一個(gè)安全的選擇來制作圖標(biāo)字體完全可以避免大多數(shù)這種問題。

然而，還有一個(gè)圖標(biāo)字體絕對不能做到的問題：多顏色支持。只有 SVG 能做到。

太長，不讀：這篇文章將深入探討怎么做以及為什么。如果你想理解整個(gè)過程，就繼續(xù)閱讀。如果想直接查看代碼，可以點(diǎn)擊 CodePen.

設(shè)置 SVG 符號圖標(biāo)

內(nèi)嵌的 SVG 的問題在于它們的冗余。你肯定不想在每次使用同一個(gè)圖標(biāo)時(shí)復(fù)制粘貼所有的坐標(biāo)。這顯得笨拙，可讀性差，難以維護(hù)。

使用 SVG 符號圖標(biāo)，你只要復(fù)制整個(gè) SVG 元素一次，然后你就可以用一個(gè)引用在任何地方實(shí)例化它們。

從內(nèi)嵌 SVG 開始，隱藏它，并用一個(gè) <symbol> 包裹，然后加上 id 屬性：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path d="..." /> </symbol></svg>一次包含完整的 SVG 標(biāo)記并隱藏在 HTML 里。

然后，只要用 <use> 元素來實(shí)例化這個(gè)圖標(biāo)就行了：

<svg> <use xlink:href="#my-first-icon" /></svg>這樣就可以展示你之前的 SVG 圖標(biāo)了：

就是辣么簡單！對吧？

你可能注意到了有意思的 xlink:href 屬性：這是你的實(shí)例和原始的 SVG 之間的鏈接。

值得一提的是 xlink:href 是一個(gè)被棄用的 SVG 屬性。即使大多數(shù)瀏覽器仍然支持，你都應(yīng)該使用 href 來代替它。問題是，有些瀏覽器比如 Safari 還不支持通過 href 屬性引用 SVG 資源，所以你還要提供 xlink:href 屬性。

為了安全起見，同時(shí)提供兩個(gè)屬性。

添加一些顏色

不像字體，color 屬性對于 SVG 圖標(biāo)沒有任何作用：你必須使用 fill 屬性來定義一個(gè)顏色。這意味著它們不像圖標(biāo)字體那樣繼承父類的文本顏色，但你仍然可以用 CSS 來為它們添加樣式。

// HTML<svg class="icon"> <use xlink:href="#my-first-icon" /></svg>// CSS.icon { width: 100px; height: 100px; fill: red;}這里，你可以用不同的填充顏色創(chuàng)建另一個(gè)同樣的圖標(biāo)實(shí)例。

// HTML<svg class="icon icon-red"> <use xlink:href="#my-first-icon" /></svg><svg class="icon icon-blue"> <use xlink:href="#my-first-icon" /></svg>// CSS.icon { width: 100px; height: 100px;}.icon-red { fill: red;}.icon-blue { fill: blue;}這會起作用，但不是我們確切想要的。到這里，我們剛才完成的步驟可以得到一個(gè)常規(guī)的圖標(biāo)字體。我們想要的是對于圖標(biāo)的每個(gè)部分可以有不同的顏色。我們想要用不同的顏色填充每個(gè) path 而不用更改其他實(shí)例，必要的時(shí)候可以重寫。

一開始，你可能會想到用特殊性：

// HTML<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path class="path1" d="..." /> <path class="path2" d="..." /> <path class="path3" d="..." /> </symbol></svg><svg class="icon icon-colors"> <use xlink:href="#my-first-icon" /></svg>// CSS.icon-colors .path1 { fill: red;}.icon-colors .path2 { fill: green;}.icon-colors .path3 { fill: blue;}然而這并沒什么用。

我們嘗試為 .path1, .path2 和 .path3 添加樣式，就好像它們被 .icon-colors 嵌套一樣，但技術(shù)上來說并非如此。<use> 不是一個(gè)被你定義的 SVG 的占位符。 它是一個(gè)引用，復(fù)制了指向暗處的 DOM 的內(nèi)容。?

那我們該怎么做？我們怎樣才能影響不在 DOM 中的子元素？

CSS 變量來幫忙

在 CSS 中，一些屬性從祖先到孩子都繼承了。如果你分配給 body 分配一個(gè)文本顏色，所有頁面中的文本都會繼承這個(gè)顏色，除非顏色被重寫。祖先不知道孩子，但可繼承的樣式被傳遞下來。

我們開始的示例中，繼承了 fill 屬性。再看一次，你會看到我們聲明的 fill 顏色被添加到實(shí)例中，而不是定義的 SVG。這就是我們能夠?yàn)槊總€(gè)實(shí)例添加不同顏色的原因。

現(xiàn)在問題來了：我們想要將不同的顏色傳遞給原始 SVG 的不同的路徑，但我們只能繼承一個(gè) fill 屬性。

看看 CSS 變量。

CSS 變量可以像其他屬性那樣聲明在規(guī)則集里。你可以為它取任意的名字，并分配任意的有效的 CSS 值。然后你可以為它聲明一些值或者任意的孩子屬性，它能夠被繼承。

.parent { --custom-property: red; color: var(--custom-property);}所有 .parent 的孩子都會有紅色的文本。

.parent { --custom-property: red;}.child { color: var(--custom-property);}所有嵌套在 .parent 的 .child 元素也會有紅色的文本。

現(xiàn)在將這個(gè)概念應(yīng)用到我們的 SVG 符號。我們將在 SVG 定義的每個(gè)路徑里用 fill 屬性，然后把它們的值設(shè)置為不同的 CSS 變量。這樣一來，我們就能分配不同的顏色了。

// HTML<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path fill="var(--color-1)" d="..." /> <path fill="var(--color-2)" d="..." /> <path fill="var(--color-3)" d="..." /> </symbol></svg><svg class="icon icon-colors"> <use xlink:href="#my-first-icon" /></svg>// CSS.icon-colors { --color-1: #c13127; --color-2: #ef5b49; --color-3: #cacaea;}然后……大功告成！?

從現(xiàn)在開始，我們只需要用不同的顏色的 CSS 類創(chuàng)建不同的實(shí)例。

// HTML<svg class="icon icon-colors-alt"> <use xlink:href="#my-first-icon" /></svg>// CSS.icon-colors-alt { --color-1: brown; --color-2: yellow; --color-3: pink;}如果你只想使用單色的圖標(biāo)，你不用在每個(gè) CSS 變量里重復(fù)相同的顏色。你可以使用單個(gè) fill 來代替：因?yàn)?CSS 變量沒有被定義，所以將會回滾到你的 fill 聲明。

.icon-monochrome { fill: grey;} 你的 fill 聲明會起作用因?yàn)?fill 屬性的值在原始的 SVG 上是沒有定義的 CSS 變量。

我的 CSS 變量名應(yīng)該叫什么？

在 CSS 中命名通常有兩種方式：描述性的或者語義性的。描述性意味著什么顏色就叫什么：如果你存儲 #ff0000，那就叫它 --red。語義性意味著這種顏色是怎么用的就叫什么。比如你用 #ff0000 填充咖啡杯把手，你就叫它 --cup-handle-color。

描述性的名字可能是你下意識的選擇。它看起來更清爽，因?yàn)?#ff0000 不僅可以用來填充咖啡杯把手，還可以為其他東西上色。當(dāng)別的圖標(biāo)需要上紅色時(shí)，一個(gè) --red 的 CSS 變量是可以重用的。畢竟，這就是 CSS 實(shí)用至上原則的體現(xiàn)，它也的確是個(gè)好體制。

問題在于，在我們的案例中我們不能粒度類應(yīng)用到我們想要的樣式。不能用實(shí)用至上原則，因?yàn)槲覀冇忻總€(gè)圖標(biāo)的引用，我們必須通過類變量來為它們添加樣式。

使用語義化的名字，比如 --cup-handle-color 在這種情況下這樣才比較有意義。當(dāng)你想要改變某個(gè)圖標(biāo)的部分顏色時(shí)，你瞬間就能知道它是什么，應(yīng)該重寫成什么。類名和你分配的無論什么顏色都能保持關(guān)聯(lián)。

默認(rèn)或不默認(rèn)

將你的圖標(biāo)設(shè)置成多種顏色作為默認(rèn)狀態(tài)是很吸引人的。用這種方式，你可以直接使用它們不需要添加額外的樣式，只有在需要改動(dòng)時(shí)，才會添加你自己的類。

可以通過兩種方式實(shí)現(xiàn)： :root 以及 var() default.

:root

你可以用 :root 里定義你所有的 CSS 變量。這樣一來可以把所有的變量放在同一個(gè)地方，并允許你“共享“類似的顏色。 :root 有最低的優(yōu)先權(quán)，所以很容易可以重寫它。

:root { --color-1: red; --color-2: green; --color-3: blue; --color-4: var(--color-1);}.icon-colors-alt { --color-1: brown; --color-2: yellow; --color-3: pink; --color-4: orange;}然而，這種方法有一些主要的缺點(diǎn)。首先，讓顏色的定義和它們各自的圖標(biāo)分離會變得混亂。當(dāng)你想要重寫它們時(shí)，你必須在 :root 和當(dāng)前的類之間往返。更重要的是，它不會限制你的 CSS 變量，從而避免你使用相同的名字。

大多數(shù)時(shí)候，當(dāng)一個(gè)圖標(biāo)僅使用一種顏色，我會用 --fill-color 。它簡單易懂，當(dāng)你只想用一種顏色填充所有的圖標(biāo)時(shí)，這種方式也比較行得通。如果我必須在 :root 中聲明所有的變量，我不能有多個(gè) --fill-color 。我必須定義 --fill-color-1, --fill-color-2等等，或者使用命名空間比如 --star-fill-color, --cup-fill-color。




var() default

用來將 CSS 變量分配給某個(gè)屬性的 var() 函數(shù)可以將第二個(gè)參數(shù)作為默認(rèn)值。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="my-first-icon" viewBox="0 0 20 20"> <title>my-first-icon</title> <path fill="var(--color-1, red)" d="..." /> <path fill="var(--color-2, blue)" d="..." /> <path fill="var(--color-3, green)" d="..." /> </symbol></svg>除非你定義 --color-1,--color-2 和 --color-3, 否則圖標(biāo)會使用默認(rèn)的值為每個(gè) <path> 填充顏色。這解決了之前使用 :root 時(shí)全局范圍的問題，但是要注意：你現(xiàn)在使用了默認(rèn)值，并且它正在生效。結(jié)果是，你不能夠使用單個(gè) fill 聲明來定義單色的圖標(biāo)了。你必須為每個(gè) CSS 變量分配顏色，一個(gè)一個(gè)地。

設(shè)置默認(rèn)值很有用，但它是種權(quán)衡。我建議你不要將這種做法成為一種習(xí)慣，只有當(dāng)它在特定的項(xiàng)目有意義時(shí)才使用。

瀏覽器兼容

CSS 變量對于絕大多數(shù)現(xiàn)代瀏覽器都是兼容的，但正如你所想的那樣，IE 瀏覽器完全不支持。甚至 IE 11 也不支持，自從 Edge 的開發(fā)被擱置后，它再也沒機(jī)會趕上了。

現(xiàn)在，僅僅因?yàn)橐粋€(gè)瀏覽器不支持這個(gè)功能，這并不意味著你要推翻一切來迎合它。這種情形有更加優(yōu)雅的做法：為現(xiàn)代瀏覽器提供多彩圖標(biāo)，為其他的老版本瀏覽器提供回滾的填充顏色。

你想要做的是當(dāng) CSS 變量不支持時(shí)設(shè)置一個(gè)會起作用的聲明，這可以通過為 fill 屬性設(shè)置回滾顏色來實(shí)現(xiàn)：當(dāng)支持 CSS 變量時(shí)，它不會生效，如果不支持，你的 fill 聲明才會生效。如果你使用 Sass，可以抽象到@mixin 里：

@mixin icon-colors($fallback: black) { fill: $fallback; @content;} 現(xiàn)在我們可以定義我們的顏色方案而不用擔(dān)心瀏覽器兼容問題了。

.cup { @include icon-colors() { --cup-color: red; --smoke-color: grey; };}.cup-alt { @include icon-colors(green) { --cup-color: green; --smoke-color: grey; };}如果你想要了解更多 SVG 的內(nèi)容，我推薦閱讀 Sara Soueidan 的博客。

原文鏈接：Let’s make multi-colored icons with SVG symbols and CSS variables

推薦閱讀：







極光日報(bào)，極光開發(fā)者旗下媒體。

每天導(dǎo)讀三篇英文技術(shù)文章。