SVG - 面試問題

SVG 代表可縮放向量圖形。

SVG 是一種基於 XML 的格式，用於繪製向量影像。它用於繪製二維向量影像。

以下是 SVG 的核心特性：

• SVG，可縮放向量圖形，是一種基於 XML 的語言，用於定義基於向量的圖形。

• SVG 用於在 Web 上顯示影像。

• 作為向量影像，SVG 影像無論放大或縮小多少次都不會損失質量。

• SVG 影像支援互動性和動畫。

• SVG 是 W3C 標準。

• 其他影像格式，如光柵影像，也可以與 SVG 影像結合使用。

• SVG 與 HTML 的 XSLT 和 DOM 整合良好。

以下是使用 SVG 影像的優勢：

• 使用任何文字編輯器建立和編輯 SVG 影像。

• 基於 XML，SVG 影像可搜尋、可索引、可編寫指令碼和可壓縮。

• SVG 影像具有高度的可擴充套件性，因為無論放大或縮小多少次都不會損失質量。

• 任何解析度下都具有良好的列印質量。

• SVG 是一個開放標準。

以下是使用 SVG 影像的缺點：

• 作為文字格式，其大小比二進位制格式的光柵影像更大。

• 即使對於小影像，大小也可能很大。

SVG 的“rect”標籤用於繪製矩形。

SVG 的“circle”標籤用於繪製圓形。

SVG 的“ellipse”標籤用於繪製橢圓。

SVG 的“line”標籤用於繪製直線。

SVG 的“polygon”標籤用於繪製由連線的直線組成的封閉形狀。

SVG 的“polyline”標籤用於繪製由連線的直線組成的開放形狀。

SVG 的“path”標籤用於繪製任何路徑。

SVG 的“text”標籤用於繪製文字。

SVG 文字標籤的“x”屬性表示字形的 x 軸座標。

SVG 文字標籤的“y”屬性表示字形的 y 軸座標。

SVG 文字標籤的“dx”屬性表示沿 x 軸的偏移量。

SVG 文字標籤的“dy”屬性表示沿 y 軸的偏移量。

SVG 文字標籤的“rotation”屬性設定要應用於所有字形的旋轉。

SVG 文字標籤的“textLength”屬性設定文字的渲染長度。

“stroke”屬性定義文字、線條或任何元素輪廓的顏色。

“strokeWidth”屬性定義文字、線條或任何元素輪廓的粗細。

“strokeLinecap”屬性定義線條或任何路徑輪廓的不同型別的結尾。

“strokeDasharray”屬性用於建立虛線。

SVG 使用<filter>元素來定義濾鏡。<filter>元素使用id屬性來唯一標識它。濾鏡在<def>元素中定義，然後透過圖形元素的id引用它們。

SVG 提供了一套豐富的濾鏡。以下是常用濾鏡的列表：

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

SVG 使用<pattern>元素來定義圖案。圖案使用<pattern>元素定義，並用於以平鋪方式填充圖形元素。

漸變是指形狀內一種顏色到另一種顏色的平滑過渡。SVG 提供兩種型別的漸變：

• 線性漸變

• 徑向漸變

線性漸變表示從一個方向到另一個方向的一種顏色到另一種顏色的線性過渡。它使用<linearGradient>元素定義。

徑向漸變表示從一個方向到另一個方向的一種顏色到另一種顏色的圓形過渡。它使用<radialGradient>元素定義。

是的！SVG 影像可以對使用者操作做出響應。SVG 支援指標事件、鍵盤事件和文件事件。

是的！SVG 支援 JavaScript/ECMAScript 函式。指令碼塊必須位於 CDATA 塊中，以考慮 XML 中的字元資料支援。

是的！SVG 元素支援滑鼠事件和鍵盤事件。我們使用 onClick 事件來呼叫 JavaScript 函式。

在 JavaScript 函式中，document 表示 SVG 文件，可用於獲取 SVG 元素。

在 JavaScript 函式中，event 表示當前事件，可用於獲取觸發事件的目標元素。

<a>元素用於建立超連結。“xlink:href”屬性用於傳遞 IRI（國際化資源識別符號），它是 URI（統一資源識別符號）的補充。

SVG 影像可以透過以下方式嵌入：

• 使用 embed 標籤

• 使用 object 標籤

• 使用 iframe

SVG 的“rect”標籤用於繪製矩形。以下是常用屬性：

• x - 矩形左上角的 x 軸座標。預設為 0。

• y - 矩形左上角的 y 軸座標。預設為 0。

• width - 矩形的寬度。

• height - 矩形的高度。

• rx - 用於圓角矩形的圓角。

• ry - 用於圓角矩形的圓角。

示例：

<rect 
x = "100" y = "30" 
width = "300" height = "100" 
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >

SVG 的“circle”標籤用於繪製圓形。以下是常用屬性：

• cx - 圓心在 x 軸上的座標。預設為 0。

• cy - 圓心在 y 軸上的座標。預設為 0。

• r - 圓的半徑。

示例：

<circle 
cx = "100" cy = "100" r = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)" >

SVG 的“ellipse”標籤用於繪製橢圓。以下是常用屬性：

• cx - 橢圓中心在 x 軸上的座標。預設為 0。

• cy - 橢圓中心在 y 軸上的座標。預設為 0。

• rx - 橢圓的 x 軸半徑。

• ry - 橢圓的 y 軸半徑。

示例：

<ellipse 
cx = "100" cy = "100" 
rx = "90" ry = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“line”標籤用於繪製直線。以下是常用屬性：

• x1 - 起點的 x 軸座標。預設為 0。

• y1 - 起點的 y 軸座標。預設為 0。

• x2 - 終點的 x 軸座標。預設為 0。

• y2 - 終點的 y 軸座標。預設為 0。

示例：

<line 
x1 = "20" y1 = "20" 
x2 = "150" y2 = "150" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“polygon”標籤用於繪製多邊形。以下是常用屬性：

points - 構成多邊形的點的列表。

示例：

<polygon 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“polyline”標籤用於繪製開放的多邊形。以下是常用屬性：

points - 構成多邊形的點的列表。

示例：

<polyline 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "none">

SVG 的“path”標籤用於繪製自由流動的路徑。以下是常用屬性：

d - 路徑資料，通常是一組命令，如 moveto、lineto 等。

示例：

<path 
d = "M 100 100 L 300 100 L 200 300 z" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

path 元素的 M 命令將游標從一個點移動到另一個點。

path 元素的 L 命令建立直線。

path 元素的 H 命令建立水平線。

path 元素的 V 命令建立垂直線。

path 元素的 C 命令建立曲線。

path 元素的 S 命令建立平滑曲線。

path 元素的 Q 命令建立二次貝塞爾曲線。

path 元素的 T 命令建立平滑二次貝塞爾曲線。

路徑元素的一個命令建立了一個橢圓弧。

路徑元素的Z命令關閉路徑。

當命令是大寫時，表示絕對路徑。如果使用小寫命令，則使用相對路徑。