SVG 不僅僅是圖標(biāo)和插圖，它還有很多我們開發(fā)人員有時(shí)會(huì)忘記的隱藏力量。與 CSS 相比，使用 SVG 有很多用途。例如，構(gòu)建循環(huán)加載動(dòng)畫，或在圖像上應(yīng)用蒙版，在這種情況下，這并不意味著無(wú)法使用 CSS，但有時(shí)基于所使用的技術(shù)（例如：掩碼）來(lái)解決跨瀏覽器問(wèn)題可能會(huì)很痛苦，因此，使用 SVG 可以節(jié)省時(shí)間和精力。

SVG 的偉大之處在于它們可以響應(yīng)迅速、高性能，并且可以使用 HTML 和 CSS 開箱即用。在本文中，我的目標(biāo)是向您介紹不同的用例，在這些用例中，我們可以使用 SVG 以及 HTML 和 CSS 來(lái)構(gòu)建特定的 UI 組件。

現(xiàn)在，讓我們進(jìn)入用例，你準(zhǔn)備好了嗎？

刪減頭像

裁切出的頭像效果是我在查看 Facebook 的 CSS 時(shí)發(fā)現(xiàn)的，在 messenger 中，用戶頭像上可以有一個(gè)提示徽章，化身被剪裁為徽章分配空間。

這可以通過(guò)添加 CSS 白色邊框（作為快速修復(fù)）來(lái)完成。但是為什么不將其進(jìn)一步應(yīng)用到動(dòng)態(tài) SVG 組件中呢？

.badge {
    border: 2px solid #ff;
}

您可能在想，如果邊框有效，為什么要使用 SVG？好吧，這里沒(méi)有對(duì)錯(cuò)。但是有一個(gè)比另一個(gè)更好的解決方案，你還記得在數(shù)學(xué)課上老師可能會(huì)提到同一個(gè)問(wèn)題可能有不同的解決方案，而其中一個(gè)在靈活性方面可能會(huì)更好嗎？我對(duì)我們的情況也有同樣的感覺。

無(wú)論如何，我將向您展示邊界解決方案將如何快速失敗，它會(huì)失?。?/p>

• 懸停時(shí)：卡片背景會(huì)發(fā)生變化，因此白色邊框會(huì)顯得奇怪。
• 深色模式：白色邊框?qū)⑽挥诤谏尘爸?/li>

在下圖中，請(qǐng)注意徽章的白色邊框如何干擾深色背景和懸停狀態(tài)。

我們可以通過(guò)改變懸停時(shí)的邊框顏色來(lái)解決這個(gè)問(wèn)題，但這對(duì)我來(lái)說(shuō)似乎不是最好的解決方案。

.card__badge {
    border: 2px solid #ff;
}

.card:hover .card__badge {
    border-color: lightgrey;
}

@media (prefers-color-scheme: dark) {
    .card__badge {
        border-color: #454545;
    }
}

使用 SVG，可以通過(guò)切割徽章下方的區(qū)域，這是更好的方式，就可以解決上述問(wèn)題，這樣，它將適用于任何類型的背景。

考慮下圖：

我們使用 SVG <image> 元素來(lái)包含頭像，為了切出徽章區(qū)域，我們需要?jiǎng)?chuàng)建兩個(gè) <circle> 元素，一個(gè)是白色的，另一個(gè)是黑色的。

在遮罩中，任何帶有黑色填充的元素都將被隱藏??，而白色的元素將可見。黑色圓圈位于右下角，半徑為 18。

在設(shè)計(jì)工具中，上述稱為減法，我們想從較大的圓圈中減去小圓圈。

代碼演示地址：https://codepen.io/shadeed/pen/bGWaQOG

部分標(biāo)題

在我的一個(gè)客戶項(xiàng)目中，我通過(guò)結(jié)合 SVG 和 CSS 設(shè)計(jì)并構(gòu)建了一個(gè)章節(jié)標(biāo)題，該品牌與安全有關(guān)，因此使用這種風(fēng)格可能適合。

組件需要處理短標(biāo)題和長(zhǎng)標(biāo)題，如果標(biāo)題太長(zhǎng)，它應(yīng)該換成多行而不破壞布局。為了構(gòu)建它，我做了以下事情：

• 首先，我復(fù)制了固定部分（在右側(cè)）并將其附加為內(nèi)聯(lián) SVG。
• 使用 CSS 創(chuàng)建標(biāo)題下的線條，以及線條開頭和結(jié)尾的小圓圈。
• 我使用 flexbox 構(gòu)建了組件布局，以避免使用任何不需要的定位。

讓我們從基本的 HTML 和 CSS 開始。

HTML:

<h2 class="c-section__title">
    <span>CSS is awesome</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="34.5" viewBox="0 0 128 34.5" preserveAspectRatio="none">
        <path fill="none" stroke="#d8d8d8" stroke-width="2" d="M127 1H33.5L1 33.5"></path>
    </svg>
</h2>

CSS:

