<use>

使用語境

屬性

href

指向需要被複制的元素/片段的 URL。關於常見陷阱的詳細資訊，請參閱使用說明。
值型別：<URL>；預設值：無；可否動畫：是

xlink:href 已棄用

一個指向需要被複制的元素/片段的 <IRI> 引用。如果 href 和 xlink:href 同時存在，將使用 href 屬性的值。
值型別：<IRI>；預設值：無；可否動畫：是

警告： 從 SVG 2 開始，xlink:href 屬性已被廢棄，推薦使用 href。更多資訊請參見 xlink:href 頁面。

x

應用於 <use> 元素的額外最終偏移變換的 x 座標。
值型別：<coordinate>；預設值：0；可否動畫：是

y

應用於 <use> 元素的額外最終偏移變換的 y 座標。
值型別：<coordinate>；預設值：0；可否動畫：是

width

<use> 元素的寬度。
值型別：<length>；預設值：0；可否動畫：是

height

<use> 元素的高度。
值型別：<length>；預設值：0；可否動畫：是

DOM 介面

該元素實現了 SVGUseElement 介面。

示例

下面的示例展示瞭如何使用 <use> 元素來繪製具有不同填充和描邊顏色的圓。在最後一個圓中，stroke="red" 將被忽略，因為描邊已經在 myCircle 上設定了。

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

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

用法說明

如果 <use> 所引用的元素上已經定義了相應的屬性，那麼 <use> 上的大多數屬性都會被忽略。（這與 CSS 樣式屬性會覆蓋層疊中“較早”設定的屬性不同）。只有 <use> 元素上的 x、y、width、height 和 href 屬性，在被引用元素已經定義了相應屬性的情況下，可能會產生一些影響（將在後面描述）。然而，任何其他未在被引用元素上設定的屬性都將應用於 <use> 元素。

由於克隆的節點不會被暴露出來，因此在使用 CSS 為 <use> 元素及其克隆的後代設定樣式時必須小心。除非使用 CSS 繼承顯式請求，否則不保證 CSS 屬性會被克隆的 DOM 繼承。

出於安全原因，瀏覽器可能會對 <use> 元素應用同源策略，並可能拒絕載入 href 屬性中的跨域 URL。目前沒有為 <use> 元素設定跨域策略的已定義方法。

透過 <use> 從外部檔案載入資源

你可以透過 <use> 元素從外部 SVG 檔案載入節點，方法是指定檔案路徑，後跟一個指向要載入節點 id 的 URL 片段。

<svg>
  <use href="../assets/my-svg.svg#my-fragment"></use>
</svg>

在過去，URL 片段總是必需的，即使你只想載入整個 SVG 文件。在這種情況下，id 會被包含在 SVG 根元素上。

<svg xmlns="http://www.w3.org/2000/svg" id="my-fragment">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

然而，現代實現已經更新，如果你想載入整個外部文件，可以不帶 URL 片段來引用它（並且 SVG 文件根元素上不再需要 id）。

<svg>
  <use href="../assets/my-svg.svg"></use>
</svg>

請檢視瀏覽器相容性表格以瞭解瀏覽器支援情況。

透過 <use> 從資料 URI 載入資源

出於安全原因，不推薦在 href 屬性中使用資料 URI 載入資源。這適用於 <use href="data:..." 以及使用 set 或 setAttribute 方法設定 href 的情況。

同樣，請檢視瀏覽器相容性表格以瞭解瀏覽器支援情況。

規範

瀏覽器相容性