SVG 參考手冊
SVG 元素
| 元素 | 描述 | 屬性 | 教程 |
|---|---|---|---|
| <a> | 圍繞一個元素建立超連結 | href="要去的 URL" download="告訴瀏覽器下載 URL 而不是跳轉到它" hreflang="連結指向頁面的語言" referrerpolicy="獲取 URL 時傳送的引用者策略" rel="目標物件與連結物件的關係" target="連結開啟的位置。可以是 _self, _parent, _top, _blank, 或一個名稱" type="連結 URL 的 MIME 型別" |
示例 |
| <animate> | 隨時間推移為元素的屬性新增動畫效果 | attributeName="目標屬性的名稱" by="相對偏移值" from="起始值" to="結束值" dur="持續時間" repeatCount="動畫發生的次數" |
示例 |
| <animateMotion> | 設定元素如何在運動路徑上移動 | calcMode="動畫的插值模式。可以是 'discrete', 'linear', 'paced', 'spline'" path="運動路徑" keyPoints="物件在運動路徑上的前程序度" rotate="應用旋轉變換" |
示例 |
| <animateTransform> | 為目標元素的變換屬性新增動畫效果 | by="相對偏移值" from="起始值" to="結束值" type="需要隨時間改變值的變換型別。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
示例 |
| <circle> | 定義一個圓 | r="圓的半徑"。必需。 cx="圓的 x 軸中心" cy="圓的 y 軸中心" |
示例 |
| <clipPath> | 指定一個剪輯路徑，用於 clip-path 屬性 | clipPathUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二個值使子項單位成為蒙版所用物件邊界框的比例（預設值：'userSpaceOnUse'）" | 示例 |
| <defs> | 用於引用元素的容器 | ||
| <desc> | 用於容器元素或圖形元素的純文字描述 | ||
| <ellipse> | 定義一個橢圓 | rx="橢圓的 x 半徑"。必需。 ry="橢圓的 y 半徑"。必需。 cx="橢圓的 x 軸中心" cy="橢圓的 y 軸中心" |
示例 |
| <feBlend> | SVG 濾鏡。透過某種混合模式將兩個圖形組合在一起 | mode="影像混合模式：normal|multiply|screen|darken|lighten" in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="混合操作的第二個輸入影像" |
示例 |
| <feColorMatrix> | SVG 濾鏡。根據變換矩陣改變顏色 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" type="matrix | saturate | hueRotate | luminanceToAlpha" values="type 屬性中為 matrix 型別設定的值" |
示例 |
| <feComponentTransfer> | SVG 濾鏡。對每個畫素執行分量重對映。可以調整亮度、對比度、色彩平衡等 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feComposite> | SVG 濾鏡。使用合成操作逐畫素地組合兩個輸入影像 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="混合操作的第二個輸入影像" operator="over | in | out | atop | xor | lighter | arithmetic" |
|
| <feConvolveMatrix> | SVG 濾鏡。應用矩陣卷積濾鏡效果（包括模糊、邊緣檢測、銳化、浮雕和斜角） | ||
| <feDiffuseLighting> | SVG 濾鏡。使用 alpha 通道作為凸起圖來照亮圖形 | ||
| <feDisplacementMap> | SVG 濾鏡。使用 in2 屬性中的圖形的畫素值來置換 in 屬性中的影像 | ||
| <feDistantLight> | SVG 濾鏡。在照明濾鏡原語：<feDiffuseLighting> 或 <feSpecularLighting> 中指定一個遠距離光源 | azimuth elevation |
|
| <feDropShadow> | SVG 濾鏡。建立圖形的下陰影 | dx="下陰影的 x 偏移量" dy="下陰影的 y 偏移量" stdDeviation="下陰影的模糊量" |
示例 |
| <feFlood> | SVG 濾鏡。用 flood-color 和 flood-opacity 屬性定義的顏色和不透明度填充濾鏡子區域 | flood-color flood-opacity |
|
| <feFuncA> | SVG 濾鏡。feComponentTransfer 的子元素 | ||
| <feFuncB> | SVG 濾鏡。feComponentTransfer 的子元素 | ||
| <feFuncG> | SVG 濾鏡。feComponentTransfer 的子元素 | ||
| <feFuncR> | SVG 濾鏡。feComponentTransfer 的子元素 | ||
| <feGaussianBlur> | SVG 濾鏡。模糊圖形 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" stdDeviation edgeMode |
示例 |
| <feImage> | SVG 濾鏡。從外部源獲取圖形資料並輸出畫素資料 | crossorigin preserveAspectRatio |
|
| <feMerge> | SVG 濾鏡。混合輸入圖形層（同時應用濾鏡效果而不是順序應用） | ||
| <feMergeNode> | SVG 濾鏡。將另一個濾鏡的結果提供給其父級 <feMerge> 進行處理 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feMorphology> | SVG 濾鏡。侵蝕或擴張圖形（用於加粗或變細效果） | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" operator="erode | dilate" radius |
|
| <feOffset> | SVG 濾鏡。偏移輸入圖形 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" dx dy |
示例 |
| <fePointLight> | SVG 濾鏡。指定一個光源，可以建立點光源效果 | x y z |
|
| <feSpecularLighting> | SVG 濾鏡。使用 alpha 通道作為凸起圖來照亮源圖形 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feSpotLight> | SVG 濾鏡。指定一個光源，可以建立聚光燈效果 | x y z pointsAtX pointsAtY pointsAtZ specularExponent limitingConeAngle |
|
| <feTile> | SVG 濾鏡。使用輸入圖形的重複圖案填充目標矩形 | in="給定濾鏡原語的輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feTurbulence> | SVG 濾鏡。使用 Perlin 湍流函式建立圖形 | baseFrequency numOctaves seed stitchTiles type |
|
| <filter> | 濾鏡效果的容器 | x y width height filterUnits primitiveUnits |
示例 |
| <foreignObject> | 包含來自不同 XML 名稱空間的物件 | height width x y |
|
| <g> | 用於組合其他 SVG 元素的容器 | id="組的唯一名稱" |
|
| <image> | 在 SVG 中包含影像（必須是 .jpeg, .png, 或其他 SVG 檔案） | href="影像的 URL"。必需。 width="影像的寬度"。必需。 height="影像的高度"。必需。 x="影像左上角的 x 位置" y="影像左上角的 y 位置" preserveAspectRatio="影像如何縮放" crossorigin="CORS 請求的憑證標誌值" decoding="sync | async | auto" |
示例 |
| <line> | 建立一條線 | x1="線條在 x 軸上的起點" y1="線條在 y 軸上的起點" x2="線條在 x 軸上的終點" y2="線條在 y 軸上的終點" |
示例 |
| <linearGradient> | 定義一個線性漸變 | id="漸變的唯一 ID"。必需 x1="漸變起點處的 x 位置"。預設為 0% x2="漸變終點處的 x 位置"。預設為 100% y1="漸變起點處的 y 位置"。預設為 0% y2="漸變終點處的 y 位置"。預設為 0% spreadMethod="漸變的擴充套件方法"。可能的值："pad", "reflect", "repeat"。預設為 "pad" href="引用另一個將用作模板的 <linearGradient> 元素" gradientUnits="x1, x2, y1, y2 的座標系統"。可能的值："userSpaceOnUse" 和 "objectBoundingBox"。預設為 "objectBoundingBox" gradientTransform="對漸變座標系的附加變換" |
示例 |
| <marker> | 定義一個圖形，用於在特定的 <path>, <line>, <polyline> 或 <polygon> 元素上繪製箭頭或多邊形標記 | markerUnits="'strokeWidth' 或 'userSpaceOnUse'。如果使用 'strokeWidth'，則一個單位等於一個描邊寬度。否則，標記不會縮放，並使用與引用元素相同的檢視單位（預設為 'strokeWidth'）" refX="標記連線到頂點的位置（預設為 0）" refY="標記連線到頂點的位置（預設為 0）" orient="'auto' 或一個始終顯示標記的角度。'auto' 將計算一個角度，使 x 軸成為頂點的切線（預設為 0）" markerWidth="標記的寬度（預設為 3）" markerHeight="標記的高度（預設為 3）" viewBox="此 SVG 繪圖區域中"可見"的點。由空格或逗號分隔的 4 個值（最小 x，最小 y，寬度，高度）" |
示例 |
| <mask> | 定義一個 alpha 蒙版，用於將當前物件與背景進行畫素組合。蒙版是透明度和剪下的組合。與剪下一樣，您可以使用形狀、文字或路徑來定義蒙版的部分。蒙版的預設狀態是完全透明的，這與剪切平面相反。蒙版中的圖形決定了蒙版的哪個部分是透明的 | maskUnits="'userSpaceOnUse' 或 'objectBoundingBox'。設定剪切平面是相對於整個視口還是物件（預設值：'objectBoundingBox'）" maskContentUnits="與百分比一起使用，使蒙版圖形位置相對於物件。'userSpaceOnUse' 或 'objectBoundingBox'（預設為 'userSpaceOnUse'）" x="蒙版的剪切平面（預設為 -10%）" y="蒙版的剪切平面（預設為 -10%）" width="蒙版的剪切平面（預設為 120%）" height="蒙版的剪切平面（預設為 120%）" |
示例 |
| <metadata> | 將元資料應用於 SVG 內容 | ||
| <mpath> | <animateMotion> 元素的子元素，它提供了引用外部 <path> 元素作為運動路徑定義的能力 | ||
| <path> | 定義一個形狀 | d="設定路徑的形狀" pathLength="路徑的總長度" |
示例 |
| <pattern> | 定義一個可以在重複的 x 和 y 座標間隔處重繪的物件 | id="用於引用此圖案的唯一 ID"。必需。 patternUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二個值使 x、y、width、height 的單位成為使用圖案的物件邊界框的比例（或 %）。" patternContentUnits="'userSpaceOnUse' 或 'objectBoundingBox'" patternTransform="允許對整個圖案進行變換" x="圖案相對於左上角的偏移量（預設為 0）" y="圖案相對於左上角的偏移量。（預設為 0）" width="圖案瓦片的寬度（預設為 0）" height="圖案瓦片的高度（預設為 0）" viewBox="此 SVG 繪圖區域中"可見"的點。由空格或逗號分隔的 4 個值（最小 x，最小 y，寬度，高度）" href preserveAspectRatio |
示例 |
| <polygon> | 建立一個包含至少三條邊的圖形。多邊形由直線組成，並且形狀是"封閉的" | points="多邊形的點列表。每個點必須包含一個 x 座標和一個 y 座標"。必需。 |
示例 |
| <polyline> | 定義任何只由直線組成的形狀。該形狀是開放的 | points="多邊形的點列表。每個點必須包含一個 x 座標和一個 y 座標"。必需。 | 示例 |
| <radialGradient> | 定義一個徑向漸變 | id="漸變的唯一 ID"。必需 cx="徑向漸變結束圓的 x 位置"。預設為 50% cy="徑向漸變結束圓的 y 位置"。預設為 50% fr="徑向漸變起始圓的半徑"。預設為 0% fx="徑向漸變起始圓的 x 位置"。預設為 50% fy="徑向漸變起始圓的 y 位置"。預設為 50% r="徑向漸變結束圓的半徑"。預設為 50% spreadMethod="定義漸變的擴充套件方法"。可能的值："pad", "reflect", "repeat"。預設為 "pad" href="定義對另一個將用作模板的 <radialGradient> 元素的引用" gradientUnits="定義 cx, cy, r, fx, fy, fr 的座標系統"。可能的值："userSpaceOnUse" 和 "objectBoundingBox"。預設為 "objectBoundingBox" gradientTransform="定義對漸變座標系的附加變換" |
示例 |
| <rect> | 定義一個矩形 | width="矩形的寬度"。必需。 height="矩形的高度"。必需。 x="矩形左上角的 x 位置" y="矩形左上角的 y 位置" rx="矩形圓角的 x 半徑（用於圓角）"。預設為 0 ry="矩形圓角的 y 半徑（用於圓角）"。預設為 0 pathLength="矩形周長的總長度" |
示例 |
| <script> | SVG 中指令碼的容器 | crossorigin="定義 CORS 設定，如同 HTML <script> 元素所定義的" href="要載入的指令碼的 URL" type="要使用的指令碼語言型別"。預設為 application/ecmascript |
示例 |
| <set> | 在指定持續時間內設定屬性的值 | attributeName="要更改的屬性" to="屬性的新值" begin="效果應該何時開始" |
|
| <stop> | 線性或徑向漸變的停點 | offset="此停點的偏移量（0 到 1/0% 到 100%）"。必需。 stop-color="此停點的顏色" stop-opacity="此停點的透明度（0 到 1）"。預設為 1 |
示例 |
| <style> | 允許樣式表直接嵌入在 SVG 中 | type="要使用的樣式表語言型別"。預設為 text/css。 media ="樣式適用於哪種媒體"。預設為 all title="樣式表的標題（可用於切換備用樣式表）" |
|
| <svg> | SVG 圖形的容器 | xmlns="http://www.w3.org/2000/svg" x="SVG 容器的 x 位置"。預設為 0 y="SVG 容器的 y 位置"。預設為 0 width="SVG 容器的寬度"。預設為 auto height="SVG 容器的高度"。預設為 auto viewBox="當前 SVG 片段的 SVG 視口座標"。包含 4 個值，由空格或逗號分隔。（最小 x，最小 y，寬度，高度）" preserveAspectRatio="如果 SVG 片段以不同的縱橫比顯示，它將如何變形"。可以是 none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax。預設為 xMidYMid |
|
| <switch> | |||
| <symbol> | 定義圖形模板物件，這些物件可以由 <use> 元素例項化 | ||
| <text> | 定義文字 | x="文字起點的 x 位置"。預設為 0 y="文字起點的 y 位置"。預設為 0 dx="文字的水平偏移位置（相對於前一個文字位置）" dy="文字的垂直偏移位置（相對於前一個文字位置）" rotate="應用於文字中每個字母的旋轉（以度為單位）" textLength="文字必須適應的寬度" lengthAdjust"文字應如何壓縮或拉伸以適應 textLength 屬性定義的寬度"。可以是 spacing| spacingAndGlyphs。預設為 spacing |
示例 |
| <textPath> | 沿路徑形狀渲染文字 | href="用於渲染文字的路徑的 URL" lengthAdjust"文字應如何壓縮或拉伸以適應 textLength 屬性定義的寬度"。可以是 spacing| spacingAndGlyphs。預設為 spacing method="如何沿路徑渲染字形。"可以是 align|stretch。預設為 align spacing="字形之間的空格"。可以是 auto|exact。預設為 exact startOffset="文字的開頭應從路徑的開頭偏移多少"。可以是長度、百分比或數字 textLength="路徑上文字的寬度"。可以是長度、百分比或數字。預設為 auto |
示例 |
| <title> | SVG 中元素的文字描述 - 不作為圖形的一部分顯示。瀏覽器通常將文字顯示為工具提示 | none | |
| <tspan> | 定義 <text> 元素中的子文字 | x="文字起點的 x 位置"。預設為 0 y="文字起點的 y 位置"。預設為 0 dx="文字的水平偏移位置（相對於前一個文字位置）" dy="文字的垂直偏移位置（相對於前一個文字位置）" rotate="應用於文字中每個字母的旋轉（以度為單位）" textLength="文字必須適應的寬度" lengthAdjust"文字應如何壓縮或拉伸以適應 textLength 屬性定義的寬度"。可以是 spacing| spacingAndGlyphs。預設為 spacing |
示例 |
| <use> | 獲取 SVG 文件中的一個節點，並在其他地方複製它。 | x="克隆元素的左上角 x 位置" y="克隆元素的左上角 y 位置" width="克隆的寬度" height="克隆的高度" href="要複製的元素的 URL" |
|
| <view> | 如何檢視圖形（縮放級別或詳細檢視） | viewBox="SVG 視口在使用者空間中的位置和尺寸。包含 4 個值，由空格或逗號分隔。（最小 x，最小 y，寬度，高度）" preserveAspectRatio="具有 viewBox 的元素如何適應具有不同縱橫比的視口" |
