href

示例

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

<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a href="https://mdn.club.tw/">
    <text x="10" y="25">MDN Web Docs</text>
  </a>
</svg>

在 SVG 中

a

對於 <a>，href 定義了引用物件的位置，表示為 URL 引用。

animate, animateMotion, animateTransform, set

對於 <animate>、<animateMotion>、<animateTransform> 和 <set>，href 定義了一個 URL，該 URL 指向作為此動畫元素目標並因此將隨時間修改的元素。

該 URL 必須指向正好一個能夠作為給定動畫元素目標的元素。如果 URL 指向多個目標元素，如果給定目標元素不能作為給定動畫元素的目標，或者如果給定目標元素不屬於當前文件，則動畫元素將不影響任何目標元素。但是，動畫元素仍將根據其時間屬性正常執行。具體來說，TimeEvents 會被分派，並且動畫元素可以以與 URL 引用有效目標元素時相同的方式用作同步基準。

如果未提供 href 屬性或已廢棄的 xlink:href 屬性，則目標元素將是當前動畫元素的直接父元素。如果同時指定了 xlink:href 和 href，則使用後者的值。

有關特定型別動畫可作為目標元素型別的任何限制，請參閱各個動畫元素的描述。

除了本規範中明確提及的任何 SVG 特定規則外，此屬性的規範定義是 SMIL 動畫規範。特別是，請參閱 SMIL 動畫：指定動畫目標。

feImage

對於 <feImage>，href 定義了一個指向影像資源或元素的 URL。如果同時指定了 xlink:href 和 href 屬性，則後者會覆蓋前者。

圖片

對於 <image>，href 定義了一個指向要渲染的影像的 URL。

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <image href="fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>

線性漸變/徑向漸變

對於 <linearGradient> 或 <radialGradient>，href 定義了一個指向模板漸變元素的 URL；為了有效，該引用必須指向不同的 <linearGradient> 或 <radialGradient> 元素。

mpath

對於 <mpath>，href 定義了一個指向 <path> 元素或 基本形狀 的 URL，該元素或形狀定義了運動路徑。

pattern

對於 <pattern>，href 定義了一個 URL，指向當前 SVG 文件中另一個 <pattern> 元素。此元素未定義的任何屬性（在引用的元素上定義）都由此元素繼承。如果此元素沒有子元素，而引用的元素有子元素（可能由於其自身的 href 屬性），則此元素繼承引用元素的子元素。繼承可以是間接的，達到任意級別；因此，如果引用的元素由於其自身的 href 屬性而繼承了屬性或子元素，則當前元素可以繼承這些屬性或子元素。在 <pattern> 元素上，href 屬性是可動畫的。

script

對於 <script>，href 定義了一個指向包含指令碼程式碼的外部資源的 URL。

textPath

對於 <textPath>，如果未提供 path 屬性，則 href 定義了一個指向 <path> 元素或 基本形狀 的 URL，文字將在此路徑或形狀上渲染。在 <textPath> 元素上，href 屬性是可動畫的。

use

對於 <use>，href 定義了一個指向 SVG 文件中要克隆的元素或片段的 URL。

<use> 元素可以透過指定不帶片段的 href 值來引用整個 SVG 文件。此類引用被視為引用所引用文件的根元素。

規範

瀏覽器相容性

svg.elements.a.href

svg.elements.animate.href

svg.elements.animateMotion.href

svg.elements.animateTransform.href

svg.elements.feImage.href

svg.elements.image.href

svg.elements.linearGradient.href

svg.elements.mpath.href

svg.elements.pattern.href

svg.elements.radialGradient.href

svg.elements.script.href

svg.elements.set.href

svg.elements.textPath.href

svg.elements.use.href

另見

• xlink:href