href

示例

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

<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a href="https://mdn.org.cn/">
    <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