掌握 SVG：創建動畫線條和 Clerk 樣式的目錄

在現代網頁開發的領域中，SVG（可縮放矢量圖形）已成為創建引人入勝、互動且響應式視覺元素的強大工具。雖然許多開發者仍然嚴重依賴傳統圖像格式或僅使用 CSS 的解決方案，但 SVG 提供了獨特的功能，可以將您的網頁項目提升到一個新的複雜性和性能高度。

今天，我們將探索 SVG 的兩個迷人應用：創建動畫線條（您可能已經在高級技術網站上看到過那些流暢的流動線條）和實現具有動態突出顯示的 Clerk 風格目錄。我們將展示當正確利用 SVG 時，可以創建哪些其他網頁技術難以實現的體驗。

理解 SVG：基礎知識

在深入研究我們的高級技術之前，讓我們先建立一個基礎。SVG 是一種基於 XML 的標記語言，用於描述二維矢量圖形。與光柵格式（JPEG, PNG）不同，SVG 圖像在任何解析度下都保持清晰，使其成為響應式設計的理想選擇。

SVG 的主要優勢包括：

解析度無關——可在無質量損失的情況下縮放
可編程性——可以用代碼創建和操控
可訪問性——文本元素對屏幕閱讀器可讀
動畫功能——原生支持複雜動畫
文件小尺寸——通常比等效的光柵圖像小

SVG 元素位於 DOM（文檔對象模型）中，這意味著它們可以用 CSS 樣式化，用 JavaScript 操控，開啟了無限的互動圖形可能性。

使用 SVG 創建動畫線條

動畫線條——那些看似在界面中脈動的光線或能量流——創造了一種活力和技術複雜感。它們在技術產品的著陸頁中特別受歡迎，比如 Unkey 的網站，在那裡它們傳達數據流和連接性。

基礎技術涉及三個關鍵組件：

定義線條路徑的基線或路徑
從該路徑創建掩碼
通過掩碼運動的動畫元素

步驟 1：創建基線

我們從定義一個包含線條元素的簡單 SVG 開始。在以下示例中，我們創建了一條垂直線（用 JSX/React 語法編寫）：

<svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  <g>
    <line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
  </g>
</svg>

這在深色背景上創建了一條靜態白色線條。線條從座標 (0,0) 延伸到 (0,50)，使其在我們 50x50 的 viewBox 中為垂直方向。

步驟 2：將線條轉換為掩碼

當我們將線條轉換為掩碼時，神奇的事情就發生了。在 SVG 中，掩碼定義了內容可見的區域——掩碼外的一切都變得透明。通過將我們的線條定義為掩碼，我們可以創造出沿線流動的幻覺：

<svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  <g>
    <rect x="0" y="0" width="50" height="10" fill="red" mask="url(#line)" />
    <mask id="line">
      <line id="" x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
    </mask>
  </g>
</svg>

在這裡，我們創建了一個紅色矩形並將我們的線條作為掩碼應用到它上。只有與白色線相交的矩形部分會顯示出來。

步驟 3：添加動畫

現在是有趣的部分——動畫。通過將 CSS 動畫應用到矩形上，我們可以使其看起來像是能量在通過線路：

<svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  <g>
    <rect
      x="0"
      y="0"
      width="50"
      height="10"
      fill="red"
      mask="url(#animated_line)"
      style={{
        animation: "to-down linear infinite 2s",
      }}
    />
    <mask id="animated_line">
      <line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="1" />
    </mask>
  </g>
</svg>

相應的 CSS 關鍵幀：

@keyframes to-down {
  0% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(50px);
  }
}

這個動畫將矩形從 viewBox 上方（`-10px`）移動到下方（`50px`），創造了沿遮罩線的連續流動幻覺。

步驟 4：用漸變和樣式增強

為了創建更具視覺吸引力的線條，我們可以添加漸變並改進我們的動畫：

