深入 SVG：矢量圖形、濾鏡與動態交互開發指南

1.SVG 詳細介紹

SVG（Scalable Vector Graphics）?是一種基于 XML 的矢量圖形格式，用于描述二維圖形。

1. 命名空間 (Namespace)??★ 了解

  • 命名空間 URI：http://www.w3.org/2000/svg

  • 用途：在 XML 或 XHTML 中區分不同標記語言的元素。

  • 聲明方式：

    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><!-- SVG 內容 -->
</svg>

2. SVG API??★ 了解

  • DOM API：通過 JavaScript 操作 SVG 元素。

    • 創建元素：document.createElementNS(namespaceURI, tagName)

    • createElementNS?是 JavaScript 中用于?創建帶有命名空間（Namespace）的 XML/SVG 元素?的方法。它的核心作用是明確指定元素所屬的標記語言規范（如 SVG、XHTML 等），確保瀏覽器能正確解析和渲染元素

      標記語言命名空間 URI
      SVGhttp://www.w3.org/2000/svg
      XHTMLhttp://www.w3.org/1999/xhtml
      MathMLhttp://www.w3.org/1998/Math/MathML

    • 示例：

      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
document.body.appendChild(svg);

  • SVG DOM 接口：如?SVGElement,?SVGRectElement,?SVGPathElement?等，提供特定元素的屬性和方法,用于在代碼中操作不同類型的 SVG 元素。它們屬于 SVG DOM（文檔對象模型）規范，提供了特定 SVG 元素的屬性和方法

    接口對應的 SVG 元素作用
    SVGElement所有 SVG 元素的基礎接口提供所有 SVG 元素共有的屬性和方法（如?id,?className,?style?等）
    SVGRectElement<rect>操作矩形元素（如修改?x,?y,?width,?height?等屬性）
    SVGPathElement<path>操作路徑元素（如動態修改?d?屬性）

  • 動畫 API：支持 SMIL（已部分棄用）、CSS 動畫或 JavaScript 動畫庫（如 GSAP）。

(1)?SVGElement?- 基礎功能?★ 了解

const svg = document.querySelector('svg');
console.log(svg instanceof SVGElement); // true// 通用方法
svg.setAttribute('width', '200'); 
svg.addEventListener('click', () => alert('SVG被點擊了'));

(2)?SVGRectElement?- 操作矩形?★ 了解

const rect = document.querySelector('rect');
console.log(rect instanceof SVGRectElement); // true// 特有屬性
rect.x.baseVal.value = 10;  // 修改 x 坐標
rect.width.baseVal.value = 50; // 修改寬度
rect.rx.baseVal.value = 5;  // 修改圓角半徑

(3)?SVGPathElement?- 操作路徑?★ 了解

const path = document.querySelector('path');
console.log(path instanceof SVGPathElement); // true// 動態修改路徑
path.setAttribute('d', 'M10 10 L50 50'); // 獲取路徑總長度（用于動畫）
const pathLength = path.getTotalLength();

(4)完整實例??★ 了解

<!DOCTYPE html>
<html>
<body><svg id="mySvg" width="200" height="200" style="border:1px solid #ddd"></svg><button id="addRect">添加矩形</button><button id="addPath">添加路徑</button><script>const svg = document.getElementById('mySvg');// 添加矩形document.getElementById('addRect').addEventListener('click', () => {const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');rect.setAttribute('x', '10');rect.setAttribute('y', '10');rect.setAttribute('width', '50');rect.setAttribute('height', '50');rect.setAttribute('fill', getRandomColor());// 類型斷言為 SVGRectElementconst rectElement = rect instanceof SVGRectElement ? rect : null;if (rectElement) {rectElement.addEventListener('click', () => {rectElement.width.baseVal.value *= 1.2; // 點擊放大寬度});}svg.appendChild(rect);});// 添加路徑document.getElementById('addPath').addEventListener('click', () => {const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');path.setAttribute('d', 'M10 80 Q 50 10 100 80 T 180 80');path.setAttribute('stroke', 'black');path.setAttribute('fill', 'none');// 類型斷言為 SVGPathElementconst pathElement = path instanceof SVGPathElement ? path : null;if (pathElement) {console.log('路徑長度:', pathElement.getTotalLength());}svg.appendChild(path);});function getRandomColor() {return `hsl(${Math.random() * 360}, 70%, 50%)`;}</script>
</body>
</html>

3. 常用 SVG 代碼示例??★ 基礎

示例 3.1 - 基本形狀

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 基本形狀</title>
</head>
<body><svg width="400" height="300"><!-- 矩形 --><rect x="10" y="10" width="50" height="30" fill="blue" stroke="black" stroke-width="2"/><!-- 圓形 --><circle cx="100" cy="50" r="30" fill="red"/><!-- 橢圓 --><ellipse cx="200" cy="50" rx="40" ry="20" fill="green"/><!-- 線條 --><line x1="10" y1="100" x2="150" y2="100" stroke="purple" stroke-width="3"/><!-- 折線 --><polyline points="10,150 50,120 90,180" fill="none" stroke="orange"/><!-- 多邊形 --><polygon points="200,150 250,120 300,180" fill="yellow" stroke="brown"/></svg>
</body>
</html>

效果展示:?

示例 3.2 - 路徑（Path）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 路徑</title>
</head>
<body><svg width="200" height="200"><path d="M10 80 Q 100 10 190 80 T 370 80"fill="none" stroke="black" stroke-width="2"/></svg>
</body>
</html>

效果展示:??

示例 3.3 - 文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 文本</title>
</head>
<body><svg width="300" height="100"><text x="20" y="30" font-family="Arial" font-size="20" fill="navy">SVG 文本示例 --> 沐土</text></svg>
</body>
</html>

效果展示:??

示例 3.4 - 漸變與圖案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 漸變與圖案</title>
</head>
<body><svg width="200" height="200"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ff0000"/><stop offset="100%" stop-color="#0000ff"/></linearGradient><pattern id="pattern1" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="10" height="10" fill="#00ff00"/></pattern></defs><rect x="10" y="10" width="100" height="100" fill="url(#grad1)"/><circle cx="150" cy="150" r="30" fill="url(#pattern1)"/></svg>
</body>
</html>

效果展示:??

示例 3.5 - 濾鏡效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 濾鏡</title>
</head>
<body><svg width="200" height="200"><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter><filter id="shadow"><feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="rgba(0,0,0,0.5)"/></filter></defs><rect x="20" y="20" width="100" height="100" fill="teal" filter="url(#shadow)"/><circle cx="150" cy="150" r="30" fill="red" filter="url(#blur)"/></svg>
</body>
</html>

