<symbol>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<symbol> SVG 元素用於定義圖形模板物件，這些物件可以由 <use> 元素進行例項化。

使用 <symbol> 元素處理在同一文件中多次使用的圖形，可以增加結構和語義。富含結構性的文件可以透過圖形、語音或盲文進行渲染，從而提高可訪問性。

注意： <symbol> 元素本身不用於渲染。只有 <symbol> 元素的例項（即透過 <use> 元素對 <symbol> 的引用）才會被渲染。這意味著，即使 CSS 的 display 屬性指示了其他內容，某些瀏覽器也可能拒絕直接顯示 <symbol> 元素。

使用語境

分類	容器元素，結構元素
允許內容	可包含任意數量、任意順序的下列元素動畫元素描述性元素形狀元素結構元素漸變元素 `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

屬性

height: 此屬性確定 symbol 的高度。值型別：<length> | <percentage>；預設值：auto；可動畫：是
保持長寬比: 此屬性定義了當 SVG 片段嵌入到具有不同縱橫比的容器中時，SVG 片段必須如何變形。值型別：（none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax）（meet | slice)?; 預設值：xMidYMid meet；可動畫：是
refX: 此屬性確定 symbol 的參考點的 x 座標。值型別：<length> | <percentage> | left | center | right；預設值：無；可動畫：是
refY: 此屬性確定 symbol 的參考點的 y 座標。值型別：<length> | <percentage> | top | center | bottom；預設值：無；可動畫：是
檢視框: 此屬性定義了當前 symbol 的 SVG 視口的邊界。值型別：<list-of-numbers>；預設值：無；可動畫：是
width: 此屬性確定 symbol 的寬度。值型別：<length> | <percentage>；預設值：auto；可動畫：是
x: 此屬性確定 symbol 的 x 座標。值型別：<length> | <percentage>；預設值：0；可動畫：是
y: 此屬性確定 symbol 的 y 座標。值型別：<length> | <percentage>；預設值：0；可動畫：是

DOM 介面

此元素實現了 SVGSymbolElement 介面。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" opacity="1.0" />
  <use href="#myDot" x="20" y="5" opacity="0.8" />
  <use href="#myDot" x="35" y="5" opacity="0.6" />
  <use href="#myDot" x="50" y="5" opacity="0.4" />
  <use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>

規範

規範
Scalable Vector Graphics (SVG) 2 # SymbolElement

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年7月1日⁩，由 MDN 貢獻者進行編輯。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