<svg viewBox="0 0 50 50" className="bg-neutral-900 max-w-[100px] mx-auto">
  <g>
    <line x1="0" y1="0" x2="0" y2="50" stroke="rgb(50,50,50)" strokeWidth="2" />
    <rect
      x="0"
      y="0"
      width="100%"
      height="20"
      fill="url(#line_color)"
      mask="url(#animated_line_fancy)"
      style={{
        "--height": "20px",
        animation: "to-down-2 linear infinite 3s",
      }}
    />
    <defs>
      <linearGradient id="line_color" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="rgba(255,0,255,0.1)" />
        <stop offset="100%" stopColor="rgb(255,100,255)" />
      </linearGradient>
    </defs>
    <mask id="animated_line_fancy">
      <line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="2" />
    </mask>
  </g>
</svg>

更新的關鍵幀：

@keyframes to-down-2 {
  0% {
    transform: translateY(calc(var(--height) * -1));
  }

  100% {
    transform: translateY(100%);
  }
}

這個增強版包括：

為微妙的視覺深度設計的較暗基線
在線條中流動的粉色到紫色的漸變
用於更靈活動畫的 CSS 變量
改進的動畫計時

這些技術形成了您在現代網站上看到的許多優雅動畫界面的基礎。通過變化路徑、顏色和動畫參數，您可以創建脈動數據網絡的線路、在用戶界面中循環流動的能量流，或突出顯示路徑以引導用戶關注。

構建 Clerk 樣式的目錄

目錄（TOC）是文檔網站中必不可少的導航工具，但它們不必無聊。受 Clerk 創新方法的啟發，Fumadocs 實現了一個視覺引人注目的目錄，其動畫高亮顯示追踪您在文檔中的位置。

實現挑戰在於創建一個與伺服器端渲染（SSR）相協調的目錄，同時仍提供動態、客戶端的互動性。我們來分析這是如何做到的：

伺服器端的挑戰

在伺服器上渲染頁面時，我們尚不知道瀏覽器視窗中元素的精確位置。這對於想要響應滾動位置或視口可見性的動態用戶界面元素來說是一個挑戰。

解決方案涉及混合方法：

伺服器渲染具有絕對定位的靜態目錄結構
客戶端渲染一個動態的“拇指”元素以突出顯示活動節點

創建目錄大綱

目錄由一系列相連的綱要段落組成，從視覺上代表文檔的結構。每個段落對應於文檔中的一個標題。這些段落以單獨的組件在伺服器上預渲染，然後絕對定位以創建一個連貫的綱要。

挑戰在於動畫高亮（“拇指”），用於指示當前活動的部分。由於這需要客戶端互動來檢測當前的視窗位置，我們需要一種聰明的方法以平滑地在我們伺服器渲染的綱要上進行動畫。

SVG 來解救

解決方案使用 SVG 路徑命令在客戶端重現我們的目錄綱要的精確形狀。然後該路徑用作我們動畫高亮的掩碼。

首先，我們構建了一個精確匹配我們目錄綱要的 SVG 路徑：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 236">
  <path
    d="M1 0 L1 20 L13 36 L13 56 L1 72 L1 92 L13 108 L13 128 L1 144 L1 164 L1 180 L1 200 L13 216 L13 236"
    stroke="white"
    strokeWidth="1"
    fill="none"
  />
</svg>

SVG 路徑的 d 屬性包含定義路徑形狀的一系列命令。在此情況下，它創建了一條鋸齒形的線，該線正好匹配目錄綱要。命令可以分解如下：

M1 0 - 移動到座標 (1,0) 而不繪製
L1 20 - 繪製到座標 (1,20) 的直線
L13 36 - 繪製到座標 (13,36) 的直線
...等等，創建我們綱要的每一部分

這條路徑與我們伺服器渲染的目錄綱要相同，但作為一個單獨的 SVG 路徑來用於遮罩。

動畫高亮

使用我們的 SVG 路徑，我們現在可以創建一個沿著這條路徑運動的動畫高亮。使用我們動畫線條示例中的相同遮罩技術：

