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

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

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

刪減頭像

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

這可以通過添加 CSS 白色邊框（作為快速修復）來完成。但是為什么不將其進一步應用到動態(tài) SVG 組件中呢？

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

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

無論如何，我將向您展示邊界解決方案將如何快速失敗，它會失敗：

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

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

我們可以通過改變懸停時的邊框顏色來解決這個問題，但這對我來說似乎不是最好的解決方案。

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

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

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

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

考慮下圖：

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

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

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

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

部分標題

在我的一個客戶項目中，我通過結合 SVG 和 CSS 設計并構建了一個章節(jié)標題，該品牌與安全有關，因此使用這種風格可能適合。

組件需要處理短標題和長標題，如果標題太長，它應該換成多行而不破壞布局。為了構建它，我做了以下事情：

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

讓我們從基本的 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> 元素下添加一個邊框，以模仿 SVG 的連接線。

我注意到 SVG 沒有與線路連接，由于我們使用的是 flexbox，因此，修復它很簡單，我們只需要將 flex 項目與 flex-end 對齊。

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

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

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

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

HTML：

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

這個方法是我從 Jake Archibald 的文章中學到的。

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

$0.getTotalLength()
// 139.46

$0 是一種從 DOM 中選擇元素的快速方法，無需進行如下操作：

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

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

現(xiàn)在我們有了長度，我們可以用它做任何我們想做的事情。例如，我們可以在懸停時對其進行動畫處理。

.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

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

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

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

前后預覽效果如下：

我們的想法是我們要為每個鏈接插入一個 SVG，它看起來像下面這樣：

<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>

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

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

定制 SVG 膠帶效果

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

效果如下圖：

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

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

讓我們看一下 SVG 代碼。

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

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

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

更好的是，我們可以將 SVG 轉換為模板，并從 <use> SVG 元素中獲得幫助，以便在不復制 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>

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

下面是 CSS 的樣子：

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

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

最后總結

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

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

最后，感謝您的閱讀，編程快樂！