href

该href属性定义到资源的链接作为引用URL。该链接的确切含义取决于使用它的每个元素的上下文。

注： SVG 2之前的规范定义了一个xlink:href属性，该属性现在已经被href属性取代了。

用法上下文

Categories	Xlink attribute
Value	URL
Animatable	Yes (except for animation elements)
Initial value	(None)

URL

统一的地址定位符。

URL是构建内部或外部资源地址的Unicode字符序列。

在SVG 2之前，使用了更有限的IRI内容类型，原因是URL规范之前没有被标准化。

适用元素

以下元素可以使用该href属性：

动画元素?

作为此动画元素的目标元素的URL引用，因此将随着时间的推移而被修改。

该URL必须指向一个能够成为给定动画元素的目标的目标元素。

如果URL指向多个目标元素，若给定的目标元素不能成为给定动画元素的目标，或者给定的目标元素不是当前文档的一部分，则动画元素不会影响任何目标元件。但是，动画元素在其时序属性方面仍然可以正常运行。具体来说，调度TimeEvents，并且动画元素可以按照与URL引用有效目标元素时相同的方式用作syncbase。

如果未提供href属性或已弃用的xlink:href属性，则目标元素将是当前动画元素的直接父元素。如果xlink:href和href同时被指定，则使用后者的值。

关于什么类型的元素可以成为特定类型的动画的目标，请参考各个动画元素的描述。

除了本规范中明确提到的任何特定SVG的规则外，该属性的规范定义是SMIL动画规范。具体请参见SMIL动画：指定动画目标。

渐变元素（Gradient elements）?——对不同元素<linearGradient>或<radialGradient>元素的URL引用。

<a>——引用对象的位置，表示为URL引用。

<cursor>——指向提供游标图像的文件或元素的URL引用。

<discard>——标识废弃的目标元素的URL引用。有关href识别目标元素的详细信息，请参阅动画元素的定义。但是请注意，与其他动画元素不同，<discard>元素不支持弃用的xlink:href属性。

请注意，如果目标元素不是当前SVG文档片段的一部分，则目标元素是否将被删除由宿主语言定义。

如果href属性未提供，则目标元素将是<discard>元素的直接父元素。

<feImage>——指向图片资源或元素的网址。如果同时指定xlink:href了href属性和属性，后者将覆盖前者。

<hatch>对模板元素的URL引用，它必须是不同的<hatch>元素才能生效。

将从模板复制的指定属性是：

pitch

rotate

hatchUnits

hatchContentUnits

transform

<image>——标识要呈现的图像的URL引用。

<mesh>——对<meshgradient>绘制服务器的URL引用。

<meshgradient>——对模板元素的URL引用，它必须是不同的<meshgradient>元素才能生效。

将从模板复制的指定属性是：

transform

gradientUnits

type

<mpath>——定义运动路径的<path>元素的URL引用。

<pattern>——对当前SVG文档中的其他<pattern>元素的URL引用。任何在被引用的元素上定义的，没有在这个元素上定义的属性会被这个元素继承。如果这个元素没有子元素，而被引用的元素（可能是由于它自己的href属性）有，那么这个元素继承了被引用元素的子元素。该继承可以是任意级别的间接关系; 因此，如果被引用的元素由于它自己的href属性而继承了属性或子元素，那么当前元素可以继承那些属性或子元素。在<pattern>元素上，href属性是可以设定动画的。

<script>——对包含脚本代码的外部资源的URL引用。

<textPath>——如果未提供任何path属性，则将文本呈现在其上的对<path>元素的URL引用。在<textPath>元素上，href属性是可以设定动画的。

<use>——对要克隆的SVG文档中的元素/片段的URL引用。<use>元素可以通过指定没有片段的href值来引用整个SVG文档。这样的引用指向被引用文档的根元素。

实例

HTML

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

结果

规范

规范	状态	评论
可缩放矢量图形（SVG）2该规范中'href for <a>'的定义。	候选推荐	为<a>元素定义href。
SVG动画级别2该规范中'用于<动画>，<动画>，<动画变换>，<组>的定义。	编辑草稿	为动画元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <游标>'的定义。	候选推荐	为<cursor>元素定义href。
SVG动画级别2该规范中'href for <discard>'的定义。	编辑草稿	为<discard>元素定义href。
滤镜效果模块级别1该规范中'href for <feImage>'的定义。	候选推荐	为<feImage>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <hatch>'的定义。	候选推荐	为<hatch>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <image>'的定义。	候选推荐	为<image>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <linearGradient>'的定义。	候选推荐	为<linearGradient>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <mesh>'的定义。	候选推荐	为<mesh>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <meshgradient>'的定义。	候选推荐	为<meshgradient>元素定义href。
SVG动画级别2该规范中'href for <mpath>'的定义。	编辑草稿	为<mpath>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <pattern>'的定义。	候选推荐	为<pattern>元素定义href。
可缩放矢量图形（SVG）2该规范中的'href for <radialGradient>'的定义。	候选推荐	为<radialGradient>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <script>'的定义。	候选推荐	为<script>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <textPath>'的定义。	候选推荐	为<textPath>元素定义href。
可缩放矢量图形（SVG）2该规范中'href for <use>'的定义。	候选推荐	为<use>元素定义href。

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	(Yes)	51.0 (51.0)	(Yes)	(Yes)	(Yes)	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	51.0 (51.0)	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18