效果展示:??

示例 3.6 - 動畫

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 動畫</title><style>.pulse {animation: pulse 1s infinite;}@keyframes pulse {0% { r: 10; }50% { r: 20; }100% { r: 10; }}</style>
</head>
<body><!-- SMIL 動畫（部分瀏覽器已棄用） --><svg width="200" height="200"><circle cx="50" cy="50" r="20" fill="blue"><animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/></circle></svg><!-- CSS 動畫 --><svg width="200" height="200"><circle class="pulse" cx="100" cy="100" r="10" fill="green"/></svg>
</body>
</html>

效果展示:??

示例 3.7 - 交互性（JavaScript）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 交互</title>
</head>
<body><svg width="200" height="200"><rect id="btn" x="50" y="50" width="100" height="50" fill="gray"/><script>document.getElementById('btn').addEventListener('click', function() {this.setAttribute('fill', '#' + Math.floor(Math.random()*16777215).toString(16));});</script></svg>
</body>
</html>

效果展示:??

示例 3.8 - 視口與 viewBox

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 視口</title>
</head>
<body><svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle cx="50" cy="50" r="40" fill="orange"/></svg>
</body>
</html>

效果展示:??

示例 3.9 - 復用元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 復用元素</title>
</head>
<body><svg width="300" height="100"><defs><symbol id="icon" viewBox="0 0 24 24"><path d="M12 2L3 9v12h18V9l-9-7z"/></symbol></defs><use href="#icon" x="10" y="10" width="30" height="30" fill="purple"/><use href="#icon" x="100" y="10" width="30" height="30" fill="pink"/></svg>
</body>
</html>

效果展示:??

4.SVG 中常見圖形元素的屬性總結??★ 重要

1. 矩形?<rect>

屬性列表：

屬性含義示例值
x矩形左上角的 x 坐標"10"
y矩形左上角的 y 坐標"10"
width矩形的寬度"50"
height矩形的高度"30"
rx圓角矩形的水平圓角半徑（可選）"5"
ry圓角矩形的垂直圓角半徑（可選）"5"
fill填充顏色"blue",?"#00FF00"
stroke邊框顏色"black"
stroke-width邊框寬度"2"
stroke-dasharray虛線邊框樣式（如?"5,3"?表示 5px 實線 + 3px 空白）"5,3"
opacity透明度（0-1）"0.5"
<rect x="10" y="10" width="50" height="30" rx="5" fill="blue" stroke="black" stroke-width="2"/>

2. 圓形?<circle>

屬性含義示例值
cx圓心的 x 坐標"100"
cy圓心的 y 坐標"50"
r圓的半徑"30"
fill填充顏色"red"
stroke邊框顏色（同?<rect>）"black"

示例：

<circle cx="100" cy="50" r="30" fill="red"/>

3. 橢圓?<ellipse>

屬性含義示例值
cx橢圓中心的 x 坐標"200"
cy橢圓中心的 y 坐標"50"
rx水平半徑"40"
ry垂直半徑"20"
fill填充顏色"green"

示例：

<ellipse cx="200" cy="50" rx="40" ry="20" fill="green"/>

4. 線條?<line>

屬性含義示例值
x1,?y1起點坐標"10",?"100"
x2,?y2終點坐標"150",?"100"
stroke線條顏色（必須設置）"purple"
stroke-width線條寬度"3"

示例：

<line x1="10" y1="100" x2="150" y2="100" stroke="purple" stroke-width="3"/>

5. 折線?<polyline>

屬性含義示例值
points一系列坐標點（格式：x1,y1 x2,y2...）"10,150 50,120 90,180"
fill填充顏色（通常設為?"none"）"none"
stroke線條顏色"orange"

示例：

<polyline points="10,150 50,120 90,180" fill="none" stroke="orange"/>

6. 多邊形?<polygon>

屬性含義示例值
points閉合路徑的坐標點（同?<polyline>）"200,150 250,120 300,180"
fill填充顏色"yellow"
stroke邊框顏色"brown"

示例：

<polygon points="200,150 250,120 300,180" fill="yellow" stroke="brown"/>

7. 路徑?<path>?★ 重要·難點

屬性含義示例值
d路徑指令（見下方說明）"M10 80 Q 100 10 190 80"
fill填充顏色（"none"?表示不填充）"none"
stroke路徑線條顏色"black"

路徑指令（d?屬性）：

SVG 中的?<path>?元素通過?d?屬性定義路徑形狀，d?屬性由一系列路徑命令（Path Commands）組成。這些命令通過字母（區分大小寫）和坐標參數控制繪制行為。以下是所有命令的詳細說明：

1. 基本命令分類?★ 重要·難點

類型

命令

含義

參數格式

移動

M,?m

移動到新起點

(x,y)

直線

L,?l

畫直線到目標點

(x,y)

水平/垂直線

H,?h

水平畫線

x

V,?v

垂直畫線

y

曲線

Q,?q

二次貝塞爾曲線

(x1,y1 x,y)

T,?t

平滑二次貝塞爾曲線（自動對稱）

(x,y)

C,?c

三次貝塞爾曲線

(x1,y1 x2,y2 x,y)

S,?s

平滑三次貝塞爾曲線（自動對稱）

(x2,y2 x,y)

弧線

A,?a

橢圓弧

(rx,ry x-axis-rotation large-arc-flag sweep-flag x,y)

閉合路徑

Z,?z

閉合路徑（回到起點）

無參數

1. 基本命令分類

2.1 移動命令（Move）

  • M x,y?/?m dx,dy

    • 將畫筆移動到指定坐標（絕對或相對）。

    • 示例：M 10,20?表示移動到?(10,20)。

    • 注意：路徑必須以?M?或?m?開始。

2.2 直線命令（Line）

  • L x,y?/?l dx,dy

    • 從當前點畫直線到目標點。

    • 示例：L 50,50?畫線到?(50,50)。

  • H x?/?h dx

    • 水平畫線到?x?坐標（y?不變）。

  • V y?/?v dy

    • 垂直畫線到?y?坐標（x?不變）。

2.3 曲線命令（Curve）

二次貝塞爾曲線（Quadratic Bézier）

  • Q x1,y1 x,y?/?q dx1,dy1 dx,dy

    • 通過控制點?(x1,y1)?畫曲線到?(x,y)。

    • 示例：Q 30,80 50,50

      • 起點到終點通過?(30,80)?控制彎曲。