<div
  style={{
    maskImage: `url("data:image/svg+xml,${
      // URI 編碼的 SVG 圖像
      encodeURIComponent(
        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 236">...</svg>`
      )
    })`,
  }}
>
  <div
    style={{
      width: 1,
      height: thumb.height,
      transform: `translateY(${thumb.top}px)`,
      transition: "all 500ms",
      backgroundColor: "white",
    }}
  />
</div>

此代碼創建了一個被我們 SVG 路徑遮罩的 div，使其僅在目錄綱要可見。在這個遮罩區域中，我們再創建一個 div（“拇指”）代表當前活動的部分。當用戶滾動文檔時，拇指的位置和高度會更新以高亮目錄中的對應部分。

這種方法的美妙之處在於它保持了：

伺服器渲染靜態結構（目錄綱要）的清晰分離
客戶端渲染動態元素（動畫高亮）的分離

這樣的結果是目錄在初始頁面渲染時立即載入，然後一旦客戶端 JavaScript 執行，便無縫添加互動性。

如果您有興趣了解完整的實現，您可以查看 GitHub 上的源代碼。

SVG 初學者指南：分解解析

如果您是 SVG 新手，覺得上述概念具有挑戰性，讓我們將它們簡化為較易理解的術語：

什麼是 SVG？

將 SVG 想像成“用代碼繪畫”而不是使用像素。當您在 SVG 中創建圖像時，您是在給瀏覽器下達指令，如“在這裡畫一個圓形”或“從點 A 到點 B 畫一條線”。這使得 SVG 圖像具無限可擴展性——因為瀏覽器根據這些指令重畫它們，所以在任何大小下看起來都很銳利。

遮罩概念解釋

SVG 遮罩就像使用模板。想像從一塊硬紙板上切出一條細線，然後將噴漆通過它噴塗——只有硬紙板切掉的地方能看到漆。在我們的示例中：

遮罩就是我們的“硬紙板模板”（線或路徑）
矩形的顏色/漸變就是我們的“漆”
動畫就像在模板後面移動漆

當我們在我們的線形遮罩後面動畫化彩色矩形時，它創造了顏色沿著線條流動的幻覺——就像電流通過電線一樣。

實際應用

這些技術不僅僅是視覺上的點綴——它們在現代網頁界面中具有實際用途：

動畫線條 可以視覺地代表數據流、系統連接或引導用戶完成多步驟過程
動態目錄 幫助用戶了解其當前在長篇內容中的位置並提高導航效率

通過將伺服器端渲染的性能與客戶端動畫的互動性相結合，這些 SVG 技術提供了即時加載和豐富用戶體驗——對於亞洲競爭激烈的技術領域中的網頁開發者而言，這是一種雙贏，因為性能和美觀都是至關重要的。

結論

SVG 提供了一組強大的工具，用於創建複雜的、互動的和高性能的網頁元素。我們探索的技術——動畫線條和動態目錄——展示了 SVG 如何被利用來創建其他網頁技術難以實現的引人入勝的用戶體驗。

這些方法的特別價值在於它們與現代網頁開發實踐的兼容性，包括伺服器端渲染和漸進式增強。通過在伺服器上渲染靜態結構並在客戶端添加動態行為，我們可以創建既高效又互動的界面。

隨著網頁開發不斷演變，掌握 SVG 始終將是任何開發者工具箱中不可或缺的技能。無論您是在構建產品著陸頁、文檔網站還是數據可視化，我們所探索的技術為創建更具吸引力、高效和視覺印象深刻的網頁體驗奠定了基礎。

下次當您想使用 GIF 或複雜的 CSS 解決方案時，考慮一下 SVG 是否可以提供更優雅和高效的方法。您的用戶——以及未來的自己——都會感激不已。

搜尋此網誌

Mr. Tama - 創業、趨勢、生活

SVG動畫技巧：打造網頁線條流動與目錄效果