第16章:链接

16.1. 引用

16.1.1. 概述

在互联网上,资源通过URL(国际化资源标识符)进行标识。例如,位于 http://example.com 的名为 someDrawing.svg 的 SVG 文件可能具有以下URL

http://example.com/someDrawing.svg

一个URL 还可以通过包含URL 片段标识符来指向 XML 文档中的特定元素。一个包含URL 片段标识符的URL 由一个可选的基础URL、后跟一个 "#" 字符,以及后续的URL 片段标识符组成。例如,以下URL 可以用来指定在文件 someDrawing.svg 中 ID 为 "Lamppost" 的元素:

http://example.com/someDrawing.svg#Lamppost

16.1.2. 定义

URL 引用
URL 引用是一个国际化资源标识符,定义见 国际化资源标识符 [rfc3987]。见 引用引用和‘defs’ 元素
带片段标识符的 URL 引用
一个国际化资源标识符 [rfc3987],可以包含一个 <absoluteURL> 或 <relativeURL> 以及该资源中的片段标识符。见 引用 和‘defs’ 元素。带片段标识符的 URL 引用通常用于引用 绘图服务器
外部文件引用
一个URL 引用带片段标识符的 URL 引用 ,指向不属于当前文档的资源。
同文档 URL 引用
一个带片段标识符的 URL 引用 ,其非片段部分的 URL 指向当前文档。
数据 URL
一个URL 引用,指向使用 “数据” URL 方案 [rfc2397] 指定的嵌入文档。 数据 URL 引用既不是外部文件引用,也不是同文档 URL 引用
循环引用
URL 引用 直接或间接引用自身被视为无效的循环引用。 什么构成循环引用取决于引用资源的使用方式,并可能包括对当前元素祖先的引用。
未解析引用
仍在处理中的引用,尚未导致错误或已识别的资源。
无效引用