平滑二次貝塞爾（Smooth Quadratic）

  • T x,y?/?t dx,dy

    • 自動對稱前一控制點，簡化連續曲線繪制。

    • 示例：

      M 10,80 Q 30,10 50,80 T 90,80

三次貝塞爾曲線（Cubic Bézier）

  • C x1,y1 x2,y2 x,y?/?c dx1,dy1 dx2,dy2 dx,dy

    • 兩個控制點?(x1,y1)?和?(x2,y2)?定義曲線形狀。

    • 示例：C 20,100 80,0 100,50

平滑三次貝塞爾（Smooth Cubic）

  • S x2,y2 x,y?/?s dx2,dy2 dx,dy

    • 自動對稱前一曲線的第二個控制點。

2.4 弧線命令（Arc）

  • A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y

    • 參數說明：

      • rx,?ry：橢圓半徑。

      • x-axis-rotation：橢圓旋轉角度（度）。

      • large-arc-flag：0?表示小弧，1?表示大弧。

      • sweep-flag：0?表示逆時針，1?表示順時針。

      • x,y：終點坐標。

    • 示例：

      // 表示從當前點到 (100,100) 畫一個半徑為 30 的順時針小弧。
A 30,30 0 0 1 100,100

2.5 閉合命令（Close Path）

  • Z?/?z

    • 從當前點畫直線回路徑起點，閉合形狀。

    • 注意：不區分大小寫，無參數。

3. 相對 vs 絕對坐標

  • 大寫字母（如?M,?L）：絕對坐標（基于 SVG 坐標系原點）。

  • 小寫字母（如?m,?l）：相對坐標（基于當前點）。

    • 示例：

      M 10,10 l 20,20  // 實際繪制到 (30,30)

4. 綜合示例

繪制一個心形

<path d="M 100,30Q 100,0 70,0Q 40,0 40,30Q 40,60 70,80Q 100,100 120,80Q 150,60 150,30Q 150,0 120,0Q 90,0 90,30Z
" fill="red"/>

解析：

  1. M 100,30：起點。

  2. 多段?Q?命令繪制二次貝塞爾曲線形成心形輪廓。

  3. Z?閉合路徑。

5. 高級技巧

  • 路徑優化：使用?T/S?簡化連續曲線。

  • 性能：減少冗余命令（如合并相鄰直線）。

  • 工具：

    • 使用?SVG Path Editor?可視化編輯。

    • 通過?path.getTotalLength()?獲取路徑長度（用于動畫）。

6. 瀏覽器支持

所有現代瀏覽器均支持完整的?d?屬性命令，包括：

  • Chrome, Firefox, Safari, Edge (Chromium), Opera。

  • 注意：舊版 IE 可能對復雜路徑（如弧線）支持不完整。