.c-section__title {
    max-width: 700px;
    width: fit-content;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

下一步，我想在 <span> 元素下添加一個(gè)邊框，以模仿 SVG 的連接線。

我注意到 SVG 沒(méi)有與線路連接，由于我們使用的是 flexbox，因此，修復(fù)它很簡(jiǎn)單，我們只需要將 flex 項(xiàng)目與 flex-end 對(duì)齊。

.c-section__title {
    max-width: 700px;
    width: fit-content;
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
}

然后，我們需要使用具有絕對(duì)定位的偽元素在開始和結(jié)束處添加圓圈。

代碼演示地址：https://codepen.io/shadeed/pen/bGoOxXL

使用 SVG 的另一個(gè)好處是，我們可以將 SVG 路徑變成可以動(dòng)畫的虛線。為此，我們需要確保未列出 SVG 中的導(dǎo)出路徑。

HTML：

<path d="M127 1H33.5L1 33.5" fill="none" stroke="#d8d8d8" stroke-width="2"></path>

這個(gè)方法是我從 Jake Archibald 的文章中學(xué)到的。

在 Chrome DevTools 中，檢查 SVG 并選擇 <path> 元素，您會(huì)注意到它末尾旁邊的 == $0，保持選中狀態(tài)，將其移至控制臺(tái)并編寫以下腳本。

$0.getTotalLength()
// 139.46

$0 是一種從 DOM 中選擇元素的快速方法，無(wú)需進(jìn)行如下操作：

let sectionPath = document.querySelector('#path');
console.log(sectionPath.getTotalLength());

這是本示例上下文中的一個(gè)快速提示。

現(xiàn)在我們有了長(zhǎng)度，我們可以用它做任何我們想做的事情。例如，我們可以在懸停時(shí)對(duì)其進(jìn)行動(dòng)畫處理。

.c-section__title--dashed path {
    stroke-dasharray: 139;
    stroke-dashoffset: 0;
    transition: 0.7s;
}

.c-section__title--dashed:hover path {
    stroke-dashoffset: 139;
}

代碼演示地址：https://codepen.io/shadeed/pen/xxXmyWE

或者我們可以簡(jiǎn)單地把它變成一條虛線（在這種情況下我們真的不需要知道路徑長(zhǎng)度）。

帶有 SVG 的自定義鏈接下劃線

我們可以使用 SVG 創(chuàng)建自定義鏈接下劃線來(lái)激發(fā)快樂(lè)，我?guī)啄昵皠?chuàng)建了一個(gè)腳本，它隨機(jī)生成一條路徑并在懸停時(shí)重新繪制它。

前后預(yù)覽效果如下：

我們的想法是我們要為每個(gè)鏈接插入一個(gè) SVG，它看起來(lái)像下面這樣：

<svg width="400" height="35" xmlns="http://www.w3.org/2000/svg">
    <path id="pathItem"
        d="M5 5 Q 30 15 170 5"
        stroke="black"
        fill="transparent"
        stroke-width="7"
        stroke-linecap="round"/>
</svg>

神奇的是通過(guò)改變 d 屬性值來(lái)實(shí)現(xiàn)的。這是一個(gè)顯示路徑實(shí)際繪制方式的視覺效果。

代碼演示地址：https://codepen.io/shadeed/pen/OeNbMO

定制 SVG 膠帶效果

在處理客戶項(xiàng)目時(shí)，我需要一種將磁帶附加到部分內(nèi)容的方法，該方法可以使用 CSS 放置在任何地方，并且足夠動(dòng)態(tài)，僅通過(guò)一個(gè) CSS 變量即可更改其顏色。

效果如下圖：

在 Adobe Illustrator 中，我將磁帶分為幾層：

• 基礎(chǔ)：采用填充顏色
• 透明黑色：顯示較暗的區(qū)域
• 透明白色：顯示較亮的區(qū)域

讓我們看一下 SVG 代碼。

<svg>
  <defs>
    <g id="tape" fill="currentColor">
      <!-- path contents -->
    </g>
  </defs>
</svg>

請(qǐng)注意，我添加了 fill=currentColor。currentColor 關(guān)鍵字將繼承 CSS color 屬性的值，以便我們可以僅使用一個(gè)屬性動(dòng)態(tài)更改顏色。

鑒于我們有一個(gè)純色的底座，以及另外兩層用于明暗區(qū)域的圖層，因此，更改顏色會(huì)產(chǎn)生不同外觀的膠帶。

更好的是，我們可以將 SVG 轉(zhuǎn)換為模板，并從 <use> SVG 元素中獲得幫助，以便在不復(fù)制 SVG 的情況下重用膠帶效果。

<svg style="display: none;">
  <defs>
    <g id="tape" fill="currentColor">
      <!-- path contents -->
    </g>
  </defs>
</svg>

<!-- An example of using the tape from a template -->
<svg class="tape" style="--angle: 10deg; color: red; --size: 120px;" aria-hidden="true" focusable="false" viewBox="0 0 123 47">
  <use href="#tape"></use>
</svg>

請(qǐng)注意我是如何通過(guò) <use> 元素添加磁帶的。這樣做的好處是使用 CSS 變量作為內(nèi)聯(lián)樣式。

下面是 CSS 的樣子：

.tape {
    width: var(--size);
    transform: rotate(var(--angle));
}

源碼演示地址：https://codepen.io/shadeed/pen/OJRYaZK

最后總結(jié)

借助 SVG 構(gòu)建 UI 組件可以讓事情變得更簡(jiǎn)單、更直接，一些 UI 組件可能不是 100% 完美的用例或 SVG（例如：頭像剪裁），但這取決于您正在處理的項(xiàng)目需求。

你有使用 SVG 和 CSS 的用例嗎？如果有的話，歡迎您跟我們一起來(lái)分享。如果您覺得我這篇文章內(nèi)容對(duì)你有幫助的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將它分享給您的朋友，也許能夠幫助到他。

最后，感謝您的閱讀，編程快樂(lè)！