<symbol>

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

對於在同一文件中多次使用的圖形，使用 <symbol> 元素可以增加結構和語義。結構豐富的文件可以以圖形、語音或盲文的形式呈現，從而促進可訪問性。

示例

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" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

屬性

height

此屬性確定符號的高度。值型別：<length>|<percentage>；預設值：auto；可動畫：yes

preserveAspectRatio

此屬性定義如果 SVG 片段嵌入到具有不同縱橫比的容器中，則必須如何變形。值型別：(none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)?；預設值：xMidYMid meet；可動畫：yes

refX

此屬性確定符號的參考點的 x 座標。值型別：<length>|<percentage>|left|center|right；預設值：無；可動畫：yes

refY

此屬性確定符號的參考點的 y 座標。值型別：<length>|<percentage>|top|center|bottom；預設值：無；可動畫：yes

viewBox

此屬性定義當前符號的 SVG 視口的邊界。值型別：<list-of-numbers>；預設值：無；可動畫：yes

width

此屬性確定符號的寬度。值型別：<length>|<percentage>；預設值：auto；可動畫：yes

x

此屬性確定符號的 x 座標。值型別：<length>|<percentage>；預設值：0；可動畫：yes

y

此屬性確定符號的 y 座標。值型別：<length>|<percentage>；預設值：0；可動畫：yes

使用上下文

類別容器元素、結構元素
允許的內容任意數量的以下元素，以任意順序
動畫元素
描述性元素
形狀元素
結構元素
漸變元素
<a>、<clipPath>、<cursor>、<filter>、<font>、<font-face>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>

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

規範

規範
可縮放向量圖形 (SVG) 2
# SymbolElement

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。