path完整的示例代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SVG Path 命令大全 - 可直接運行示例</title><style>body {font-family: Arial, sans-serif;max-width: 1000px;margin: 0 auto;padding: 20px;line-height: 1.6;}.demo-container {display: flex;flex-wrap: wrap;gap: 30px;margin-top: 20px;}.demo-box {border: 1px solid #ddd;padding: 15px;border-radius: 5px;background: #f9f9f9;width: 400px;}svg {display: block;margin: 10px auto;background: #f0f0f0;}h2 {color: #2c3e50;border-bottom: 2px solid #eee;padding-bottom: 10px;}code {background: #eee;padding: 2px 5px;border-radius: 3px;font-family: monospace;}</style>
</head>
<body>
<h1>SVG Path 命令完整示例</h1><div class="demo-container"><!-- 1. 直線命令 --><div class="demo-box"><h2>1. 直線命令 (M, L, H, V)</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 20,20 L 100,20 L 100,100 H 20 V 50"fill="none" stroke="red" stroke-width="3"/><text x="10" y="130" font-size="12">M 20,20 L 100,20 L 100,100 H 20 V 50</text></svg><p><strong>說明：</strong></p><ul><li><code>M 20,20</code> - 移動到起點 (20,20)</li><li><code>L 100,20</code> - 畫直線到 (100,20)</li><li><code>L 100,100</code> - 畫直線到 (100,100)</li><li><code>H 20</code> - 水平畫線到 x=20</li><li><code>V 50</code> - 垂直畫線到 y=50</li></ul></div><!-- 2. 二次貝塞爾曲線 --><div class="demo-box"><h2>2. 二次貝塞爾曲線 (Q, T)</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 20,50 Q 80,0 140,50 T 260,50"fill="none" stroke="blue" stroke-width="3"/><circle cx="80" cy="0" r="3" fill="green"/><circle cx="200" cy="50" r="3" fill="green"/><text x="10" y="130" font-size="12">M 20,50 Q 80,0 140,50 T 260,50</text></svg><p><strong>說明：</strong></p><ul><li><code>Q 80,0 140,50</code> - 通過控制點 (80,0) 畫曲線到 (140,50)</li><li><code>T 260,50</code> - 自動對稱控制點繼續畫曲線</li><li style="color:green">綠點：控制點位置</li></ul></div><!-- 3. 三次貝塞爾曲線 --><div class="demo-box"><h2>3. 三次貝塞爾曲線 (C, S)</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 20,100 C 40,20 100,20 120,100 S 180,180 200,100"fill="none" stroke="purple" stroke-width="3"/><circle cx="40" cy="20" r="3" fill="orange"/><circle cx="100" cy="20" r="3" fill="orange"/><circle cx="160" cy="180" r="3" fill="orange"/><text x="10" y="130" font-size="12">M 20,100 C 40,20 100,20 120,100 S 180,180 200,100</text></svg><p><strong>說明：</strong></p><ul><li><code>C 40,20 100,20 120,100</code> - 兩個控制點畫曲線</li><li><code>S 180,180 200,100</code> - 自動對稱第一個控制點</li><li style="color:orange">橙點：控制點位置</li></ul></div><!-- 4. 弧線命令 --><div class="demo-box"><h2>4. 弧線命令 (A)</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 50,50 A 30,50 0 1 1 150,50"fill="none" stroke="brown" stroke-width="3"/><text x="10" y="130" font-size="12">M 50,50 A 30,50 0 1 1 150,50</text></svg><p><strong>參數說明：</strong></p><ul><li><code>A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y</code></li><li><code>30,50</code> - 橢圓半徑 (x半徑30, y半徑50)</li><li><code>0</code> - 不旋轉</li><li><code>1</code> - 大弧 (0為小弧)</li><li><code>1</code> - 順時針方向 (0為逆時針)</li><li><code>150,50</code> - 終點坐標</li></ul></div><!-- 5. 閉合路徑 --><div class="demo-box"><h2>5. 閉合路徑 (Z)</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 50,20 L 100,50 L 80,100 L 30,80 Z"fill="lightgreen" stroke="darkgreen" stroke-width="3"/><text x="10" y="130" font-size="12">M 50,20 L 100,50 L 80,100 L 30,80 Z</text></svg><p><strong>說明：</strong></p><ul><li><code>Z</code> - 閉合路徑（自動從最后一點畫直線回起點）</li><li>注意：大小寫不敏感 (<code>z</code> 效果相同)</li></ul></div><!-- 6. 綜合示例：心形 --><div class="demo-box"><h2>6. 綜合示例：心形</h2><svg width="200" height="150" viewBox="0 0 200 150"><path d="M 100,30Q 100,0 70,0Q 40,0 40,30Q 40,60 70,80Q 100,100 120,80Q 150,60 150,30Q 150,0 120,0Q 90,0 90,30Z" fill="red" stroke="darkred" stroke-width="2"/><text x="10" y="130" font-size="12">M 100,30 Q 100,0 70,0 Q 40,0 40,30 ... Z</text></svg><p><strong>說明：</strong></p><ul><li>使用多個 <code>Q</code> (二次貝塞爾曲線) 命令繪制</li><li><code>Z</code> 閉合路徑完成形狀</li></ul></div>
</div><h2>使用技巧</h2>
<ul><li><strong>相對命令</strong>：小寫字母 (<code>m, l, q</code> 等) 使用相對坐標</li><li><strong>路徑優化</strong>：連續相同命令可省略字母，如 <code>L 10,10 20,20</code></li><li><strong>工具推薦</strong>：<ul><li><a href="https://yqnn.github.io/svg-path-editor/" target="_blank">SVG Path 可視化編輯器</a></li><li>Adobe Illustrator 或 Inkscape 導出 SVG 路徑</li></ul></li>
</ul>
</body>
</html>

8. 文本?<text>

屬性含義示例值
x,?y文本基線起點坐標"20",?"30"
font-family字體"Arial"
font-size字體大小"20"
fill文本顏色"navy"
text-anchor文本對齊（start/middle/end）"middle"

示例：

<text x="20" y="30" font-family="Arial" font-size="20" fill="navy">SVG Text</text>

9.通用屬性

所有圖形元素均可使用以下屬性：

屬性含義
fill填充顏色（支持顏色名、HEX、RGB等）
stroke邊框顏色
stroke-width邊框寬度
opacity整體透明度（0-1）
transform變換（如?rotate(45)、scale(2)）

10.屬性總結

  • 基本圖形：<rect>,?<circle>,?<ellipse>,?<line>,?<polyline>,?<polygon>。

  • 高級路徑：<path>?通過指令實現任意形狀。

  • 文本：<text>?支持樣式和定位。

  • 通用樣式：fill,?stroke,?opacity?等可跨元素復用。

5.使用 SVG 繪制的移動端常見返回按鈕?★ 常用

方案 1：直接使用?<path>?繪制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 返回按鈕</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.back-button {width: 40px;height: 40px;cursor: pointer;}.back-button:hover path {fill: #007AFF; /* 懸停時變色 */}</style>
</head>
<body>
<!-- 返回按鈕 SVG -->
<svg class="back-button" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--d屬性路徑說明：M20 11    = 移動到起點(20,11)H7.83     = 水平畫線到x=7.83l5.59-5.59= 相對繪制斜線（箭頭頭部）L12 4     = 絕對坐標畫線到(12,4)l-8 8 8 8 = 繪制箭頭尾部1.41-1.41 = 調整箭頭頭部細節L7.83 13  = 畫線到(7.83,13)H20v-2    = 完成箭頭形狀--><pathd="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"fill="#000000"stroke="none"/>
</svg><!-- 下方是路徑的詳細文字說明 -->
<script>document.addEventListener('DOMContentLoaded', () => {const pathDescription = `【路徑命令解析】1. M20 11   : 移動到起點(20,11)2. H7.83    : 水平向左畫線到x=7.833. l5.59-5.59: 相對繪制斜線（左上箭頭頭部）4. L12 4    : 畫線到(12,4)5. l-8 8    : 向左下方畫線6. 8 8      : 向右下方畫線7. 1.41-1.41: 微調箭頭形狀8. L7.83 13 : 畫線到(7.83,13)9. H20v-2   : 完成右側線條10. z       : 閉合路徑`;console.log(pathDescription);});
</script>
</body>
</html>

效果展示:

關鍵點說明：

  1. 路徑 (d?屬性)：

    • M20 11：移動到起點 (20, 11)。

    • H7.83：水平畫線到 x=7.83。

    • l5.59-5.59：相對繪制斜線（箭頭頭部）。

    • L12 4：絕對坐標畫線到 (12, 4)。

    • l-8 8 8 8：繪制箭頭尾部兩段線。

    • 1.41-1.41：調整箭頭頭部細節。

    • H20v-2z：閉合路徑。

  2. 交互效果：

    • 通過 CSS 懸停 (:hover) 改變顏色。

    • cursor: pointer?表示可點擊。

方案 2：使用?<symbol>?復用（適合多個按鈕）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 復用返回按鈕</title><style>body {display: flex;gap: 20px;justify-content: center;align-items: center;height: 100vh;margin: 0;}.back-button {width: 40px;height: 40px;cursor: pointer;}.back-button:hover use {fill: #FF3B30; /* 懸停紅色 */}</style>
</head>
<body><!-- 定義符號 --><svg style="display: none;"><symbol id="back-arrow" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></symbol></svg><!-- 復用按鈕 --><svg class="back-button"><use href="#back-arrow" fill="#000000"/></svg><svg class="back-button"><use href="#back-arrow" fill="#007AFF"/></svg>
</body>
</html>

優勢：

  • 復用性：通過?<symbol>?定義一次，多處通過?<use>?引用。

  • 靈活樣式：每個實例可獨立設置顏色/大小。

方案3:其他變體（簡潔箭頭）

如果需要一個更簡單的箭頭樣式，可以修改?d?屬性：

<path d="M15 18l-6-6 6-6" fill="none" stroke="#000" stroke-width="2"/>

效果：←?樣式的細線箭頭。

6.SVG 和 Canvas 的區別?★ 了解

SVG 和 Canvas 是兩種完全不同的網頁圖形技術，它們在實現方式、適用場景和性能特點上有顯著差異。以下是它們的核心區別：

1. 基礎概念

特性SVGCanvas
類型矢量圖形（基于 XML）位圖（基于 JavaScript API）
渲染方式保留模式（Retained Mode）立即模式（Immediate Mode）
DOM 支持是（每個圖形是 DOM 元素）否（只是一個畫布像素區）
分辨率無關是（無限縮放不失真）否（放大后像素化）

2. 技術細節對比

SVG

工作原理：
通過 XML 描述圖形，瀏覽器解析后生成可操作的 DOM 節點。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/>
</svg>

  • 特點：

    • 支持 CSS 樣式和動畫。

    • 內置事件處理（如?onclick）。

    • 適合靜態或交互復雜的圖形（如圖標、圖表）。

Canvas

工作原理：
通過 JavaScript 動態繪制像素，無持久化對象。

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fill();

  • 特點：

    • 高性能，適合頻繁重繪（如游戲、動態數據可視化）。

    • 需要手動管理狀態和重繪。

    • 無內置事件系統，需通過數學計算實現交互。

3. 性能與適用場景

場景SVGCanvas
圖形復雜度適合少量復雜圖形（如矢量圖標）適合大量簡單圖形（如粒子效果）
動態更新頻率低（DOM 操作成本高）高（直接操作像素）
交互需求內置事件支持（如點擊、懸停）需手動計算交互區域
動畫CSS/SMIL 動畫或 JS 控制屬性必須通過 JS 逐幀重繪
典型應用地圖、UI 圖標、可縮放圖表游戲、實時數據可視化、圖像處理

4. 代碼示例對比

繪制一個可點擊的圓形

SVG 實現（自帶事件）：

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" onclick="alert('Clicked!')"/>
</svg>

Canvas 實現（需手動檢測點擊）：

<canvas id="canvas" width="100" height="100"></canvas>
<script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 繪制圓ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(50, 50, 40, 0, Math.PI * 2);ctx.fill();// 手動檢測點擊canvas.addEventListener('click', (e) => {const x = e.offsetX, y = e.offsetY;const distance = Math.sqrt((x - 50) ** 2 + (y - 50) ** 2);if (distance <= 40) alert('Clicked!');});
</script>

5. 選擇建議

  • 用 SVG 如果：

    • 需要矢量縮放（如響應式設計）。

    • 圖形需要單獨交互或動畫。

    • 圖形數量較少（避免 DOM 性能問題）。

  • 用 Canvas 如果：

    • 需要高性能渲染（如 60fps 動畫）。

    • 處理像素級操作（如濾鏡、圖像分析）。

    • 圖形數量極多（如上萬元素的可視化）。

6. 進階對比

高級功能SVGCanvas
文本渲染完美支持（可選中、樣式豐富）基礎支持（需手動處理換行等）
圖像處理有限（通過?<image>?標簽）強大（像素操作、WebGL 擴展）
內存占用較高（DOM 節點開銷）較低（純像素緩沖區）
學習曲線簡單（聲明式語法）較陡（需理解繪圖 API）

7.總結

  • SVG?是聲明式的矢量圖形，適合交互復雜、需要縮放的場景。

  • Canvas?是命令式的位圖繪制，適合高性能、動態渲染的場景。

根據項目需求混合使用兩者（例如用 SVG 做 UI，Canvas 渲染背景動畫）往往是最佳實踐。

?7.SVG兼容問題匯總?★ 重要

1. 瀏覽器兼容性問題

1.1 舊版瀏覽器（IE 8 及以下）

  • 問題：

    • IE 8 及更早版本完全不支持 SVG。

    • IE 9-11 部分支持，但存在 Bug（如濾鏡效果、CSS 動畫）。

  • 解決方案：

    • 使用 Polyfill（如?SVG for Everybody）或轉換為 PNG 備用。

    • 通過?<img>?引入 SVG 時，添加?onerror?回退：

      <img src="image.svg" onerror="this.src='fallback.png'" />

1.2 Android 4.3 及以下

  • 問題：

    • 部分 SVG 特性（如?viewport、transform）支持不完整。

  • 解決方案：

    • 避免復雜變換，使用簡化 SVG 代碼。

2. 功能兼容性問題

2.1 SVG 濾鏡（<filter>）

  • 問題：

    • 部分瀏覽器（如舊版 Firefox）對?feBlend、feColorMatrix?等濾鏡效果支持不完整。

  • 解決方案：

    • 使用 CSS 濾鏡（如?filter: blur(5px)）作為備用。

    • 測試效果并簡化濾鏡鏈。

2.2 SVG 動畫

  • 問題：

    • SMIL 動畫（如?<animate>）在 Chrome 45+ 已棄用，但部分瀏覽器仍支持。

    • CSS 動畫對?transform?屬性的支持不一致。

  • 解決方案：

    • 改用?CSS 動畫或?JavaScript 動畫庫（如 GSAP、Snap.svg）。

    • 檢測 SMIL 支持并回退：

      if (!document.createElementNS('http://www.w3.org/2000/svg', 'animate').toString().includes('SVGAnimateElement')) {console.log('SMIL 不支持');
}

2.3 字體與文本

  • 問題：

    • <text>?元素在跨平臺渲染時可能出現字體不一致或換行錯誤。

  • 解決方案：

    • 使用?textPath?或手動換行（<tspan>）。

    • 將文本轉換為路徑（設計工具中操作）。

3. 嵌入方式的兼容性

3.1?<img>?標簽引入 SVG

  • 問題：

    • 無法通過 CSS 修改 SVG 內部樣式。

    • 部分瀏覽器禁用 SVG 內聯腳本。

  • 解決方案：

    • 改用?<object>?或內聯 SVG：

      <object data="image.svg" type="image/svg+xml"></object>

3.2 CSS 背景圖

  • 問題：

    • 舊版 iOS Safari 可能無法正確縮放 SVG 背景。

  • 解決方案：

    • 顯式設置?background-size：

      .element {background: url('image.svg');background-size: 100% 100%;
}

4. 交互與腳本問題

4.1 事件綁定

  • 問題：

    • 動態創建的 SVG 元素在舊版 Android 中可能無法觸發事件。

  • 解決方案：

    • 使用事件委托（委托到父級 SVG 或 HTML 元素）。

4.2 動態修改 SVG

  • 問題：

    • 直接修改?d?屬性（如?<path>）在 IE 中可能不觸發重繪。

  • 解決方案：

    • 強制重繪：

      path.setAttribute('d', newValue);
path.style.transform = 'scale(1)'; // 觸發重繪

5. 其他常見問題

5.1 尺寸與視口

  • 問題：

    • 未設置?viewBox?時，某些瀏覽器可能無法正確縮放 SVG。

  • 解決方案：

    • 始終顯式定義?viewBox?和?width/height：

      <svg width="100" height="100" viewBox="0 0 100 100">...</svg>

5.2 外鏈資源

  • 問題：

    • 外部 SVG 文件中的?<use href="external.svg#icon">?在 Firefox 中可能受限。

  • 解決方案：

    • 使用內聯 SVG 或工具鏈（如 Webpack）將 SVG 打包為數據 URI。

6.svg兼容性總結

  • 主要問題：舊版瀏覽器（IE/舊移動端）、濾鏡/動畫支持、動態交互。

  • 檢測函數:

    // Can I Use 也可以直接看
if (Modernizr.svg) {console.log('SVG 支持');
}

  • 通用建議：

    1. 優先使用內聯 SVG 以最大化控制權。

    2. 復雜場景提供 PNG 回退。

    3. 測試目標平臺的關鍵功能（如動畫、濾鏡）。

通過預處理工具（如 SVGO 優化代碼）和漸進增強策略，可以顯著降低 SVG 的兼容性風險。

8.SVG 常用小圖標集合??★ 常用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端常用SVG小圖標集合</title><style>body {font-family: 'Arial', sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}h1 {color: #333;text-align: center;margin-bottom: 30px;}.icon-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 20px;margin-top: 20px;}.icon-box {background: white;border-radius: 8px;padding: 15px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);text-align: center;transition: transform 0.2s;}.icon-box:hover {transform: translateY(-5px);}.icon {width: 50px;height: 50px;margin: 0 auto 10px;display: block;}.icon-name {font-weight: bold;color: #444;margin-bottom: 5px;}.icon-desc {font-size: 12px;color: #666;}</style>
</head>
<body>
<h1>前端常用SVG小圖標集合</h1><div class="icon-container"><!-- 1. 搜索圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--搜索圖標路徑說明：- 圓形代表放大鏡的鏡面- 直線代表放大鏡的手柄--><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"fill="#4285F4"/></svg><div class="icon-name">搜索圖標</div><div class="icon-desc">用于搜索框的放大鏡圖標</div></div><!-- 2. 菜單圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--菜單圖標路徑說明：- 三條水平線代表菜單選項--><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"fill="#5F6368"/></svg><div class="icon-name">菜單圖標</div><div class="icon-desc">移動端常見的漢堡菜單圖標</div></div><!-- 3. 關閉圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--關閉圖標路徑說明：- 兩條對角線組成X形狀--><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"fill="#EA4335"/></svg><div class="icon-name">關閉圖標</div><div class="icon-desc">用于彈窗、標簽等的關閉按鈕</div></div><!-- 4. 下載圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--下載圖標路徑說明：- 箭頭向下表示下載方向- 橫線代表下載內容--><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"fill="#34A853"/></svg><div class="icon-name">下載圖標</div><div class="icon-desc">用于文件下載按鈕</div></div><!-- 5. 上傳圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--上傳圖標路徑說明：- 箭頭向上表示上傳方向- 橫線代表上傳內容--><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"fill="#FBBC05"/></svg><div class="icon-name">上傳圖標</div><div class="icon-desc">用于文件上傳按鈕</div></div><!-- 6. 用戶圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--用戶圖標路徑說明：- 圓形代表用戶頭像- 路徑代表用戶身體--><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"fill="#4285F4"/></svg><div class="icon-name">用戶圖標</div><div class="icon-desc">用于用戶登錄、個人中心等</div></div><!-- 7. 設置圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--設置圖標路徑說明：- 齒輪形狀代表設置--><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"fill="#5F6368"/></svg><div class="icon-name">設置圖標</div><div class="icon-desc">用于系統設置、偏好設置等</div></div><!-- 8. 主頁圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--主頁圖標路徑說明：- 房屋形狀代表主頁--><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"fill="#EA4335"/></svg><div class="icon-name">主頁圖標</div><div class="icon-desc">用于返回首頁的導航按鈕</div></div><!-- 9. 通知圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--通知圖標路徑說明：- 鈴鐺形狀代表通知--><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"fill="#FBBC05"/></svg><div class="icon-name">通知圖標</div><div class="icon-desc">用于顯示系統或應用通知</div></div><!-- 10. 收藏圖標 --><div class="icon-box"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!--收藏圖標路徑說明：- 星形代表收藏--><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"fill="#34A853"/></svg><div class="icon-name">收藏圖標</div><div class="icon-desc">用于標記收藏內容</div></div>
</div><div style="margin-top: 30px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"><h2>使用說明</h2><ol><li>直接復制整個HTML文件保存即可使用</li><li>每個圖標都是獨立的SVG元素，可以直接復制到其他項目中使用</li><li>通過修改<code>fill</code>屬性可以改變圖標顏色</li><li>通過修改<code>width</code>和<code>height</code>可以調整圖標大小</li><li>所有圖標都使用標準的24x24 viewBox，保持清晰度</li></ol>
</div>
</body>
</html>

9.命名空間拓展?★ 了解

SVG 需要命名空間（Namespace）主要是為了解決?XML 文檔中元素和屬性名稱沖突的問題，確保 SVG 元素能夠被正確識別和處理;

1. 命名空間的核心作用

(1) 避免元素名稱沖突

當 XML 文檔中混合多種標記語言時（例如 SVG + HTML），命名空間可以區分同名元素。
示例：

<html xmlns="http://www.w3.org/1999/xhtml"><body><!-- SVG 畫布 --><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg><!-- 假設HTML也有一個<circle>元素 --><div class="circle"></div></body>
</html>

  • 如果沒有命名空間，瀏覽器無法區分?<circle>?是 SVG 的圓形還是 HTML 的其他元素。

(2) 明確語法規則

命名空間定義了元素的合法結構和屬性，確保瀏覽器/解析器能正確渲染 SVG。

2. SVG 命名空間的聲明方式

(1) 內聯 SVG（HTML5 中）

所有 SVG 元素繼承自?SVGElement，提供通用屬性和事件支持

<!-- 可以省略命名空間（瀏覽器會自動推斷） -->
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
(2) 獨立 SVG 文件或混合 XML
<!-- 必須聲明命名空間 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80"/>
</svg>

(3) 動態創建 SVG 元素

// 必須使用 createElementNS 而非 createElement
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
document.body.appendChild(svg);

(4)完整實例

<!DOCTYPE html>
<html>
<body><svg id="mySvg" width="200" height="200" style="border:1px solid #ddd"></svg><button id="addRect">添加矩形</button><button id="addPath">添加路徑</button><script>const svg = document.getElementById('mySvg');// 添加矩形document.getElementById('addRect').addEventListener('click', () => {const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');rect.setAttribute('x', '10');rect.setAttribute('y', '10');rect.setAttribute('width', '50');rect.setAttribute('height', '50');rect.setAttribute('fill', getRandomColor());// 類型斷言為 SVGRectElementconst rectElement = rect instanceof SVGRectElement ? rect : null;if (rectElement) {rectElement.addEventListener('click', () => {rectElement.width.baseVal.value *= 1.2; // 點擊放大寬度});}svg.appendChild(rect);});// 添加路徑document.getElementById('addPath').addEventListener('click', () => {const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');path.setAttribute('d', 'M10 80 Q 50 10 100 80 T 180 80');path.setAttribute('stroke', 'black');path.setAttribute('fill', 'none');// 類型斷言為 SVGPathElementconst pathElement = path instanceof SVGPathElement ? path : null;if (pathElement) {console.log('路徑長度:', pathElement.getTotalLength());}svg.appendChild(path);});function getRandomColor() {return `hsl(${Math.random() * 360}, 70%, 50%)`;}</script>
</body>
</html>

3. 為什么 HTML5 中可以省略命名空間？

  • 瀏覽器智能推斷：當?<svg>?直接嵌入 HTML5 文檔時，瀏覽器會自動將其關聯到 SVG 命名空間。

  • 歷史兼容性：HTML5 規范對混合內容做了特殊處理，簡化了寫法。

4. 必須顯式使用命名空間的場景

場景原因
XML 文檔（非HTML）XML 嚴格依賴命名空間來區分元素類型
XHTMLXHTML 是 XML 的一種，必須嚴格聲明
動態創建 SVG 元素JavaScript 無法自動推斷命名空間
SVG 濾鏡/動畫等高級功能部分瀏覽器要求明確命名空間以支持特性（如?<filter>、<animate>）

5. 命名空間的 URI 含義

  • http://www.w3.org/2000/svg?是一個標識符而非實際網址，用于唯一標識 SVG 規范。

  • 即使該 URL 不可訪問，瀏覽器仍能識別它代表 SVG。

6. 常見問題

問題1：忘記命名空間導致 SVG 不顯示

// 錯誤寫法（創建的是HTML元素，非SVG元素）
const circle = document.createElement("circle"); 
// 正確寫法
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

問題2：混合命名空間沖突

<!-- 錯誤示例 -->
<svg xmlns="http://example.com/custom-ns"><!-- 瀏覽器無法識別此命名空間中的SVG元素 --><circle cx="50" cy="50" r="40" fill="green"/>
</svg>

命名空間總結

場景是否需要命名空間示例
內聯 SVG（HTML5）可選<svg><circle/></svg>
獨立 SVG 文件必須<svg xmlns="..."><path/></svg>
動態創建 SVG必須createElementNS("...", "svg")
XML/XHTML 文檔必須<svg xmlns="...">...</svg>

命名空間是 XML 體系的基石，確保 SVG 在復雜文檔環境中能夠被正確解析和渲染。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/74572.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74572.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/74572.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

HTTPS 加密過程詳解

HTTPS 加密過程詳解

HTTPS 的核心組成是 HTTP 協議與 SSL/TLS 加密層的結合&#xff0c;通過加密傳輸、身份驗證和完整性校驗機制&#xff0c;確保數據安全。其加密過程通過以下方式保障數據的機密性、完整性和身份驗證&#xff1a; 一、HTTPS 的核心組成 1. HTTP 協議 作為基礎通信協議&#xf…
閱讀更多...
嵌入式硬件工程師從小白到入門-速通版（一）

嵌入式硬件工程師從小白到入門-速通版（一）

嵌入式硬件工程師從小白到入門&#xff1a;知識點速通與實戰指南 一、基礎硬件知識體系 電子電路基礎 基本概念&#xff1a;電流、電壓、電阻、電容、電感等&#xff1b;電路分析&#xff1a;歐姆定律、基爾霍夫定律、戴維南定理&#xff1b;元器件特性&#xff1a;二極管、三極…
閱讀更多...
SpringBoot通過Map實現天然的策略模式

SpringBoot通過Map實現天然的策略模式

&#x1f60a; 作者&#xff1a; 一恍過去 &#x1f496; 主頁&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社區&#xff1a; Java技術棧交流 &#x1f389; 主題&#xff1a; SpringBoot通過Map實現天然的策略模式 ?? 創作時間&#xff1a; 202…
閱讀更多...
WordPress WooCommerce 本地文件包含漏洞(CVE-2025-1661)

WordPress WooCommerce 本地文件包含漏洞(CVE-2025-1661)

免責聲明 僅供網絡安全研究與教育目的使用。任何人不得將本文提供的信息用于非法目的或未經授權的系統測試。作者不對任何由于使用本文信息而導致的直接或間接損害承擔責任。如涉及侵權，請及時與我們聯系，我們將盡快處理并刪除相關內容。 一：產品介紹 HUSKY – WooCommer…
閱讀更多...
matlab近似計算聯合密度分布

matlab近似計算聯合密度分布

在 Matlab 中&#xff0c;當A和B是兩個序列數據時&#xff0c;可以通過以下步驟來近似求出A大于B的概率分布&#xff1a;數據準備&#xff1a;確保序列A和B具有相同的長度。如果長度不同&#xff0c;需要進行相應的處理&#xff08;例如截取或插值&#xff09;。計算A大于B的邏…
閱讀更多...
可視化動態表單動態表單界的天花板--Formily(阿里開源)

可視化動態表單動態表單界的天花板--Formily(阿里開源)

文章目錄 1、Formily表單介紹2、安裝依賴2.1、安裝內核庫2.2、 安裝 UI 橋接庫2.3、Formily 支持多種 UI 組件生態&#xff1a; 3、表單設計器3.1、核心理念3.2、安裝3.3、示例源碼 4、場景案例-登錄注冊4.1、Markup Schema 案例4.2、JSON Schema 案例4.3、純 JSX 案例 1、Form…
閱讀更多...
NAT 實驗：多私網環境下 NAPT、Easy IP 配置及 FTP 服務公網映射

NAT 實驗：多私網環境下 NAPT、Easy IP 配置及 FTP 服務公網映射

NAT基本概念 定義&#xff1a;網絡地址轉換&#xff08;Network Address Translation&#xff0c;NAT&#xff09;是一種將私有&#xff08;保留&#xff09;地址轉化為合法公網 IP 地址的轉換技術&#xff0c;它被廣泛應用于各種類型 Internet 接入方式和各種類型的網絡中。作…
閱讀更多...
C語言-橋接模式詳解與實踐

C語言-橋接模式詳解與實踐

文章目錄 C語言橋接模式詳解與實踐1. 什么是橋接模式&#xff1f;2. 為什么需要橋接模式&#xff1f;3. 實際應用場景4. 代碼實現4.1 UML 關系圖4.2 頭文件 (display_bridge.h)4.3 實現文件 (display_bridge.c)4.4 使用示例 (main.c) 5. 代碼分析5.1 關鍵設計點5.2 實現特點 6.…
閱讀更多...
el-table 合并單元格

el-table 合并單元格

vue2使用el-table合并單元格&#xff0c;包括合并行、合并列 <el-table:header-cell-style"handerMethod":span-method"arraySpanMethod"cell-click"handleCellClick":data"tableData"style"width: 100%"><el-tabl…
閱讀更多...
網絡安全之vlan實驗

網絡安全之vlan實驗

在對vlan進行一定的學習之后我們來練習一個小實驗來加深理解記憶 首先是對實驗進行一個搭建 第一部分&#xff1a;給交換機配置vlan 首先是sw1 [Huawei]vlan batch 2 to 5 [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]port hybrid tagged vlan 2 [Huawei-GigabitEthe…
閱讀更多...
STM32 - 在機器人、自動化領域，LL庫相比HAL優勢明顯

STM32 - 在機器人、自動化領域，LL庫相比HAL優勢明顯

在機器人控制器、電機控制器等領域的開發&#xff0c;需要高實時性、精細化控制或者對代碼執行效率、占用空間有較高要求。所以&#xff0c;大家常用的HAL庫明顯不符合要求。再加上&#xff0c;我們學習一門技術&#xff0c;一定要學會掌握底層的原理。MCU開發的底層就是寄存器…
閱讀更多...
mysql中show命令的使用

mysql中show命令的使用

在 MySQL 中&#xff0c;SHOW 命令是一個非常實用的工具&#xff0c;用于查詢數據庫元數據&#xff08;如數據庫、表、列、索引等信息&#xff09;。以下是常見的 SHOW 命令及其用法&#xff1a; 1. 顯示所有數據庫 SHOW DATABASES;列出服務器上的所有數據庫。 2. 顯示當前數據…
閱讀更多...
RAG優化：python從零實現query轉換增強技術

RAG優化：python從零實現query轉換增強技術

本篇仍然是不依賴于LangChain等專用庫，利用python基本庫實現了三種查詢轉換技術 查詢重寫：使查詢更加具體和詳細，以提高搜索精度。回退提示：生成更廣泛的查詢以檢索有用的上下文信息。子查詢分解：將復雜查詢分解為更簡單的組件，以實現全面檢索。圖 1：RAG 中的查詢重寫（…
閱讀更多...
登錄驗證碼的接口實習，uuid,code.

登錄驗證碼的接口實習，uuid,code.

UID是唯一標識的字符串,下面是百度百科關于UUID的定義&#xff1a; UUID是由一組32位數的16進制數字所構成&#xff0c;是故UUID理論上的總數為16322128&#xff0c;約等于3.4 x 10^38。也就是說若每納秒產生1兆個UUID&#xff0c;要花100億年才會將所有UUID用完。 UUID的標準…
閱讀更多...
HTML5 初探：新特性與本地存儲的魔法

HTML5 初探：新特性與本地存儲的魔法

HTML5 初探&#xff1a;新特性與本地存儲的魔法 作為一名前端新手&#xff0c;你可能聽說過 HTML5 這個名詞。它是 HTML 的第五代版本&#xff0c;不僅讓網頁變得更強大&#xff0c;還帶來了許多新功能和工具。今天&#xff0c;我們就來聊聊 HTML5 的新特性&#xff0c;以及它…
閱讀更多...
雙指針---《移動零》

雙指針---《移動零》

目錄 文章前言 題目描述 算法原理講解 忽略限制條件的解法 原理講解 思路總結 代碼展示 雙指針解法 原理講解 思路總結 代碼展示 大總結 &#x1f4ab;只有認知的突破&#x1f4ab;才來帶來真正的成長&#x1f4ab;編程技術的學習&#x1f4ab;沒有捷徑&#x1f4ab;…
閱讀更多...
jangow-01-1.0.1靶機攻略

jangow-01-1.0.1靶機攻略

1.進行配置&#xff0c;按住shift&#xff0c;在圖一界面按e進去得到圖二 .ro 替換為 rw signie init/bin/bash ctrlx&#xff0c;ip a查看網卡信息&#xff0c;修改配置文件網卡信息 修改為如圖所示內容后按shift?然后輸入wq點擊回車退出&#xff0c;然后重啟靶機 2.在kali中…
閱讀更多...
安全上網沙箱：多方面解決政企私的上網問題

安全上網沙箱：多方面解決政企私的上網問題

在數字化的浪潮中&#xff0c;網絡已成為我們工作與生活不可或缺的一部分。然而&#xff0c;網絡的便捷也伴隨著諸多安全隱患&#xff0c;尤其是對于企業、個人以及政企機構而言&#xff0c;安全上外網成為了至關重要的課題。 隔離保護&#xff1a;構建安全堡壘 沙箱技術在內網…
閱讀更多...
C++ string的模擬實現

C++ string的模擬實現

Hello!!大家早上中午晚上好&#xff0c;昨天復習了string的使用&#xff0c;今天來模擬實現一下string&#xff01;&#xff01;&#xff01; 一、string的框架搭建 1.1首先我們需要一個string的頭文件用來做變量、函數、類等聲明&#xff1b;再需要一個test文件來做測試,還需…
閱讀更多...
Java 中裝飾者模式與策略模式在埋點系統中的應用

Java 中裝飾者模式與策略模式在埋點系統中的應用

前言 在軟件開發中&#xff0c;裝飾者模式和策略模式是兩種常用的設計模式&#xff0c;它們在特定的業務場景下能夠發揮巨大的作用。本文將通過一個實際的埋點系統案例&#xff0c;探討如何在 Java 中運用裝飾者模式和策略模式&#xff0c;以及如何結合工廠方法模式來優化代碼…
閱讀更多...
最新文章

Copyright @ 2022~2023