以下任何情况均为无效引用:

  • 循环引用。
  • 一个URL 引用,在处理期间导致错误。
  • 一个URL 引用,无法解析。
  • 对于给定引用不适当的目标的元素的URL 引用应视为无效引用 (参见 有效的 URL 目标以了解适当的目标)。 例如,clip-path 属性只能引用 clipPath 元素。如果引用的元素不是clipPath, 则属性设置clip-path:url(#MyElement)为无效引用。

无效引用可能是错误,也可能不是错误 (参见 错误处理),具体取决于引用的属性或属性是否定义了回退行为。

16.1.3. URL 和 URI

国际化资源标识符 (URLs) 是统一资源标识符 (URIs) 的更广泛补充。一个 URL 是来自通用字符集的字符序列 [UNICODE]。URI 是由更受限制的字符集合构成的。所有 URI 都已经符合URLs。从URLs 到 URIs 的映射由URL 规范定义,这意味着在 XML 文档中可以使用 URLs 替代 URIs 来识别资源。如果协议不直接支持URLs,则可以将 URLs 转换为 URIs 以在网络上进行解析。

之前的 SVG 版本遵循 XLink,将 URL 引用类型定义为 URI 或在应用特定转义程序后必须产生的字符序列。转义程序在 XLink 1.0 规范 [xlink] 和 W3C XML Schema Part 2: Datatypes 规范 [xmlschema-2] 中重复。这一复制引入了错误和偏差的可能性,但因为URL 规范尚未标准化而被采用。

在本规范中,正确的术语URL用于这个“URI 或字符序列加算法”,而将 URL 转换为 URI 的转义方法通过引用URL 规范 [rfc3987] 来定义,该规范现已成为 IETF 提议的标准。其他 W3C 规范预计会随着时间的推移进行修订,以删除这些重复的转义程序描述,并直接引用URL

16.1.4. 语法形式:URL 和 <url>

在 SVG 中,大多数元素之间的结构关系是使用‘href’ 属性中的 URL 值来指定的。然而,许多表现属性允许将 URL 和文本字符串作为内容。为了将文本字符串与相对 URL 区分开,<url> 生成用于表现属性及其对应的 CSS 属性 [css-values]。这只是用功能符号表示的 URL。

SVG 广泛使用URL 引用,包括绝对和相对引用,指向其他对象。例如,一个linearGradient 元素可以基于另一个渐变元素,因此只需通过在href 属性中引用源渐变的 URL 来指定两者之间的差异:

<linearGradient id="SourceGradient">...</linearGradient>
<linearGradient id="MyGradient"
                href="#SourceGradient">...</linearGradient>

为了用该渐变填充矩形,矩形的fill 属性的值可以设置为包含对相关linearGradient 元素的 URL 引用;以下是一个示例:

<rect fill="url(#MyGradient)">

16.1.5. URL 引用属性

URL 引用 通常使用 ‘href’ 属性来指定。该属性的值形成对所需资源(或次级资源,如果有片段标识符)的引用。‘href’ 属性的值必须是一个 URL。

因为任何应用检查一个值是否是URL 引用是不切实际的,因此本规范遵循URL 规范,并对SVG 创作工具不施加这样的符合性测试要求。无效的 URL 不会使 SVG 文档不符合规范。SVG 用户代理仅在需要时处理 URLs,如URL 引用的处理所指定。

16.1.6. 已弃用的 XLink URL 引用属性

在以前的 SVG 版本中,‘href’ 属性在 XLink 命名空间 [xlink] 中指定。该用法现已弃用,应该使用没有命名空间的‘href’ 属性来指定URL 引用

为了向后兼容,已弃用的 xlink:href 属性如下定义,以及已弃用的 xlink:title 属性。

属性定义:

名称 初始值 可动画
xlink:href URL [URL] (none) (见下文)

为了向后兼容,带有 ‘href’ 属性的元素也识别在 XLink 命名空间 [xlink] 中的 ‘href’ 属性。

‘href’ 属性在 XLink 命名空间和没有命名空间的情况下同时存在时,应使用没有命名空间的属性值。XLink 命名空间中的属性应被忽略。

符合规范的 SVG 生成器 必须生成没有命名空间的 ‘href’ 属性。然而,它也可以 同时 生成 XLink 命名空间中的 ‘href’ 属性以提供向后兼容性。

如果并且只有在对应的‘href’ 属性被定义为可动画时,该属性才是可动画的

名称 初始值 可动画
xlink:title <任何东西> (none)

已弃用的属性,用于以人类可读的方式描述链接或资源的含义。新内容应使用‘title’ 子元素,而不是 ‘xlink:title’ 属性。

此信息的使用在很大程度上依赖于所进行的处理类型。例如,它可用于使标题对视力受限用户使用的应用程序可用,或创建链接表,或提供当用户鼠标悬停在起始资源上时出现的帮助文本。

如果使用 ‘title’ 属性,必须在 XLink 命名空间中。参考XML 链接语言 (XLink) [xlink]。

使用已弃用的 XLink 属性 xlink:hrefxlink:title 时,必须提供明确的 XLink 命名空间声明 [xml-names], 提供这样的 XLink 命名空间声明的一种简单方法是在使用 XLink 属性的svg 元素上包含一个 ‘xmlns’ 属性。例如:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...>
  <image xlink:href="foo.png" .../>
</svg>

16.1.7. URL引用的处理

URL在需要时被处理以识别资源,如下所示:

过时的xlink:href 属性在相应的href属性被处理时处理, 但仅当元素上不存在这样的href属性时。

处理URL涉及三个步骤: 生成绝对URL; 获取文档(如果需要); 识别目标元素(如果需要)。

URL引用是未解析的 直到处理结果导致无效引用 或识别目标资源。 非呈现属性中的未解析引用结构外部元素会阻止加载事件 的触发。用户代理可能会对不属于同一文档的URL引用的引用解析设置时间限制, 之后该引用将被视为网络错误 (因此视为无效引用)。

对于动态文档中的同一文档的URL引用, 属性或属性的修改或动画, 或从DOM中移除元素, 可能导致URL引用返回未解析状态。 用户代理必须再次尝试解析URI以识别引用的资源。

16.1.7.1. 生成绝对URL

如果URL引用是相对的,在使用之前必须计算其绝对版本。 应使用以下方法之一生成绝对URL:

‘xml:base’属性 只在XML文档中有效; 这包括SVG文档和XHTML文档,但不包括非XML的HTML文档。 相比之下,base元素 影响任何SVG或HTML文档中的相对URL, 通过更改文档基本URL

如果协议(如HTTP)不直接支持URL, 用户代理必须将URL转换为URI,如URL规范第3.1节中所述[rfc3987]。

生成绝对URL后:

CSS值和单位中定义, 样式属性中的片段URL必须被视为 同一文档URL引用, 无论属性声明的文件是什么。

16.1.7.2. 获取文档

SVG属性和属性可能引用其他文档。 在处理此类URL时, 用户代理应根据本节所述获取引用的文档, 除非在以下条件下:

从互联网上获取外部资源时, 用户代理必须使用潜在的 CORS启用请求 如HTML中所定义[HTML] corsAttributeState如下:

base

请求的origin是使用与HTML相同的规则计算的, SVGscript元素视为HTML script元素, SVGimage元素视为HTML img元素。 默认的origin行为必须设置为污染

未来的SVG规范可能会允许在具有href属性的其他SVG元素上使用CORS引用。

如果获取算法导致错误或空响应主体, 则引用URL视为无效引用

如果返回有效响应, 并且引用的有效URL目标 包括特定元素类型, 用户代理必须继续进行处理子资源文档。 否则(如果仅整个文档URL引用有效), 则获取的文档就是引用的资源。

16.1.7.3. 处理子资源文档

否则,必须解析子资源以识别目标元素。 如果获取的文档是用户代理可以解析的类型 以创建文档对象模型, 则必须在安全静态模式下处理它 (意味着,不获取任何其他外部资源, 不运行脚本或播放动画或视频)。 为外部子资源引用生成的文档模型 必须是不可变的(只读)且不能被修改。

如果可以从获取的文件生成文档对象模型, 则处理URL必须继续 如识别目标元素中所示, 解析后的子资源文档作为引用文档。 用户代理可以在完全解析文档之前 开始目标识别过程。

用户代理可以维护外部资源URL及其关联的解析文档的列表, 并可以重用这些文档以供后续引用, 只要这样做不违反资源的处理模式、 缓存和CORS要求。

16.1.7.4. 确定目标元素

对于特定元素的URL引用, 引用是否有效取决于是否能够在引用文档中找到元素 以及它是否为允许的类型。

使用在之前处理步骤中识别的引用文档 (无论是外部子资源文档还是当前文档), 目标元素的识别如下:

目标元素提供引用资源 (仅当且仅当)它是引用的有效URL目标

16.1.7.5. 有效的URL目标

对于href(或xlink:href)属性的有效目标元素类型 基于具有该属性的元素,如下所示:

本规范中定义的样式属性的有效目标元素类型如下:

对于允许引用目标元素或图像文件的引用 (如shape-insideshape-subtractmask属性), 用户代理必须识别目标元素并确定其是否为有效目标。 如果解析的目标元素不是允许的元素类型, 引用的资源即为整个文档文件; 目标片段用于处理该文件,就像处理任何其他图像一样。

在所有其他情况下,如果解析的目标元素类型(或文档类型)不允许用于URL引用, 则它是无效引用

SVG提供了a元素,用于指示链接(也称为超链接网络链接)。 如果a元素具有hrefxlink:href属性,则该元素形成一个链接;如果没有这些属性,a元素就是一个非活动的链接占位符。

SVG 1.1根据XLink规范定义链接([XLink),使用在XLink命名空间中定义的属性。 SVG 2使用了一组与HTML链接一致的替代属性,并弃用了XLink属性

a元素可以包含其父元素可以包含的任何元素,除了另一个a元素;同一个元素用于图形和文本链接内容。 链接不能嵌套; 如果a元素是另一个链接元素的后代 (无论是在SVG命名空间中还是在其他命名空间中), 用户代理必须忽略其href属性并将其视为非活动状态。 无效的a元素仍然必须呈现为通用容器元素。

无效嵌套链接的渲染存在风险,并且可能会与关于unknown元素的渲染决策同步。

对于指针事件处理, 每个单独渲染的元素在a元素内都有一个链接命中区域(根据其pointer-events属性的值), 而不是a元素本身的边界框。 用户代理还必须确保所有链接都是可聚焦的,并且可以通过键盘命令激活。

远程资源(链接的目的地)由href属性在a 元素上指定的URL定义。远程资源可以是任何Web资源(例如,图像、视频片段、音频片段、程序、另一个SVG文档、HTML文档、当前文档内的元素、不同文档内的元素等)。 在用户激活链接后(通过鼠标点击、键盘输入、语音命令等), 用户代理应该尝试获取指定的资源文档并将其显示或作为下载文件提供。

示例链接01为椭圆形赋予了一个链接。

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>示例链接01 - 椭圆上的链接
  </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03">
  <a href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>
</svg>
示例链接01 — 椭圆上的链接

示例链接01

以SVG形式查看此示例(仅限SVG支持的浏览器)

如果上述SVG文件在支持SVG和HTML的用户代理中查看,则单击椭圆将导致当前窗口 或框架被W3C主页替换。

a
类别:
容器元素可渲染元素
内容模型:
描述性内容,加上父级内容模型允许的任何元素或文本,除了另一个a元素。如果父元素是开关元素,则使用最近的非开关祖先的内容模型。
属性:
DOM 接口:

属性定义:

名称 初始值 可动画
href URL [URL] (无)
引用对象的位置,表示为URL引用。 请参阅URL引用属性的通用处理。
名称 初始值 可动画
target _self | _parent | _top | _blank | <XML-Name> _self

当存在多个可能的目标资源时,应使用此属性,例如,当父文档嵌入在HTML或XHTML文档中,或使用标签浏览器查看时。此属性指定要在激活链接时打开的浏览上下文的名称(例如,一个浏览器标签或SVG、HTML或XHTML iframe或对象元素):

_self
当前SVG图像在当前SVG图像的同一浏览上下文中被链接内容替换。
_parent
SVG图像的直接父浏览上下文被链接内容替换(如果存在且可以安全访问此文档)。
_top
活动窗口或标签的全部内容被链接内容替换(如果存在且可以安全访问此文档)。
_blank
请求一个新的未命名窗口或标签来显示链接内容(如果此文档可以安全地做到这一点)。 如果用户代理不支持多个窗口/标签,则结果与_top相同。
<XML-Name>
指定用于显示链接内容的浏览上下文(标签、内联框架、对象等)的名称。如果存在可以安全访问此文档的具有此名称的上下文,则重用它,替换现有内容。如果不存在,则创建(与'_blank'相同,只是现在有一个名称)。名称必须是有效的XML名称[XML11],并且不应以下划线(U+005F低线字符)开头,以满足有效的浏览上下文名称的要求。

浏览上下文的规范定义和在浏览上下文之间导航操作的安全限制在HTML [HTML]中,具体见加载网页的章节

之前的SVG版本定义了特殊目标值'_replace'。它从未很好地实现,并且由于HTML对浏览上下文的定义变化,'_replace''_self'之间的区别已变得多余。使用'_self'替换当前SVG文档。

'_new'合法的目标值。使用'_blank'在新标签/窗口中打开文档。

名称 初始值 可动画
download 任何值(如果非空,值表示建议的文件名) (无)
ping 以空格分隔的有效非空URL标记[HTML] (无)
rel 以空格分隔的关键字标记[HTML] (无)
hreflang BCP 47语言标签字符串[HTML] (无)
type MIME类型字符串[HTML] (无)
referrerPolicy 引用者策略字符串[REFERRERPOLICY] (无)
这些属性进一步描述了目标资源及其与当前文档的关系。 允许的值和含义如HTML中对a元素的定义

16.3. 链接到SVG内容:URL片段和SVG视图

因为SVG内容通常表示某个事物的图片或图形,所以一个常见的需求是链接到文档的特定视图,其中视图指示初始转换,以便呈现文档特定部分的特写。

16.3.1. SVG片段标识符

SVG 2 要求: 合并SVG 1.1 SE文本和SVG Tiny 1.2文本的片段标识符链接遍历,并添加媒体片段。
解决方案: SVG 2将拥有媒体片段标识符。
目的: 与媒体片段URI保持一致。
负责人: Cyril (ACTION-3442)

要链接到SVG文档的特定视图,需要一个正确形成的带片段标识符的URL引用,即SVG片段标识符。SVG片段标识符定义了位于MIME媒体类型“image/svg+xml”的资源的URL中“选择器”或“片段标识符”部分的含义。

SVG片段标识符可以有以下几种形式:

16.3.2. SVG片段标识符定义

SVG片段标识符定义如下:

SVGFragmentIdentifier ::= BareName *( "&" 时间段 ) |
                          SVGViewSpec *( "&" 时间段 ) |
                          空间段 *( "&" 时间段 ) |
                          时间段 *( "&" 空间段 )

BareName ::= XML_Name
SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
SVGViewAttributes ::= SVGViewAttribute |
                      SVGViewAttribute ';' SVGViewAttributes

SVGViewAttribute ::= viewBoxSpec |
                     preserveAspectRatioSpec |
                     transformSpec |
                     zoomAndPanSpec
viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
transformSpec ::= 'transform(' TransformParams ')'
zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'

其中:

SVG视图框参数按顺序应用,如CSS变换规范中定义(例如,SVG视图按ViewBoxParams定义进行变换,然后按TransformParams定义进行变换)。

在片段规范中允许空格。逗号用于分隔SVG视图规范中的数值(例如,#svgView(viewBox(0,0,200,200))),分号用于分隔属性(例如,#svgView(viewBox(0,0,200,200);preserveAspectRatio(none)))。

片段标识符可以根据CSS对象模型(CSSOM)规范中定义的规则进行URL转义。例如,分号可以转义为%3B,以允许动画(以分号分隔的)URL列表,因为否则分号会被解释为列表分隔符。

四种类型的SVGViewAttribute可以以任意顺序出现,但每种类型在正确形成的SVGViewSpec中只能出现一次。

当源文档通过HTML锚元素([HTML];即<a href=...>元素在HTML中)或XLink规范[xlink]链接到SVG文档时,SVG片段标识符指定SVG文档的初始视图,如下所示:

16.3.3. 预定义视图:‘view’ 元素

‘view’ 元素定义如下:

view
类别:
内容模型:
以下元素的任意数量,可以按任意顺序出现:scriptstyle
属性:
DOM接口:

我们已决定删除 viewTarget 属性。

决议:2015年巴黎 F2F 第3天。

所有者:BogdanBrinza。

16.4. DOM接口

16.4.1. 接口 SVGAElement

一个SVGElement对象表示DOM中的a元素。

[Exposed=Window]
interface SVGAElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedString target;
  attribute DOMString download;
  attribute USVString ping;
  attribute DOMString rel;
  [SameObject, PutsForward=value] readonly attribute DOMTokenList relList;
  attribute DOMString hreflang;
  attribute DOMString type;

  attribute DOMString text;

  attribute DOMString referrerPolicy;
};

SVGAElement includes SVGURIReference;
SVGAElement includes HTMLHyperlinkElementUtils;

这些target, download, ping, rel, hreflang, type, IDL属性反映同名的内容属性。

relList IDL属性反映rel内容属性。

referrerPolicy IDL属性反映referrerpolicy内容属性, 限制 为仅已知值

text IDL属性, 在获取时,必须返回与textContent IDL属性相同的值 ,在设置时,必须表现得好像textContent IDL属性 在元素上已被设置为新值。

16.4.2. 接口 SVGViewElement

一个SVGViewElement对象表示DOM中的 view元素。

[Exposed=Window]
interface SVGViewElement : SVGElement {};

SVGViewElement includes SVGFitToViewBox;
SVGViewElement includes SVGZoomAndPan;