W3C

可缩放矢量图形 (SVG) 2

W3C 候选推荐标准快照

有关本文档的更多详细信息
此版本:
https://www.w3.org/TR/2026/CR-SVG2-20261006/
最新版本:
https://www.w3.org/TR/SVG2/
最新编辑草案:
https://w3c.github.io/svgwg/svg2-draft/
历史记录:
https://www.w3.org/standards/history/SVG2/
实现报告:
https://wpt.fyi/results/svg
测试套件:
https://github.com/web-platform-tests/wpt/tree/master/svg
单页版本:
https://www.w3.org/TR/2026/CR-SVG2-20261006/single-page.html
反馈:
https://github.com/w3c/svgwg/issues/
公众评论:
www-svg@w3.org(存档)
编辑:
Karl Dubost,Apple, Inc. <karlcow@apple.com>
Divyansh Mangal,Microsoft Co. <dmangal@microsoft.com>
Dirk Schulze,Adobe Systems <dschulze@adobe.com>
Virali Purbey,Microsoft Co. <viralipurbey@microsoft.com>
前编辑:
Nikos Andronikos,Canon, Inc. <nikos.andronikos@cisra.canon.com.au>
Rossen Atanassov,Microsoft Co. <ratan@microsoft.com>
Tavmjong Bah,受邀专家 <tavmjong@free.fr>
Amelia Bellamy-Royds,受邀专家 <amelia.bellamy.royds@gmail.com>
Brian Birtles,Mozilla Japan <bbirtles@mozilla.com>
Bogdan Brinza,Microsoft Co. <bbrinza@microsoft.com>
Cyril Concolato,Telecom ParisTech <cyril.concolato@telecom-paristech.fr>
Erik Dahlström,受邀专家 <erik@dahlström.net>
Chris Lilley,W3C <chris@w3.org>
Cameron McCormack,Mozilla Corporation <cam@mcc.id.au>
David Storey,Microsoft Co. <dstorey@microsoft.com>
Doug Schepers,W3C <schepers@w3.org>
Richard Schwerdtfeger,IBM <schwer@us.ibm.com>
Satoru Takagi,KDDI Corporation <sa-takagi@kddi.com>
Jonathan Watt,Mozilla Corporation <jwatt@jwatt.org>
Eric Willigers,Google

摘要

本规范定义了可缩放 矢量图形(SVG)第 2 版的功能和语法。SVG 是一种基于 XML、用于描述 二维矢量图形以及矢量/栅格混合图形的语言。SVG 内容可以设置样式, 可缩放以适应不同的显示分辨率,并且可以独立查看, 与 HTML 内容混合,或使用 XML 命名空间嵌入其他 XML 语言中。 SVG 还支持动态更改;可以使用脚本创建交互式文档, 并且可以使用声明式动画功能或脚本执行动画。

本文档的状态

本节描述本文档在 发布时的状态。当前 W3C 出版物列表以及本技术报告的最新修订版可在 W3C 标准和草案索引中找到。

本文档是 2026 年 10 月 06 日的 SVG 2 候选推荐标准快照。此 SVG 版本 基于 SVG 1.1 第二版 构建,通过改进该语言的可用性并添加作者普遍 请求的新功能。更改附录列出了自 SVG 1.1 第二版以来所做的所有更改。

欢迎对本候选推荐标准快照提出意见。 可以使用 Github issue 提交反馈和错误报告。其他意见可以发送到 www-svg@w3.org, 这是一个用于讨论 Web 上矢量图形相关问题的公开电子邮件列表。该列表会被 存档,并且 发送者必须从首次发帖起同意其消息被公开存档。 若要订阅,请发送电子邮件至 www-svg-request@w3.org,并在 主题行中填写单词 subscribe。

将使用实现报告和测试套件。

本规范包含若干注释,工作组 使用这些注释记录会议纪要和决议的链接,其中对特定 SVG 功能作出了决定。还使用不同的颜色来标记 本规范不同章节的成熟度:

在本候选推荐标准快照中,默认情况下,表示 章节成熟度的背景颜色会被隐藏,并且仅显示用于记录 我们在需求收集过程中针对 SVG 2 的特定要求的注释。 若要查看章节成熟度背景颜色以及任何其他 注释,可以使用“All annotations”备用样式表。

本文档由 SVG 工作组使用推荐标准轨道作为 候选推荐标准快照发布。

作为候选推荐标准发布并不意味着得到 W3C 及其成员的认可。 候选推荐标准快照已经接受广泛审查,旨在 收集实现经验,并且工作组成员承诺为 免版税许可用于 实现。

本候选推荐标准预计最早于 2026 年 12 月 01 日推进为推荐标准。

本文档由一个依据 W3C 专利政策运作的工作组制定。 W3C 维护一份与该工作组交付成果相关的所有专利 披露的公开列表; 该页面还包含披露专利的说明。任何实际知悉 某项专利并认为该专利包含 必要权利要求的个人 必须按照 W3C 专利政策第 6 节披露相关信息。

本文档受 2025 年 8 月 18 日 W3C 流程 文档管辖。

本规范中的所有功能都依赖于浏览器 或创作工具中的实现。如果某项功能尚不能确定会被实现,我们将 该功能定义为“存在风险”。存在风险的功能将从当前 规范中移除,并可能包含在本规范的未来版本中。如果 某项存在风险的功能对 SVG 作者尤为重要,则鼓励这些作者 向实现者反馈其优先级。以下 功能存在风险,并可能在 CR 期间被移除:

致谢

SVG 工作组感谢以下人员 通过提交补丁或参与讨论为本规范作出贡献, 并由此促成了对本文档的更改: David Dailey, Eric Eastwood, Jarek Foksa, Daniel Holbert, Paul LeBeau, Robert Longson, Henri Manson, Ms2ger, Kari Pihkala, Philip Rogers, David Zbarsky.

此外,SVG 工作组还要感谢 SVG 先前版本的编辑和作者所作出的贡献 ——由于本文档中的许多文本均源自这些 较早的规范——其中包括:

最后,SVG 工作组还要感谢 SVG 工作组之外协助 SVG 规范开发过程的众多人员。这些人员实在 太多,无法逐一列出。他们包括但不限于 SVG 1.0 和 1.1 语言的早期实现者(包括 查看器、创作工具和服务器端转码器)、SVG 内容开发者、在 www-svg@w3.org 和 svg-developers@yahoogroups.com 电子邮件列表中作出贡献的人员、W3C 的其他工作组 以及 W3C 团队。SVG 1.1 确实是 SVG 工作组、W3C 其他成员和公众共同协作的成果,并且极大受益于 早期实现者和内容开发者的开创性工作、 公众的反馈以及 W3C 团队的帮助。


第 1 章: 简介

1.1. 关于 SVG

本规范定义了以下内容的功能和语法 可缩放矢量图形 (SVG).

SVG 是一种用于描述二维图形的语言. 作为独立格式或与其他 XML 混合使用时, 它使用 XML 语法 [xml]. HTML 文档内使用的 SVG 代码使用 HTML 语法 [HTML]. SVG 允许使用三种类型的图形对象: 矢量图形 形状 (例如, 由直线和曲线组成的路径), 图像和文本. 图形对象可以被分组, 设置样式, 变换和合成. 其功能集包括嵌套变换, 裁剪 路径, Alpha 遮罩, 滤镜效果和模板对象.

SVG 绘图可以是交互式的 和动态的. 动画 可以被定义和触发 可以通过声明方式 (即, 通过嵌入 SVG 动画元素 到 SVG 内容中) 或通过脚本.

通过使用一种 可访问 SVG 文档对象模型 (DOM)的补充脚本语言, 可以实现复杂的 SVG 应用, 该模型 提供对所有元素, 属性和 特性的完整访问. 可以为任何 SVG 图形对象 分配丰富的事件处理程序. 在网页中, 相同的脚本可以同时操作 HTML 和 SVG 元素. 脚本.

SVG 适用于丰富的信息图形呈现, 包括许多 如果正确使用的无障碍功能, 可确保尽可能广泛的受众能够使用这些内容. 但是, 在可能的情况下, 直接 链接到源数据, 有助于许多人理解所提供的内容.

1.2. 与其他标准工作的兼容性

SVG 利用其他 W3C 规范 和标准工作并与其集成, 如下所述:

1.3. 与本标准先前版本的关系

本版 SVG 标准是在 2003 年发布的 1.1 版基础上开发并构建的. SVG 的一个中间版本 - 名为 Tiny 1.2 - 于 2008 年发布. 但是它没有得到广泛接受, 其 增强功能集的实现非常少. 不过, 有一些 1.2 功能已被许多 SVG 实现所实现 并且 这些功能已作为本规范的一部分纳入. 但除此之外, SVG 工作组认为 版本 Tiny 1.2 是 SVG 标准的一个已弃用分支.

1.4. 规范性术语

在本规范中, 关键词 "必须", "不得", "要求", "须", "不得", "应该", "不应该", "推荐", "可以", 和 "可选" 应按照 用于 RFC 中表示 要求级别的关键词 [rfc2119] 中所述进行解释. 但是, 为了可读性, 这些词在本规范中并非全部 以大写字母显示.

有时, 本规范会为 作者和用户代理推荐良好实践.


第 2 章: 一致性标准

2.1. 概述

使用 SVG 定义的图形有许多不同的应用. 因此, 并非所有使用 SVG 的软件都具有相同的功能. 因而, 是否符合 SVG 规范并不是一个二元问题; 软件可以在受限的功能集内符合规范.

此外, SVG 被设计为集成到其他类型的文档中; 根据集成类型, 可能只有有限的功能集才是合适的. SVG 文档片段可以通过多种方式 被其他文档引用或包含, 从而 由用户代理处理. SVG 文档也可以直接查看, 作为主文档. 使用 SVG 文档片段的每种不同方式 都意味着对 SVG 文档 片段应如何处理有一组特定要求.

因此, 本章定义了若干 处理模式, 它们涵盖文档中可能启用或禁用的 不同功能组合. 此外, 它还规定了当 SVG 文档引用或嵌入其他 SVG 文档时 必须使用哪种处理模式的规范性要求. 其他规范也可以通过引用使用同一组处理模式 来描述应如何处理 SVG 文档.

本文档不对 可以引用或包含 SVG 文档的其他规范施加规范性要求, 例如 HTML 和各种 CSS 规范. 其意图是让这些其他 规范以规范性方式指向本文档中适当的处理模式 .

本章还概述了 不同类型的 SVG 内容的特定一致性要求, 以及使用或创建 SVG 的不同类别的软件.

2.2. 处理模式

本节为 SVG 文档定义了一组标准的处理模式 . 每种处理模式都指定是否启用某些高级 SVG 功能.

2.2.1. 功能

根据处理模式可以启用或禁用的 功能如下:

声明式动画

声明式动画既包括 SVG 中的动画元素 – ‘animate’, ‘animateMotion’, ‘animateTransform’ 和 ‘set’ – 也包括 CSS 过渡和动画 (有关详细信息, 请参阅动画附录). 当 SVG 文档中禁用声明式动画时, 任何 动画元素或 CSS 过渡或动画都不得应用或运行.

这与将文档的动画 状态暂停在文档时间 0s 并不相同; 如果动画被定义为从 0s 开始, 它仍然不会被应用.

对外部资源的引用

对外部资源的引用是由 文档中使用的标记, 样式特性, 脚本或其他 Web 平台功能 发起的 URL 引用或网络访问请求 , 以下情况除外:

当 SVG 文档中禁用外部引用时, 任何通过 外部引用获取文档的尝试都必须改为视为 发生网络错误且未接收到任何数据.

当启用外部引用时, 支持从互联网请求外部文件的用户代理 必须遵守跨源资源获取的限制, 如链接章节中所述.

脚本执行

脚本执行是指执行任何 SVG ‘script’ 元素, 事件属性中的脚本 (例如 SVG 元素上的 ‘onclick’ ), 或文档中使用的其他 Web 平台功能定义的任何其他脚本 , 例如任何 HTML ‘script’ 元素. 当 SVG 文档中禁用脚本执行时, 文档中的任何脚本 都不得运行.

交互

交互是指传递 DOM 事件或调用 任何特定于用户代理的 UI 行为, 例如文本选择, 焦点更改, 链接跳转, 或响应鼠标或键盘活动等 用户输入而触发的动画或过渡. 当 SVG 文档中禁用交互时, 任何以 文档或文档内任何元素为目标的用户输入事件都必须 不产生任何效果.

2.2.2. 动态交互模式

此处理模式对 SVG 语言的任何 功能都不施加限制.

动态交互功能
脚本执行 是
外部引用 是
声明式动画 是
交互性 是

2.2.3. 动画模式

此处理模式适用于以下情况: SVG 文档将用作允许 解析外部引用的动画图像, 但不打算用作 交互式文档.

动画功能
脚本执行 否
外部引用 是
声明式动画 是
交互性 否

2.2.4. 安全动画模式

此处理模式适用于以下情况: SVG 文档将用作不允许 解析外部引用的动画图像, 并且不打算用作 交互式文档. 此模式可能用于传统上 图像支持仅限于栅格图像 (例如 JPEG, PNG 和 GIF) 的场合.

安全动画功能
脚本执行 否
外部引用 否
声明式动画 是
交互性 否

2.2.5. 静态模式

此处理模式适用于以下情况: SVG 文档将用作允许 解析外部引用的非动画图像, 但不打算用作 交互式文档. 例如, 处理要包含在打印文档中的图形的 SVG 查看器 很可能会使用静态模式.

静态功能
脚本执行 否
外部引用 是
声明式动画 否
交互性 否

2.2.6. 安全静态模式

此处理模式适用于以下情况: SVG 文档将用作不允许 解析外部引用的非动画图像, 并且不打算用作 交互式文档. 此模式可能用于传统上 图像支持仅限于非动画栅格图像 (例如 JPEG 和 PNG.) 的场合

安全静态功能
脚本执行 否
外部引用 否
声明式动画 否
交互性 否

2.3. SVG 子资源文档的处理模式

当直接查看 SVG 文档时, 预期将使用用户代理所支持的最全面的 处理模式来显示它. 但是, 当 SVG 作为 子资源或嵌入文档处理时, 必须应用以下限制:

‘image’ 引用

嵌入在 ‘image’ 元素中的 SVG 如果嵌入文档支持声明式动画, 则必须以安全动画模式处理, 否则以安全静态模式处理.

在其他使用 SVG 替代栅格图像的情况下, 预计也会使用相同的处理模式, 例如 HTML ‘img’ 元素或 接受 <image> 数据类型的任何 CSS 特性. 这与 HTML 的 要求一致, 即图像源必须引用 "一种非交互式, 可选动画, 既不分页也不包含脚本的图像资源" [HTML]

‘use’ 元素和其他 'href' 引用

当 SVG 文档通过 ‘use’ 元素引用 或绘制服务器元素交叉引用加载时, 它们必须以安全静态模式处理.

请注意, 在处理子资源文档时动画不会运行, 这既出于性能原因, 也因为目前没有定义 可供资源文档引用其时间线的上下文. 但是, 当子资源文档中的元素因 ‘use’ 元素引用 或绘制服务器交叉引用而被克隆 到当前文档中时, 克隆的元素实例可以在 当前文档的时间线中产生动画, 如use 元素影子树中的动画中所述, 并且可能触发其他子资源文件的加载.

图形效果引用

当 SVG 文档通过 任何以文档中特定元素为目标的样式特性引用加载时 (而不是将 SVG 作为图像格式), 它们必须以安全静态模式处理.

请注意, 动画不会在子资源文档中运行, 这既出于性能原因, 也因为目前没有定义 可供资源文档引用其时间线的上下文.

某些样式特性可以引用特定元素 或整个图像文件; 第一种情况下处理模式限制更严格. 例如, 对 SVG ‘mask’ 元素的引用 不会产生动画, 但作为图像遮罩使用的整个 SVG 文件可以产生动画.

字体中的 SVG

当 SVG 文件作为字体引用的一部分进行处理时, 如果支持动画字形, 它们必须使用 安全动画模式, 否则使用安全静态模式.

这些限制包含在 OpenType 规范对来自 "SVG" 表的文档处理要求中. OpenType 还应用了其他限制, 形式为一个用户代理样式表, 它会阻止文本和外部对象的渲染 [OPENTYPE].

内联包含在宿主文档中的 SVG 文档片段 必须使用与宿主文档相匹配的处理模式. 作为 SVG ‘foreignObject’ 元素子项包含的 SVG 文档片段必须使用周围 SVG 文档的 处理模式; 非 SVG 外部内容必须以等效限制进行处理.

例如, 如果 SVG 文档由于被 HTML ‘img’ 或 SVG ‘image’ 元素引用而使用 安全动画模式, 那么 ‘foreignObject’ 元素内的任何内容 都必须禁用脚本, 交互性和外部文件引用, 但应该启用声明式动画.

2.3.1. 示例

下面是通过 引用在 HTML 页面中嵌入 SVG 的各种方法, 以及每种方法预期的处理模式 和允许的功能.

"实时示例" 行中的每个单元格都应显示一个黄色 笑脸. 在下面的每个示例中, 单击眼睛会测试链接 跳转, 单击脸部会测试声明式交互 和脚本执行. 链接应将图像替换为蓝色 方块 (单击它会将其恢复为原始图像). 声明式交互 使用 ‘set’ 元素将脸部从黄色色调改为绿色色调, 并使用 CSS 伪类为交互元素添加描边. 脚本应填充微笑. 如果左眼正在眨眼, 则支持基于时间 (而非基于交互) 的声明式动画 (使用 ‘animate’ 元素) 并且如果眼睛为深蓝色并定期闪烁浅蓝色 (使用 CSS 关键帧动画), 也支持该动画.

此处概述的预期处理模式和功能 可能会随相应 HTML 或 CSS 规范未来的任何更改而变化.

嵌入方法 不使用沙盒的 object img CSS 背景
预期处理模式 动态交互 动态交互, 有限制 安全动画 安全动画
声明式, 基于时间的动画
(左眼眨眼, 双眼颜色变化 )
允许 允许 允许 允许
声明式, 交互式动画和样式更改
(单击时脸部颜色变化 , 悬停或聚焦时脸部/眼睛显示轮廓)
允许 允许 禁用 禁用
在同一浏览上下文中导航到同一域的链接
(单击眼睛时图像变化)
允许 允许 禁用 禁用
脚本化交互
(单击脸部时微笑变宽)
允许 禁用 (由于沙盒限制) 禁用 禁用
实时示例 此浏览器不支持嵌入式 SVG 图像. 作为图像的笑脸

2.4. 文档一致性类别

SVG 是根据文档对象模型 (DOM) 定义的, 而不是根据特定的文件格式或文档类型. 因此, 对于 SVG 内容, 是否符合本规范取决于 内容是否为或能否生成符合规范的 DOM. 以下某些一致性类别取决于内容是否为 格式良好的 XML [xml].

2.4.1. 符合规范的 SVG DOM 子树

以给定元素为根的 DOM 节点树或子树 如果构成一个符合本文档中所述规范 (可缩放矢量图形 (SVG) 规范) 的 SVG 文档片段, 则它是符合规范的 SVG DOM 子树 . 具体而言, 它:

SVG 文档片段可以使用 XML 中的命名空间 [xml-names] 中描述的 XML 命名空间功能包含在父 XML 文档中. 但是请注意, 由于符合规范的 SVG DOM 子树必须以 ‘svg’ 元素作为其根, 因此不允许使用 SVG 命名空间中的单独非 ‘svg’ 元素. 因而, 以下文档的 SVG 部分 不符合规范:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- ParentXML 中的元素放在这里 -->
  <!-- 以下内容不符合规范 -->
  <z:rect xmlns:z="http://www.w3.org/2000/svg"
          x="0" y="0" width="10" height="10" />
  <!-- ParentXML 中的更多元素放在这里 -->
</ParentXML>

相反, 为使 SVG 部分成为符合规范的 SVG DOM 子树, 可以按如下方式修改文件:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- ParentXML 中的元素放在这里 -->
  <!-- 以下内容符合规范 -->
  <z:svg xmlns:z="http://www.w3.org/2000/svg"
         width="100px" height="100px">
    <z:rect x="0" y="0" width="10" height="10"/>
  </z:svg>
  <!-- ParentXML 中的更多元素放在这里 -->
</ParentXML>

SVG 语言和这些一致性标准没有为 SVG 内容的任何方面指定 大小限制. 元素数量, 字符数据量或 属性值中的字符数都没有最大值.

2.4.2. 符合规范的 SVG 标记片段

如果文档或文档的一部分可以由适用于文档 MIME 类型的解析器 无错误地解析 (网络错误除外) , 形成符合规范的 SVG DOM 子树, 并且还满足以下条件, 则它是符合规范的 SVG 标记片段 :

2.4.3. 符合规范的 XML 兼容 SVG 标记 片段

如果一个符合规范的 SVG 标记片段还满足以下条件, 则它也是符合规范的 XML 兼容 SVG 标记片段 :

2.4.4. 符合规范的 XML 兼容 SVG DOM 子树

以给定元素为根的 DOM 节点树或子树 如果序列化为 XML 后, 可以形成符合规范的 XML 兼容 SVG 标记 片段, 则它是符合规范的 XML 兼容 SVG DOM 子树.

如果 DOM 子树在不对其进行更改的情况下无法序列化为符合规范的 XML, 例如 ‘id’ 值 不是有效的 XML 名称, 或 Comment 节点的数据 包含子字符串 "--", 则该子树不是 符合规范的 XML 兼容 SVG DOM 子树.

2.4.5. 符合规范的 SVG 独立文件

如果文档满足以下条件, 则它是符合规范的 SVG 独立文件:

2.4.6. 错误处理

在多种情况下, SVG 文档片段在技术上 处于错误状态:

动态文档可以随时间进入和退出错误状态. 例如, 来自 SVG DOM 或动画的文档更改可能导致 文档变为处于错误状态, 而进一步的更改又可以 使文档重新变为正确状态.

每当文档处于错误状态时, 用户代理必须使用以下错误处理规则, 除非本规范的其他章节为处理特定错误 类型定义了更具体的规则:

由于一组脚本更改 可能导致给定 SVG 文档片段进入和退出 错误状态, 因此用户代理应仅在文档 呈现 (例如, 渲染到显示设备) 被 更新时应用错误处理.

2.5. 软件一致性类别

对于软件, 一致性要求取决于 程序的类别:

SVG 生成器
创建或提供 SVG 内容的任何软件, 无论是以标记形式还是以 DOM 形式 (客户端 JavaScript 库即属此情况).
SVG 创作工具
为人工内容创建者提供界面, 以操作将用于生成 SVG 的图形或代码的任何软件. SVG 创作工具也隐含地属于SVG 生成器.
SVG 服务器
响应其他软件的请求 而提供 SVG 内容的任何网络或文件服务器. SVG 服务器也隐含地属于SVG 生成器.
SVG 解释器
解析或处理 SVG 文档或标记片段的任何软件. 对于本规范中与解释器执行的解析或处理步骤 有关的任何章节, SVG 解释器都是SVG 用户代理 .
SVG 查看器
在解析或处理 SVG 文档或 SVG 标记片段后 创建已渲染图形表示的任何软件. SVG 查看器也隐含地属于SVG 解释器. 就本规范而言, SVG 查看器始终是SVG 用户代理 .
SVG 用户代理
SVG 用户代理是能够检索并 渲染 SVG 内容的用户代理.
用户代理

用户代理的一般定义是一种 检索和渲染 Web 内容的应用程序, 包括文本, 图形, 声音, 视频, 图像和其他内容类型. 一个 用户代理可能需要其他用户代理来处理 某些类型的内容. 例如, 浏览器可能运行一个 单独的程序或插件来渲染声音或视频. 用户 代理包括图形桌面浏览器, 多媒体 播放器, 文本浏览器, 语音浏览器以及辅助 技术, 例如屏幕阅读器, 屏幕放大器, 语音合成器, 屏幕键盘和语音输入 软件.

一般而言, "用户代理" 可能具有也可能不具有检索 和渲染 SVG 内容的能力; 但是, 除非上下文要求采用其他解释, 本规范中对 "用户代理" 的所有引用 都假定是指检索和渲染 SVG 内容的SVG 用户代理 .

许多程序会同时属于多个软件类别. 例如, 一个可以导入和显示 SVG 文件, 允许用户修改它们, 然后将修改后的图形导出到文件的图形编辑器, 是 SVG 解释器, SVG 查看器, SVG 创作工具, 以及 SVG 生成器.

2.5.1. 符合规范的 SVG 生成器

符合规范的 SVG 生成器是满足以下条件的 SVG 生成器:

强烈建议 SVG 生成器 默认使用 Unicode 字符编码, 并遵循 万维网字符模型的其他指南 [UNICODE] [charmod].

建议处理高精度数据的 SVG 生成器 遵循 生成高精度几何图形的说明一节中的指南.

2.5.2. 符合规范的 SVG 创作工具

如果一个创作工具, 如创作工具无障碍 指南 2.0中所定义, 是一个符合规范的 SVG 创作工具, 则它必须是符合规范的 SVG 生成器 并且还符合该文档中所有相关的 A 级要求 [atag20]. 鼓励满足 AA 级和 AAA 级要求, 但一致性并不要求满足这些要求.

2.5.3. 符合规范的 SVG 服务器

符合规范的 SVG 服务器必须满足符合规范的 SVG 生成器的所有要求. 此外, 使用 HTTP 或其他 使用互联网媒体类型的协议的符合规范的 SVG 服务器必须以媒体 类型 "image/svg+xml" 提供 SVG 独立文件.

此外, 如果 SVG 文件使用 gzip 或 deflate 压缩, 符合规范的 SVG 服务器必须根据 协议所支持的方式使用适当的标头指明这一点. 具体而言, 对于服务器 在传输前立即压缩的内容, 服务器必须根据情况使用 "Transfer-Encoding: gzip" 或 "Transfer-Encoding: deflate" 标头. 对于以压缩格式存储在服务器上的内容 (例如文件扩展名为 .svgz), 服务器必须根据情况使用 "Content-Encoding: gzip" 或 "Content-Encoding: deflate" 标头.

在 HTTP 中, 对存储的内容 ("实体") 进行压缩不同于对 消息正文进行自动压缩, 如 HTTP/1.1 TE/ 传输编码 中所定义 ([rfc2616], 第 14.39 和 14.41 节). 如果配置不当, 且 HTTP 标头中指定的压缩方式与实际使用的值不匹配, 则 SVG 用户代理必须将 文档视为处于错误状态.

配置服务器同时处理 SVG 和 SVGZ 文件 意味着它必须能够为两种文件分配相同的媒体类型, 但使用不同的压缩标头. 一些常用服务器无法轻松或高效地支持此配置, 因为压缩行为是根据媒体类型配置的.

对于大多数现代 Web 服务器, 上传未压缩的 SVG 文件而不是 SVGZ 文件通常更容易. 然后, 由服务器压缩文件以进行传输, 并为未来的请求缓存它, 使用与 HTML 等其他基于文本的文件格式相同的服务器指令. 这还允许服务器使用更新的压缩方法, 前提是请求文件的用户代理支持这些方法.

或者, 如果先将预压缩的 SVGZ 文件重命名为使用 .svg.gz 复合文件扩展名, Web 服务器可能能够正确处理这些文件. 服务器仍需要配置为支持静态 gzip 压缩文件.

2.5.4. 符合规范的 SVG 解释器

SVG 解释器是一种能够解析和 处理 SVG 文档片段的程序. SVG 解释器的示例包括 服务器端转码工具或优化器 (例如将 SVG 内容转换为修改后的 SVG 内容的工具) 或分析工具 (例如 从 SVG 内容中提取文本内容的 工具, 或有效性检查器). 将 SVG 转码为另一种图形 表示形式的转码器, 例如 SVG 到栅格转码器, 属于 查看器, 因而查看器一致性标准也适用.

符合规范的 SVG 解释器必须能够解析和处理 XML 1.0 [xml] 和 XML 中的命名空间 [xml-names] 中定义的所有 XML 构造.

符合规范的 SVG 解释器必须以正确遵循内容 DOM 结构 (元素, 属性, 文本内容, 注释等) 的方式解析任何 符合规范的 XML 兼容 SVG 标记片段 . 不要求解释器正确解释所有 功能的语义.

如果 SVG 解释器支持非 XML 语法 (例如 HTML), 则它必须正确解析该语法中的任何符合规范的 SVG 标记片段 .

如果 SVG 解释器由于处理 SVG 内容而运行脚本或获取外部资源文件, 则必须遵循 SVG 子资源文档的处理模式 和链接章节中针对用户代理描述的限制.

2.5.5. 符合规范的 SVG 查看器

行动: 查看性能类别 要求, 并决定是删除这些要点还是将其移入一般要求. (heycam)
规定 CTM 的计算 应使用双精度. (stakagi)
决议: 从 SVG 2 中删除性能类别 要求. ( ConformingHighQualitySVGViewers )
目的: 调节技术制图和 地图用例中的数值精度与用户代理性能之间的权衡.
负责人: heycam, stakagi

SVG 查看器是一种能够解析和处理 SVG 文档片段并将文档内容 渲染到某种图形输出介质 (例如显示器, 打印机或雕刻机) 上的程序. 因此, SVG 查看器也是SVG 解释器 (因为它能够解析和处理 SVG 文档片段), 但还有正确渲染这一额外要求.

符合规范的 SVG 查看器 必须是符合规范的 SVG 解释器, 并且 必须能够至少在本章定义的一种 处理模式下支持渲染输出:

符合规范的 SVG 查看器必须满足本规范中 针对用户代理指出的所有规范性要求, 对其处理模式所支持的所有功能均是如此.

适用于所有符合规范的 SVG 查看器的特定标准:

支持包含交互的处理模式的符合规范的 SVG 查看器 必须支持以下附加功能:

支持包含脚本执行的处理模式的符合规范的 SVG 查看器 必须支持以下附加 功能:

如果用户代理包含 HTML 或 XHTML 查看 功能, 或者可以将 CSS 样式特性应用于 XML 文档, 那么符合规范的 SVG 查看器必须在 可以使用栅格图像外部资源的任何位置支持 MIME 类型为 "image/svg+xml" 的 资源, 例如 HTML 或 XHTML ‘img’ 元素以及可以引用栅格图像资源的 CSS 特性 (例如 ‘background-image’).

2.5.5.1. 打印实现说明

对于同时支持显示 设备上的缩放和打印的用户代理, 建议默认 打印选项生成反映 显示设备当前 SVG 文档 片段当前视图的打印输出 (假定没有媒体特定的样式), 同时 考虑用户执行的任何缩放和平移, 当前动画状态以及由 DOM 和脚本引起的任何文档更改.

因此, 如果用户在显示设备上放大到地图的特定区域 , 然后请求打印副本, 打印副本应显示与显示 设备上出现的相同地图视图. 如果用户暂停动画并打印, 打印副本应显示与显示设备上当前 暂停画面相同的图形. 如果脚本添加或 删除了文档中的元素, 则打印副本应 反映与 显示器上相同的更改.

当 SVG 文档在仅支持静态内容的设备 (例如不支持 SVG 动画和 脚本功能的打印机) 上渲染时, 用户代理应忽略文档中的任何 动画和脚本元素, 并根据本 规范中的规则渲染其余图形元素.

2.5.6. 符合规范的高质量 SVG 查看器

要使符合规范的 SVG 查看器被视为 符合规范的高质量 SVG 查看器, 它必须 支持以下附加功能:

支持包含脚本执行, 声明式动画或交互的处理模式的符合规范的高质量 SVG 查看器 必须支持以下附加功能:

支持包含交互的处理模式 的符合规范的高质量 SVG 查看器必须支持以下附加 功能:


第 3 章: 渲染模型

SVG 2 渲染模型将遵循合成与混合规范定义的规则.

决议: Seattle/Paris 2012 F2F 第 3 天.

负责人: Nikos (行动 3332).

状态: 已完成.

3.1. 简介

SVG 实现必须按照本 章所述实现渲染模型, 并根据一致性 要求附录中的修改执行, 该附录描述了 实现可以偏离的情况. 实际上, 由于输出设备的限制 (例如可能只支持有限的颜色范围) 以及实现精确数学模型的实际 限制 (例如为了实现合理的 性能, 曲线会用直线近似, 该近似只需 足够精确以满足一致性要求), 允许存在差异.

一致性 要求附录描述了实际 实现可以偏离此描述的程度. 实际上, 实际实现可以 因 输出设备的限制 (例如可能只支持有限范围的 颜色) 以及实现精确数学模型的实际限制 (例如为了实现 合理性能, 曲线会用直线 近似, 该近似只需足够精确以 满足一致性要求) 而略有偏离.

3.2. 渲染树

SVG 文档最终渲染表示的组成部分 与底层 文档模型中的元素并非一一对应. 相反, 图形的外观反映了一个并行结构, 即渲染树, 其中某些元素被排除, 而另一些元素则被重复.

SVG 命名空间中的许多元素并不直接表示 图形文档的组成部分. 相反, 它们定义图形效果, 元数据, 用于表示其他元素的内容, 或在特定条件下显示的替代内容. 在动态文档中, 图形的某些组成部分 是否渲染可能取决于交互或动画. 这些未渲染元素不会直接包含 在渲染树中.

由于 SVG 支持重用图形子组件, 某些元素会被多次渲染. 各个渲染结果可能具有取决于上下文的样式, 并且可能以不同的缩放比例或变换进行栅格化.

3.2.1. 定义

渲染树

渲染树是 SVG 文档片段中正在渲染的元素集合. 它由文档树生成, 方法是排除未渲染元素 并为重用的 图形插入额外片段. 图形按照渲染树顺序进行绘制和合成, 但会根据 paint-order 特性进行重新排序. 请注意, 没有任何可见绘制的元素仍可能位于渲染树中.

已渲染元素

在当前文档的 渲染树中具有直接表示的元素. 包括 use 元素影子树中某个元素的已渲染实例. 不包括作为重用图形源定义而影响渲染 但本身不被直接渲染的元素 . 请参阅已渲染与未渲染元素

未渲染 元素

在当前文档的 渲染树中没有直接表示的元素. 尽管如此, 它仍可能作为重用图形 或图形效果影响渲染树. 请参阅已渲染与未渲染元素.

重用的图形

包含在渲染树中 但在文档模型中没有单个直接对应元素的 图形组件. 它们可以通过影子 DOM 元素表示 (例如使用 ‘use’ 元素重用的图形), 或作为图形效果的一部分生成的图像片段 (例如图案或遮罩).

从不渲染的 元素

无论上下文或 display 样式 值如何, 都从不直接渲染的任何元素类型. 它包括以下元素: ‘clipPath’, ‘defs’, ‘desc’, ‘linearGradient’, ‘marker’, ‘mask’, ‘metadata’, ‘pattern’, ‘radialGradient’, ‘script’, ‘style’ 和 ‘title’; 它还包括一个不是 use 元素影子树的实例根的 ‘symbol’ 元素.

可渲染元素

可以作为图形, 容器, 文本, 音频或动画, 在渲染树中具有直接表示的 任何元素类型. 它包括以下元素: ‘a’, ‘circle’, ‘ellipse’, ‘foreignObject’, ‘g’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘svg’, ‘switch’, ‘text’, ‘textPath’, ‘tspan’ 和 ‘use’; 它还包括一个是 use 元素影子树的实例根的 ‘symbol’ 元素.

可渲染元素在给定文档或时间点 可能被渲染, 也可能不被渲染.

3.2.2. 已渲染与未渲染元素

在任何给定时间, 每个 SVG 元素 (或 use 元素影子树中的元素实例) 要么已渲染, 要么未渲染. 元素当前是否被渲染不仅影响 其视觉显示, 还影响交互性 和几何计算.

元素在以下五种情况中的任何一种下都不会渲染:

未渲染元素:

未渲染元素不会在文档无障碍树中表示. 尽管如此, 它们仍然是文档模型的一部分, 并 参与样式继承和层叠.

3.2.3. 控制可见性: ‘display’ 和 ‘visibility’ 特性的作用

SVG 使用两个特性来切换通常会渲染的 元素的可见显示: display 和 visibility. 尽管它们在静态文档中具有类似的视觉效果, 但在概念上二者不同.

有关 display 和 visibility 的定义, 请参阅 CSS 2.1 规范. [CSS2]

将 display 设置为 none 会导致元素不被渲染. 当应用于 通常会渲染的图形元素, 文本内容元素 和容器元素时, 将 display 设置为 none 会导致该元素 (及其所有后代) 不会成为渲染树的一部分. 请注意, display 不是继承特性.

display 值不是 none 的元素会正常渲染.

display 特性仅适用于可渲染元素. 对 从不直接渲染 或根据条件处理未渲染的元素 设置 display: none 不会产生影响.

display 特性会影响给定元素的直接 处理, 但不会阻止它被 其他元素引用. 例如, 在 ‘path’ 元素上设置 display: none 会阻止该元素直接渲染到 画布上, 但该 ‘path’ 元素仍可由 ‘textPath’ 元素引用, 并且其几何形状会用于 路径文本处理.

当应用于图形元素或 ‘use’ 元素时, 将 visibility 设置为 hidden 或 collapse 会导致元素不被绘制. 但是, 它仍然是渲染树的一部分. 它可能会响应指针事件 (取决于 pointer-events 的值), 可能接收焦点 (取决于 ‘tabindex’ 的值), 会参与边界框计算和裁剪路径, 并且确实会影响文本布局.

visibility 特性仅直接影响 图形元素, 文本 内容元素以及 当 ‘a’ 元素是 文本内容元素的子元素时的渲染. 但是, 由于 visibility 是继承特性, 尽管它不会影响 ‘use’ 元素或容器元素本身, 其继承值可以影响后代元素.

3.2.4. 重用的图形

在文档某一部分 (或另一文档中) 定义的图形内容 可以用于渲染其他元素. 从渲染角度看, 有两类重用图形:

影子 DOM 元素与普通元素以相同方式渲染, 就好像宿主元素 (例如 ‘use’ 元素) 是一个容器, 而影子内容是其后代. 影子 DOM 元素上的样式和几何特性 独立于其 被引用文档子树中的源元素进行解析. display 特性对 影子元素具有正常作用, 但适用于 ‘symbol’ 元素的特殊规则除外.

为了混合, ‘use’ 元素形成一个非隔离组.

相比之下, 图形效果元素会生成一个自包含的 SVG 片段, 该片段会作为堆叠上下文 和一个隔离 组独立渲染. 此片段的画布会被缩放 图形效果元素的子内容 会渲染并合成到此画布中. 扁平化后的画布整体会被视为矢量图像, 用于与其他绘制层进行合成和混合

图形效果元素的任何子内容上的 display 特性 在设置为 none 时具有正常作用, 会将该子树排除在渲染使用之外. 但是, 图形效果不会因 图形效果元素或其祖先上的 display: none 值而改变.

3.3. 画家模型

SVG 使用渲染的“画家模型”. 绘制 通过连续操作应用于输出设备, 使得每次操作都会绘制输出设备的某个区域, 并可能遮盖此前已绘制的内容. 每个对象或组绘制后, 它就成为 下一次绘制操作背景的一部分. SVG 2 支持高级混合模式和合成操作, 用于控制每次绘制操作如何与背景交互. 管理这些绘制操作的规则概述于 合成与混合规范.

3.4. 渲染顺序

SVG 中的元素位于 SVG 视口的 x 轴和 y 轴上. 当元素重叠时, 它们的 绘制顺序决定哪个元素显示在前面. 这种从前到后 的顺序称为 z 轴.

默认情况下, 元素按文档顺序绘制: 标记中 较晚出现的元素会绘制在较早出现的元素 之上. 元素被分组为 堆叠上下文, 它们收集一组元素并将其作为一个整体进行绘制.

堆叠上下文决定元素彼此叠加的绘制 顺序, 以及确定指针事件 目标时哪个元素位于最上层. 它们不会影响元素在 DOM 树中的位置, 也不会影响其大小或方向 — 只影响它们 的绘制顺序.

每个元素都属于一个堆叠上下文. 给定堆叠 上下文中的元素必须根据文档顺序进行堆叠.

堆叠上下文可以包含更多堆叠上下文. 从其父堆叠上下文的 角度来看, 一个堆叠上下文是原子的: 当父级 确定绘制顺序时, 子堆叠上下文被视为单个 不可分割的项. 外部元素不能绘制在 其内部元素之间.

除 ‘foreignObject’ 元素外, SVG 元素创建的堆叠上下文从后到 前 的堆叠顺序为:

  1. 形成堆叠 上下文的元素的背景和边框 (如果有)
  2. 按树顺序排列的后代

由于 ‘foreignObject’ 元素在 CSS 术语中创建一个“固定定位包含块”, 因此 由 ‘foreignObject’ 元素创建的堆叠上下文的 规范性堆叠顺序规则是 CSS 2.1 附录 E 中的规则.

3.4.1. 在 SVG 中建立堆叠上下文

如果满足以下任何条件, 则必须在 SVG 元素处为其后代建立新的堆叠上下文. 对于基于特性的条件, 该特性必须适用于元素并具有给定的计算值.

条件 值条件 说明
文档元素 始终 仅当它是 ‘svg’ 元素时, 如在独立 SVG 文档中
一个最外层 svg 元素 始终 启动 SVG 文档片段的 ‘svg’ 元素, 即 父元素不在 SVG 命名空间中的元素
‘foreignObject’ 始终
‘image’ 始终
‘marker’ 始终
‘mask’ 始终 mask 元素, 而不是 mask 特性
‘pattern’ 始终
‘symbol’ 始终
‘use’ 始终
具有 overflow 的内部 ‘svg’ 计算值不是 visible 仅适用于嵌套的 ‘svg’ 元素, 不适用于最外层 svg 元素. 请注意, 用户代理样式表会在嵌套的 ‘svg’ 元素上设置 overflow: hidden.
clip 特性 计算值不是 auto 元素受到显式裁剪. 在 SVG 中, clip 仅适用于 建立新 视口的元素, ‘pattern’ 元素和 ‘mask’ 元素.
clip-path 特性 计算值不是 none 元素受到显式裁剪
opacity 特性 计算值不是 1
mask 特性 计算值不是 none mask 特性, 而不是 mask 元素
filter 特性 计算值不是 none
在另一规范中定义的特性 按照该规范的定义 当该特性被定义为在 SVG 中建立堆叠上下文时

3.5. 元素如何渲染

单个图形元素被视为一个非隔离组, 构成图形元素的各组成部分 (填充, 描边等) (请参阅绘制形状和文本) 为 该组的成员. 请参阅组如何渲染.

3.6. 组如何渲染

分组元素, 例如 ‘g’ 元素 (请参阅容器元素 ) 会创建一个合成组. 类似地, ‘use’ 元素会为其影子内容创建一个合成组. 合成与混合 规范以规范性方式描述如何渲染合成组. 在 SVG 中, 可以对组应用效果. 例如, 不透明度, 滤镜 或遮罩. 这些效果会应用于组的渲染结果, 紧接在对组应用任何变换之前, 而变换则 紧接在组与 组背景混合并合成之前应用. 对组应用任何此类效果都会使该 组成为隔离组.

因此, 渲染合成 组遵循以下步骤:
如果组是隔离的:

  1. 初始 背景被设置为使用 rgba(0,0,0,0) 初始化的新缓冲区
  2. 组中属于图形元素或 ‘g’ 元素的内容 会 按顺序渲染到 初始背景上
  3. 应用修改组画布的滤镜和其他效果

    为了提供高质量渲染, 滤镜 图元和其他位图效果必须在 操作 坐标空间中应用.

  4. 应用组变换
  5. 组画布与组背景进行混合和合成
否则 (组不是隔离的):
  1. 初始 背景被设置为组背景
  2. 组中属于图形元素或 ‘g’ 元素的内容 会 按顺序渲染到 初始 背景上. 组变换会在每个元素 渲染时应用于该元素.

3.6.1. 对象和组的不透明度: ‘opacity’ 特性的作用

有关 opacity 的定义, 请参阅 CSS Color Module Level 3. [css-color-3]

opacity 特性指定给定 图形元素或容器元素在 绘制到画布上时的不透明程度. 当应用于容器元素时, 这称为组不透明度, 而当应用于 单个渲染元素时, 则称为对象 不透明度. 不过这两个操作的原理 是相同的.

SVG 中还有几个与不透明度相关的特性:

这四个不透明度特性参与中间渲染操作. 不过, 对象和组不透明度可以被视为后处理操作. 从概念上说, 应用 opacity 的对象或组 会渲染到 RGBA 屏幕外图像中. 然后, 屏幕外图像整体会使用指定的 opacity 值均匀地 混合到画布中. 因此, opacity 的存在 会使组 隔离.

opacity 特性适用于以下 SVG 元素: ‘svg’, ‘g’, ‘symbol’, ‘marker’, ‘a’, ‘switch’, ‘use’ 以及图形元素.

以下示例说明 opacity 特性在对象和组上的各种用法.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- 背景蓝色矩形 -->
  <rect x="100" y="100" width="1000" height="150" fill="blue"/>

  <!-- 从不透明到接近透明的红色圆 -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>

  <!-- 不透明组, 不透明圆 -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- 组不透明度: .5, 不透明圆 -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- 不透明组, 半透明绿色覆盖红色 -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
  <!-- 不透明组, 半透明红色覆盖绿色 -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
  </g>
  <!-- 组不透明度 .5, 半透明绿色覆盖红色 -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
</svg>
显示不同圆组与背景混合的图像.

每组红色和绿色圆都会先渲染 到屏幕外图像, 然后再使用给定的 opacity 值, 作为整体与背景 蓝色矩形混合.

在示例中, 顶行圆具有不同的不透明度, 范围从 1.0 到 0.2. 底行展示五个 ‘g’ 元素, 每个元素都包含重叠的红色和绿色圆, 如下所示:

3.7. 图形元素的类型

SVG 支持三种可以渲染到画布上的基本图形元素 类型:

3.7.1. 绘制形状和文本

形状和文本可以被填充 (即, 将绘制应用于 形状内部) 和描边 (即, 沿形状轮廓 应用绘制).

对于某些类型的形状, 可以在 形状边界沿线的位置绘制标记 符号 (其本身可以由形状, 文本和图像的任意组合构成). 每个标记符号 都会像其图形内容在 使用给定标记符号的形状对象之后展开到 SVG 文档树中一样进行绘制. 标记 符号的图形内容使用与图形 元素相同的方法渲染. 标记符号不适用于文本.

填充, 描边和标记的绘制顺序由 paint-order 特性决定. 默认情况下, 先绘制填充, 然后绘制描边, 最后绘制 标记符号. 标记符号沿 形状轮廓按顺序渲染, 从形状起点到 形状终点.

填充和描边操作彼此完全独立; 例如, 每个填充或描边操作都有自己的不透明度设置.

SVG 支持多种可用于 填充和描边操作的内置绘制类型. 这些内容在 绘制服务器中描述.

3.7.2. 绘制栅格图像

渲染栅格图像时, 原始样本会 使用标准算法“重采样”, 以在 输出设备所需的位置生成样本. 重采样 要求在 一致性要求中讨论.

与 HTML [HTML, 10.4.2] 中一样, 具有相同绝对 URL 和相同图像 数据的所有动画图像都应作为一个组同步到同一时间线进行渲染, 时间线从最近最早加入该 组的时间开始.

当用户代理要重新启动显示 动画图像的 img 元素的动画时, 该 img 元素的节点文档中具有相同绝对 URL 和相同 图像数据的所有动画图像都应从头重新启动其 动画.

3.8. 过滤已绘制区域

SVG 允许过滤任何绘制操作. (请参阅 滤镜效果.)

在这种情况下, 结果必须如同绘制 操作已应用于一个 初始化为透明黑色的中间画布, 其大小由 滤镜效果中给出的规则决定, 然后 再由 滤镜效果中定义的过程进行过滤.

3.9. 裁剪和遮罩

SVG 支持以下裁剪/遮罩功能:

裁剪和遮罩都在 CSS Masking 模块 [css-masking-1] 中规定.

3.10. 父级合成

SVG 文档片段可以是半不透明的.

根据合成与 混合规范, ‘svg’ 元素始终 创建一个隔离 组. 当 SVG 文档是顶级文档时, 即它没有嵌入另一个文档中, 根 ‘svg’ 元素 被视为页面 组, 并与 100% 不透明的白色背景进行合成. 在所有其他情况下, SVG 文档或文档片段都会在保留不透明度的情况下 合成到父文档中.

3.11. ‘overflow’ 特性的作用

有关 overflow 的定义, 请参阅层叠样式表第 2 级修订版 1 (CSS 2.1) 规范 [CSS2].

overflow 特性在 SVG 中行为的摘要.
元素 初始值 用户代理样式表 auto visible hidden scroll
文档根 svg visible 不适用 visible | scroll visible hidden scroll
其他 svg visible hidden visible | scroll visible hidden scroll
text visible hidden visible visible hidden hidden
pattern visible hidden visible visible hidden hidden
marker visible hidden visible visible hidden hidden
symbol visible hidden visible visible hidden hidden
image visible hidden visible visible hidden hidden
foreignObject visible hidden visible | scroll visible hidden scroll

overflow 特性具有与 CSS 2.1 中 定义的相同参数值和 相同含义 ([CSS2], 第 11.1.1 节); 但是, 还适用以下附加要点:

尽管 overflow 的初始值 是 auto. 在用户代理样式表中, 当 ‘svg’ 元素不是独立文档的根 元素时, 以及对于 ‘pattern’ 元素和 ‘marker’ 元素, overflow 会被覆盖为默认 hidden.

第 4 章: 基本数据类型和接口

4.1. 定义

初始值

属性或特性的初始值是在 未指定该属性或特性,或者其具有 无效值时使用的值。 此值用于渲染、计算 动画值, 以及通过 DOM 接口访问属性或特性时。

无效值
为特性指定的无效值,无论是在样式表 还是呈现属性中,是指根据 定义该特性值的语法不允许的值,或语法允许但 随后在文字说明中被禁止的值。具有无效值的 CSS 声明会被 忽略。

4.2. 属性语法

在本规范中,属性使用属性定义 表进行定义,其形式如下:

名称 值 初始值 可动画
exampleattr <length> | none none 是

“值”列描述属性的语法。描述属性语法有 六种方法:

  1. 使用 CSS 值 定义语法 [css-values]。 这是本 规范中用于定义大多数属性语法的表示法,也是默认方式。
  2. 通过引用本规范或其他规范中定义的 EBNF 符号 [xml]。 对于外部定义,会通过“值”列中出现的 [EBNF] 来表示。
  3. 通过引用其他规范中定义的 ABNF 符号 [rfc5234]。这通过“值” 列中出现的 [ABNF] 表示。
  4. 作为 URL 标准 [URL] 定义的 URL。这通过 “值”列中出现的 [URL] 表示。
  5. 作为 HTML 标准 [HTML] 定义的类型。这通过 “值”列中出现的 [HTML] 表示。
  6. 使用属性定义表下方的文字说明。这通过“值”列中出现的 文本“(见下文)”表示。
SVG 2 要求: 考虑放宽呈现属性值的大小写敏感性。
决议: 我们将使特性值不区分 大小写。
目的: 使呈现属性语法解析与相应 CSS 特性的解析保持一致。
负责人: Cameron (ACTION-3276)
状态: 已完成

当解析使用 CSS 值定义语法定义的呈现属性 时,按如下方式进行:

  1. 令 value 为该属性的值。
  2. 令 grammar 为属性定义 表的“值”列中给出的语法。
  3. 将 grammar 中 <length> 的所有实例 替换为 [<length> | <number>]。
  4. 将 grammar 中 <length-percentage> 的所有实例 替换为 [<length-percentage> | <number>]。
  5. 将 grammar 中 <angle> 的所有实例 替换为 [<angle> | <number>]。
  6. 返回 使用 grammar 解析 value的结果。

插入 <number> 符号允许在呈现属性中使用 无单位的长度和角度,同时 不允许在相应特性值中使用它们。

请注意,所有呈现属性 都是 通过引用其对应的 CSS 特性定义的,因此使用 CSS 值定义语法来定义。

当解析任何其他使用 CSS 值 定义语法定义的属性时,通过 根据属性定义 表中给出的语法解析属性值来进行。

请注意,这允许在此类属性中使用 CSS 注释和转义。 例如,值 '10\px/**/' 在 ‘rect’ 元素的 ‘x’ 呈现属性中 会成功解析为 '10px'。

当解析定义为 URL 的属性时, 通过使用属性值作为 input,文档 URL 作为 base 调用 URL 解析器 [URL] 来进行。

“初始值”列给出属性的初始值。 当属性无法根据指定的 CSS 值定义语法、 ABNF 或 EBNF 语法进行解析,或者根据 URL 标准进行解析 或按描述如何解析该属性的文字说明进行解析时指示失败, 则假定该属性已被指定为给定的初始 值。

呈现属性的初始值是其 对应特性的初始值。由于在呈现属性中使用无效值 会被视为指定了 初始值,因此该值可能覆盖来自优先级较低 样式表规则的值,例如来自用户代理样式表的值。

例如,尽管用户代理样式表将 overflow 特性的值设置为 hidden 用于 ‘svg’ 元素, 指定无效的呈现属性,例如 overflow="invalid",将导致 一条把 overflow 设置为 visible 的规则, 从而覆盖用户代理样式表中的值。

“可动画”列指示是否可以使用 动画元素对属性进行动画, 如 SVG 动画模块中定义的那样。

4.2.1. 实数精度

除非另有说明,SVG 属性以及定义为对 SVG 元素产生作用的 特性中的数值必须 至少支持宿主 架构支持的所有有限单精度值。

建议在坐标系统变换等操作中执行更高精度的浮点 存储和计算,以提供尽可能高的 精度并防止舍入误差。

符合规范的 SVG 查看器 必须根据其 一致性类别执行数值计算,如一致性标准中所述。

4.2.2. 钳制限制在特定范围内的值

某些数值属性和特性值具有受限的范围。 其他值将受设备能力的限制。 如果未另行指定, 用户代理应尽可能推迟任何超出范围的错误检查, 直到渲染过程中的尽可能后期。 这对于设备限制尤其重要, 因为复合操作 可能产生超出范围的中间值,但 最终值却位于范围内。

4.3. SVG DOM 概述

支持脚本执行的符合规范的SVG 查看器或SVG 解释器 必须按照本规范各处的定义实现 SVG DOM 接口, 并满足本节列出的特定要求和依赖项。

SVG 2 要求: 改进 DOM。
决议: 我们将全面改进 SVG 2 的 SVG DOM 。
目的: 通过减少 Java 风格帮助作者使用 SVG DOM。
负责人: Cameron (ACTION-3273)
说明: 请参阅 SVG 2 DOM Wiki 页面。
SVG 2 要求: 改进 SVG 路径 DOM API。
决议: 我们将在 SVG 2 中改进 SVG 路径 DOM API 。
目的: 清理 SVGPathSegList 接口,并可能与 Canvas 共享 API。
负责人: Cameron(无行动项)

4.3.1. SVG DOM 支持的依赖项

SVG DOM 是依据 Web IDL 接口定义的。本规范中的所有 IDL 片段必须按照 Web IDL 规范中的描述, 解释为符合规范的 IDL 片段所要求的内容。[WebIDL]

SVG DOM 建立在多个 DOM 规范之上。具体而言:

4.3.2. 命名约定

SVG DOM 遵循与 HTML 和 DOM 标准类似的命名约定 ([HTML], [DOM])。

所有名称均由一个或多个英文单词 连接在一起组成单个字符串。特性或 方法名称以小写的首个关键词开头,并且 后续每个单词都以大写字母开头。例如, 返回文档元信息(例如 文件创建日期)的特性可能命名为 "fileDateCreated"。

本规范中定义的接口名称几乎都以 "SVG" 开头。 表示 SVG 命名空间元素的 DOM Element 对象的接口 遵循 SVGElementNameElement 格式,其中 ElementName 是首字母大写的元素标签名称。 因此 SVGRadialGradientElement 是 ‘radialGradient’ 元素的接口。

此大小写约定的一个例外是 SVGSVGElement, 其中整个标签名称都大写。

4.3.3. SVG DOM 中的元素

任何被要求支持 SVG DOM 的 SVG 软件 都必须按如下方式增强为 SVG 文档 片段创建的 DOM 元素:

在‘rect’ 元素中, 指定了 SVGRectElement 接口。 这意味着每个命名空间 URI 为 "http://www.w3.org/2000/svg" 且本地名称为 "rect" 的 Element 对象还必须实现 SVGRectElement。

4.3.4. 在 DOM 中反映内容属性

许多 SVG DOM 特性(IDL 属性) 反映对应元素上的内容属性或特性, , 这意味着内容属性和 IDL 属性表示相同的底层数据。 例如, SVGAnimatedLength ry 位于 SVGRectElement 中, 反映关联的 ry 呈现属性,该属性位于 ‘rect’ 元素上。

这种反映的方式取决于 IDL 属性的类型:

此关系是实时的,并且在属性或其反映特性中的任一方被修改时, 值必须同步 (遵循同步反映值中的规则)。

如果该属性未在文档标记中显式指定, 反映对象仍会在访问时 初始化为该属性的初始值。 如果属性的初始值为 (none), 则对象按 反映空初始值中的定义进行初始化。 此新构造的对象在 首次被修改之前不会在元素上生成属性。对相应 属性所做的修改会立即反映到对象中。

如果访问 lineElement.x1.baseVal (其中 lineElement 是 SVGLineElement 的实例) 且文档中未指定 ‘x1’ 属性,则返回的 SVGLength 对象将表示值 0 user units, 因为该属性的初始值为 0。

4.3.5. 同步反映值

每当反映的内容属性的基值发生变化时, 反映对象必须在值变化之后立即通过执行以下步骤 进行同步:

  1. 如果反映对象是列表接口对象, 则运行同步 列表接口对象的步骤。
  2. 否则,将对象的值更新为反映 内容属性的基值(如果该属性 不存在或无效,则使用属性的初始值)。

    例如,这会更新 value of an SVGLength 对象。

当一个反映的内容属性需要 重新序列化时,可选择使用 特定值,必须执行以下步骤:

  1. 令 value 为给定的特定值,或者 如果未提供特定值,则为内容属性的反映 IDL 属性的值。
  2. 根据 value 的类型:
    SVGAnimatedBoolean
    SVGAnimatedNumber
    SVGAnimatedLength
    SVGAnimatedAngle
    SVGAnimatedRect
    SVGAnimatedString
    SVGAnimatedNumberList
    SVGAnimatedLengthList
    SVGAnimatedTransformList
    使用 value 的 baseVal 成员 重新序列化内容属性。
    SVGAnimatedEnumeration
    1. 令 number 为 value 的 baseVal 成员的值。
    2. 令 keyword 为内容属性中与 number 对应的关键词 值;如果 number 为 0, 则为空字符串。

      这意味着如果枚举值 以某种方式被设置为“未知”值,内容属性将被 设置为空字符串。 但是,无法直接在 SVGAnimatedEnumeration 对象上设置此未知值; 它表示标记中设置的未知属性值。

    3. 将内容属性设置为 keyword。
    boolean
    如果 value 为 true,则将内容属性设置为 "true", 否则设置为 "false"。
    float
    double
    将内容属性设置为一个特定于实现的字符串, 该字符串如果使用 CSS 语法解析为 <number>, 则在给定实现所支持的实数精度的情况下, 会返回最接近 value 的数值。
    SVGLength
    将内容属性设置为获取 value 的 valueAsString 成员时将返回的值。
    SVGAngle
    将内容属性设置为获取 value 的 valueAsString 成员时将返回的值。
    SVGRect
    1. 令 components 为四个值的列表,分别是 value 的 x、 y、 width 和 height 成员的值。
    2. 令 serialized components 为四个字符串的列表, 其中每个都是特定于实现的字符串,如果 使用 CSS 语法将其解析为 <number>,则在 给定实现所支持的实数精度的情况下, 会返回最接近 components 中对应值的数值。
    3. 将内容属性设置为由 serialized components 中的字符串组成并使用单个 U+0020 SPACE 字符连接和分隔的字符串。
    DOMString
    将内容属性设置为 value。
    SVGNumberList
    SVGLengthList
    SVGPointList
    SVGTransformList
    SVGStringList
    1. 令 elements 为 value 中的值列表。

      根据 value 的类型, 这些值将是 SVGNumber、SVGLength、 SVGPoint 或 SVGTransform 对象,或 DOMString 值。

    2. 令 serialized elements 为字符串列表,其中每个 字符串根据 elements 中相应的值 及其类型构成:
      一个 SVGNumber 对象
      该字符串是一个特定于实现的字符串,如果使用 CSS 语法将其解析为 <number>,则在给定 实现所支持的实数 精度的情况下,会返回最接近 SVGNumber 对象的 value 成员的数值。
      一个 SVGLength 对象
      该字符串是获取该值的 valueAsString 成员时将返回的值。
      一个 SVGPoint 对象
      字符串值按如下方式计算:
      1. 令 string 为空字符串。
      2. 令 x 和 y 分别为 SVGPoint 对象的 x 和 y 坐标值。
      3. 向 string 追加一个特定于实现的字符串, 如果使用 CSS 语法将其解析为 <number>, 则在给定实现所支持的实数 精度的情况下,会返回最接近 x 的数值。
      4. 向 string 追加一个 U+002C COMMA 字符。
      5. 向 string 追加一个特定于实现的字符串, 如果使用 CSS 语法将其解析为 <number>, 则在给定实现所支持的实数 精度的情况下,会返回最接近 y 的数值。
      6. 该字符串为 string。
      一个 SVGTransform 对象
      该字符串是 matrix 对象的序列化。
      一个 DOMString
      该字符串就是 DOMString 本身的值。
    3. 将内容属性设置为由 serialized elements 中的字符串组成并使用单个 U+0020 SPACE 字符连接和分隔的字符串。

4.3.6. 反映空初始值

当初始化一个反映 null 或空 初始值的 SVG DOM 属性时, 必须根据其数据类型初始化该特性, 如本节中所定义。 仅当反映的内容属性没有显式值, 并且属性定义表中的初始值为 (none) 时才会发生这种情况。

如果下面未列出某个接口,则意味着 对象初始化应使用该接口所包含对象的值进行,例如, SVGAnimatedString 由两个 DOMString 成员组成, 而 SVGRect 由多个 double 组成。

DOMString
初始化为空字符串("")。
float
long
short
WebIDL 中定义的任何其他数值类型
初始化为 0。
boolean
初始化为 false。
SVGLength
初始化为 0 user units (SVG_LENGTHTYPE_NUMBER)。
SVGLengthList
SVGNumberList
SVGPointList
SVGStringList
SVGTransformList
初始化为空列表。
SVGAngle
初始化为 0 in unspecified units (SVG_ANGLETYPE_UNSPECIFIED)。
SVGPreserveAspectRatio
初始化为 'xMidYMid meet'。

如果访问 textElement.dx.baseVal (其中 textElement 是 SVGTextElement 的实例) 且文档中未指定 ‘dx’ 属性,则返回的 SVGLengthList 对象将为空。

4.3.7. 无效值

如果脚本将一个反映的 DOM 属性 设置为内容属性的无效值(例如, 对要求非负数的属性设置负数),除非 本规范另有说明,否则设置时不会 抛出异常,但给定的文档片段将在技术上成为 处于错误状态,如 错误处理中所述。

使用整数常量反映枚举值的 DOM 属性是一个例外: 当设置为超出范围的整数 或表示未知属性值的常量 (0) 时,它们会抛出 TypeError。 这与 WebIDL 枚举类型的行为 [WebIDL] 一致。

4.4. SVG 元素的 DOM 接口

4.4.1. 接口 SVGElement

所有直接对应于 SVG 语言中元素的 SVG DOM 接口(例如 ‘path’ 元素的 SVGPathElement 接口)都派生自 SVGElement 接口。

CSSOM 规范 为 SVGElement 增补了 style IDL 属性,从而可以像在 HTML 元素上一样访问 ‘style’ 属性。

[Exposed=Window]
interface SVGElement : Element {

  [SameObject] readonly attribute SVGAnimatedString className;

  readonly attribute SVGSVGElement? ownerSVGElement;
  readonly attribute SVGElement? viewportElement;
};

SVGElement includes GlobalEventHandlers;
SVGElement includes HTMLOrSVGOrMathMLElement;

className IDL 属性 反映 ‘class’ 属性。

此属性已弃用,并且可能在本规范的 未来版本中删除。建议作者改用 Element.classList。

className 属性在 SVGElement 上会覆盖 Element 上对应的属性, 遵循 WebIDL 的 继承规则。

ownerSVGElement IDL 属性 表示最近的祖先 ‘svg’ 元素。获取 ownerSVGElement 时, 返回最近的祖先 ‘svg’ 元素;如果当前 元素是最外层 svg 元素,则返回 null。

viewportElement IDL 属性 表示为当前元素提供 SVG 视口的元素。获取 viewport 时, 返回建立 SVG 视口的最近祖先元素;如果当前 元素是最外层 svg 元素,则返回 null。

4.4.2. 接口 SVGGraphicsElement

SVG 2 要求: 检测鼠标事件是否位于形状的填充或描边上。
决议: SVG 2 将使检测鼠标事件是否位于 元素的描边或填充上变得更容易。
目的: 允许作者区分元素填充和描边上的指针事件, 而无需复制元素
负责人: Cameron (ACTION-3279)
状态: 已完成。

SVGGraphicsElement 接口 表示主要用途是 将图形直接渲染到组中的 SVG 元素。

dictionary SVGBoundingBoxOptions {
  boolean fill = true;
  boolean stroke = false;
  boolean markers = false;
  boolean clipped = false;
};

[Exposed=Window]
interface SVGGraphicsElement : SVGElement {
  [SameObject] readonly attribute SVGAnimatedTransformList transform;

  SVGRect getBBox(optional SVGBoundingBoxOptions options = {});
  SVGMatrix? getCTM();
  SVGMatrix? getScreenCTM();
};

SVGGraphicsElement includes SVGTests;

transform IDL 属性 反映 transform 特性的计算值及其 对应的 ‘transform’ 呈现属性。

getBBox 方法用于 计算当前元素的边界框。当调用 getBBox(options) 方法时,会对当前元素调用边界框算法, 并使用 options 字典参数的 fill、stroke、markers 和 clipped 成员来控制边界框中包含元素的哪些部分, 使用元素的用户坐标系统作为返回 边界框所采用的坐标系统。返回一个新创建的 SVGRect 对象,用于定义 计算出的边界框。如果元素的几何属性 缺失或具有无效值(例如负的 width 或 height), 使得该元素不被渲染,则返回一个 x、y、 width 和 height 均设置为 0 的 SVGRect。

getCTM 方法用于 获取将当前元素的坐标系统变换到 其 SVG 视口坐标系统的矩阵。调用 getCTM() 时,执行以下 步骤:

  1. 如果当前元素不在文档中,则返回 null。
  2. 如果当前元素是未渲染元素,并且 UA 无法解析该元素的样式,则返回 null。
  3. 令 ctm 为根据 当前元素是什么而确定的矩阵:
    当前元素是最外层 svg 元素
    ctm 是将 ‘svg’ 的坐标 空间(包括其 transform 特性) 变换到文档视口坐标空间的矩阵。该矩阵包括 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性产生的变换、transform 特性产生的变换, 以及 SVGSVGElement 上的 currentScale 和 currentTranslate 特性产生的任何变换。
    任何其他元素
    ctm 是将当前元素的坐标 空间(包括其 transform 特性)变换到其最近的建立视口的祖先 元素的坐标空间(也包括其 transform 特性)的矩阵。
  4. 返回一个新创建的、分离的 SVGMatrix 对象, 它表示与 ctm 相同的矩阵。

getScreenCTM 方法 用于获取将当前元素的坐标 系统变换到 SVG 文档片段的 SVG 视口坐标系统的矩阵。 调用 getScreenCTM() 时,执行以下步骤:

  1. 如果当前元素不在文档中,则返回 null。
  2. 如果当前元素是未渲染元素,并且 UA 无法解析该元素的样式,则返回 null。
  3. 令 ctm 为将当前元素的坐标 空间(包括其 transform 特性) 变换到文档视口坐标空间的矩阵。

    这将包括:

  4. 返回一个新创建的、分离的 SVGMatrix 对象, 它表示与 ctm 相同的矩阵。

此方法更适合命名为 getClientCTM, 但出于历史原因保留名称 getScreenCTM。

4.4.3. 接口 SVGGeometryElement

接口 SVGGeometryElement 表示其渲染由具有等效路径的几何形状定义, 且可以进行填充和描边的 SVG 元素。 这包括路径和基本形状。

[Exposed=Window]
interface SVGGeometryElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedNumber pathLength;

  boolean isPointInFill(optional DOMPointInit point = {});
  boolean isPointInStroke(optional DOMPointInit point = {});
  float getTotalLength();
  SVGPoint getPointAtLength(float distance);
};

isPointInFill 方法 被调用时,如果传递给该方法的 point 给定的点 在元素的坐标空间中,按照元素的 fill-rule 特性指示的环绕 规则确定,位于预期路径内部,则必须返回 true;否则必须返回 false。 计算路径内部区域时,开放子路径必须隐式闭合,但不能影响 实际子路径。路径本身上的点必须视为位于路径内部。 返回值不依赖任何视觉 CSS 特性,但 fill-rule 除外。 如果 point 上的 x 或 y 特性中的任一个为无限值或 NaN, 则该方法必须返回 false。如果当前元素是未渲染元素,且 UA 无法计算 元素的几何形状,则 抛出 InvalidStateError。

isPointInFill 使用 元素的 fill-rule 特性指示的环绕 规则,即使该元素是 ‘clipPath’ 元素的子元素也是如此。

isPointInFill 尽可能 与 CanvasDrawPath 混入上的 isPointInPath 方法保持一致,只要 SVG 上下文 允许这样做。

isPointInStroke 方法 被调用时,如果传递给该方法的 point 给定的点 在元素的坐标空间中,位于应用于 元素的描边轮廓路径内或其上,则必须返回 true;否则必须返回 false。 该轮廓路径必须考虑元素的描边特性 stroke-width、 stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-dasharray、 stroke-dashoffset 和 vector-effect。 有关详细信息,请参阅 计算 描边形状和 矢量效果 章节。 返回值不依赖任何视觉 CSS 特性,但上述描边特性除外。 如果 point 上的 x 或 y 特性中的任一个为无限值或 NaN, 则该方法必须返回 false。如果当前元素是未渲染元素,且 UA 无法计算 元素的几何形状,则 抛出 InvalidStateError。

isPointInStroke 尽可能 与 CanvasDrawPath 混入上的 isPointInStroke 方法保持一致,只要 SVG 上下文 允许这样做。

pathLength IDL 属性 反映 ‘pathLength’ 内容属性。

getTotalLength 方法 用于计算路径长度。调用 getTotalLength() 时,返回用户代理计算的路径总长度值, 以用户单位表示。如果当前元素是未渲染元素,且 UA 无法计算 路径总长度,则 抛出 InvalidStateError。

用户代理计算的路径长度不考虑 ‘pathLength’ 属性。

getPointAtLength 方法 用于返回沿路径给定距离处的点。当 调用 getPointAtLength(distance) 时,执行以下步骤:

  1. 如果当前元素是未渲染元素,且 UA 无法 计算路径总长度,则抛出 InvalidStateError。
  2. 令 length 为用户代理计算的路径总 长度值,以用户单位表示。

    与 getTotalLength 一样, 这里不考虑 ‘pathLength’ 属性。

  3. 将 distance 钳制到 [0, length]。
  4. 令 (x, y) 为路径上距离 distance 处的点。
  5. 返回一个新创建的、分离的 SVGPoint 对象, 表示点 (x, y)。

4.5. 基本数据类型的 DOM 接口

4.5.1. 接口 SVGNumber

SVGNumber 接口主要用于 表示作为 SVGNumberList 一部分的 <number> 值。 单独的 SVGNumber 对象也可以由脚本创建。

SVGNumber 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。 通过 animVal IDL 属性反映的 SVGNumber 对象始终 只读。

SVGNumber 对象可以与特定元素关联。如果对象反映 属性,则关联元素用于 确定要更新哪个元素的内容属性。除非另有说明,SVGNumber 对象 不与任何元素关联。

每个 SVGNumber 对象 都以两种模式之一 运行。它可以:

  1. 反映一个反映的 可动画属性的基值中的一个元素 (通过 SVGAnimatedNumberList 的 baseVal 成员上的方法暴露),
  2. 被分离,例如使用 createSVGNumber 创建的 SVGNumber 对象。

SVGNumber 对象维护一个内部数值, 称为其值。

[Exposed=Window]
interface SVGNumber {
  attribute float value;
};

value IDL 属性 表示该数值。获取 value 时, 返回 SVGNumber 的 值。

设置 value 时,执行以下 步骤:

  1. 如果 SVGNumber 是只读的,则 抛出 NoModificationAllowedError。
  2. 将 SVGNumber 的值设置为 正在赋给 value 成员的值。
  3. 如果 SVGNumber 反映一个 基值元素,该基值属于一个反映的属性,则重新序列化 反映属性。

4.5.2. 接口 SVGLength

SVGLength 接口用于表示 可以是 <length>、<percentage> 或 <number> 的值。

SVGLength 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。 通过 animVal IDL 属性反映的 SVGLength 对象始终 只读。

SVGLength 对象可以与特定元素关联,同时还可以指定方向性: 水平、垂直或未指定。关联元素和长度的方向性 用于将百分比值解析为用户单位,如果对象反映 属性,也用于确定要更新哪个元素的内容属性。除非另有 说明,SVGLength 对象不 与任何元素关联,并且 具有未指定的方向性。

每个 SVGLength 对象 都以四种模式之一 运行。它可以:

  1. 反映一个反映的可动画属性的基值 (通过 baseVal 成员 of an SVGAnimatedLength 暴露),
  2. 反映呈现属性值 (例如通过 SVGRectElement.width.baseVal),
  3. 反映一个反映的 可动画属性的基值中的一个元素 (通过 SVGAnimatedLengthList 的 baseVal 成员上的方法暴露), 或
  4. 被分离,例如使用 createSVGLength 创建的 SVGLength 对象。

SVGLength 对象维护一个内部 <length>、<percentage> 或 <number> 值,称为其 值。

[Exposed=Window]
interface SVGLength {

  // 长度单位类型
  const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
  const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
  const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
  const unsigned short SVG_LENGTHTYPE_EMS = 3;
  const unsigned short SVG_LENGTHTYPE_EXS = 4;
  const unsigned short SVG_LENGTHTYPE_PX = 5;
  const unsigned short SVG_LENGTHTYPE_CM = 6;
  const unsigned short SVG_LENGTHTYPE_MM = 7;
  const unsigned short SVG_LENGTHTYPE_IN = 8;
  const unsigned short SVG_LENGTHTYPE_PT = 9;
  const unsigned short SVG_LENGTHTYPE_PC = 10;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  undefined convertToSpecifiedUnits(unsigned short unitType);
};

SVGLength 上定义的数值长度单位类型常量用于 表示 SVGLength 的值的类型。 它们的含义如下:

常量 含义
SVG_LENGTHTYPE_NUMBER 一个无单位的 <number>,解释为 px 值。
SVG_LENGTHTYPE_PERCENTAGE 一个 <percentage>。
SVG_LENGTHTYPE_EMS 带有 em 单位的 <length>。
SVG_LENGTHTYPE_EXS 带有 ex 单位的 <length>。
SVG_LENGTHTYPE_PX 带有 px 单位的 <length>。
SVG_LENGTHTYPE_CM 带有 cm 单位的 <length>。
SVG_LENGTHTYPE_MM 带有 mm 单位的 <length>。
SVG_LENGTHTYPE_IN 带有 in 单位的 <length>。
SVG_LENGTHTYPE_PT 带有 pt 单位的 <length>。
SVG_LENGTHTYPE_PC 带有 pc 单位的 <length>。
SVG_LENGTHTYPE_UNKNOWN 其他类型的值。

使用数值长度单位类型常量是一种反模式,并且 不会为 SVGLength 支持的任何其他单位或长度类型引入 新的常量值。如果支持并使用其他类型的长度, SVGLength 将使用 SVG_LENGTHTYPE_UNKNOWN 单位类型。有关 SVGLength 的其他特性 如何处理这些类型的长度,请参阅下文。

unitType IDL 属性表示 SVGLength 的值的类型。 获取 unitType 时,执行以下步骤:

  1. 如果 SVGLength 的值是无单位的 <number>、<percentage>,或者是带有 em、 ex、 px、 cm、 mm、 in、 pt 或 pc 单位的 <length>,则返回上方长度单位类型表中相应的常量 值。
  2. 否则,返回 SVG_LENGTHTYPE_UNKNOWN。

    例如,对于带有 ch 单位的 <length> 或具有非标量值(例如 calc())的值, 将返回 SVG_LENGTHTYPE_UNKNOWN。

value IDL 属性表示 SVGLength 的以用户单位表示的值。 获取 value 时,执行以下步骤:

  1. 令 value 为 SVGLength 的值。
  2. 如果 value 是 <number>,则返回 该数值。
  3. 令 viewport size 为解析百分比所依据的基准,根据 SVGLength 的 关联元素和 方向性确定:
    没有关联元素
    viewport size 为 100
    具有关联元素和水平方向性
    viewport size 是关联 元素的 SVG 视口宽度
    具有关联元素和垂直方向性
    viewport size 是关联元素的 SVG 视口高度
    具有关联元素和未指定的方向性
    viewport size 是关联元素的 SVG 视口 对角线长度(请参阅单位)
  4. 令 font size 为解析字体大小值所依据的基准, 根据 SVGLength 的关联元素确定:
    没有关联元素
    font size 是 font-size 特性的初始值的绝对长度
    具有关联元素
    font size 是关联元素的 font-size 特性的计算值
  5. 返回将 value 转换为绝对长度的结果, 使用 viewport size 和 font size 分别作为百分比和字体大小 基准。如果由于缺少 关联元素而无法转换,则返回 0。

设置 value 时,执行以下步骤:

  1. 如果 SVGLength 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 value 的值。
  3. 将 SVGLength 的值设置为 一个值为 value 的 <number>。
  4. 如果 SVGLength 反映一个反映的 属性的基值、 反映呈现属性,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

valueInSpecifiedUnits IDL 属性表示 SVGLength 的值的数值因子。 获取 valueInSpecifiedUnits 时,执行以下 步骤:

  1. 令 value 为 SVGLength 的值。
  2. 如果 value 是 <number>,则返回 该数值。
  3. 否则,如果 value 是 <percentage> 或任何标量 <length> 值,则返回其单位之前的数值因子。
  4. 否则,返回 0。

    因此,对于 '12%' 和 12em, valueInSpecifiedUnits 都会返回 12,但对于 calc(12px + 5%) 等非标量值 则会返回 0。

设置 valueInSpecifiedUnits 时,执行以下 步骤:

  1. 如果 SVGLength 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 valueInSpecifiedUnits 的值。
  3. 如果 SVGLength 的值是 <number>,则将其值更新为 value。
  4. 否则,如果 SVGLength 的值 是 <percentage> 或标量值的 <length>, 则将其数值因子更新为 value。
  5. 否则,SVGLength 的值 属于其他类型。将其设置为值为 value 的 <number>。
  6. 如果 SVGLength 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

valueAsString IDL 属性表示 SVGLength 的值的字符串形式。 获取 valueAsString 时,执行以下步骤:

  1. 令 value 为 SVGLength 的值。
  2. 令 string 为空字符串。
  3. 如果 value 是 <number>、<percentage> 或标量 <length> 值,则:
    1. 如果 value 是 <percentage> 或 <length>, 令 factor 为 value 的数值因子, 否则如果它是 <number>,则为 value 本身。
    2. 向 string 追加一个特定于实现的 字符串,如果使用 CSS 语法将其解析为 <number>, 则在给定实现所支持的 实数精度的情况下,会返回最接近 factor 的数值。
    3. 如果 value 是 <percentage>,则向 string 追加一个 U+0025 PERCENT SIGN 字符。
    4. 否则,如果 value 是 <length>, 则向 string 追加 value 单位的规范拼写。
    5. 返回 string。
  4. 否则,返回一个特定于实现的字符串, 如果解析为 <length>,则在给定 实现所支持的实数精度的情况下, 会返回最接近 value 的 长度值。

设置 valueAsString 时,执行以下步骤:

  1. 如果 SVGLength 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 valueAsString 的值。
  3. 使用 CSS 语法 [ <number> | <length> | <percentage> ] 解析 value。
  4. 如果解析失败,则抛出 SyntaxError。
  5. 否则,解析成功。将 SVGLength 的值 设置为解析后的值。
  6. 如果 SVGLength 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

newValueSpecifiedUnits 方法用于以有类型的方式设置 SVGLength 的值。 调用 newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 时,执行以下 步骤:

  1. 如果 SVGLength 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 如果 unitType 是 SVG_LENGTHTYPE_UNKNOWN 或是不在上述长度单位类型表中出现的值, 则抛出 NotSupportedError。
  3. 根据 unitType 的值设置 SVGLength 的值:
    SVG_LENGTHTYPE_NUMBER
    一个值为 valueInSpecifiedUnits 的 <number>
    SVG_LENGTHTYPE_PERCENTAGE
    一个数值因子为 valueInSpecifiedUnits 的 <percentage>
    其他任何值
    一个数值因子为 valueInSpecifiedUnits 且单位由上方长度单位类型表指示的 <length>
  4. 如果 SVGLength 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

convertToSpecifiedUnits 方法用于将 SVGLength 的值 转换为特定类型。 调用 convertToSpecifiedUnits(unitType) 时,执行以下步骤:

  1. 如果 SVGLength 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 如果 unitType 是 SVG_LENGTHTYPE_UNKNOWN 或是不在上述长度单位类型表中出现的值, 则抛出 NotSupportedError。
  3. 令 absolute 为从 value 成员将返回的值。
  4. 如果 unitType 是 SVG_LENGTHTYPE_NUMBER,则:
    1. 将 SVGLength 的值设置为值为 absolute 的 <number>。
  5. 否则,如果 unitType 是 SVG_LENGTHTYPE_PERCENTAGE,则:
    1. 令 viewport size 为解析百分比所依据的基准,根据 SVGLength 的 关联元素和 方向性确定:
      没有关联元素
      viewport size 为 100
      具有关联元素和水平方向性
      viewport size 是关联元素的 SVG 视口宽度
      具有关联元素和垂直方向性
      viewport size 是关联元素的 SVG 视口高度
      具有关联元素和未指定的 方向性
      viewport size 是关联元素的 SVG 视口 对角线长度(请参阅单位)
    2. 将 SVGLength 的值设置为 使用 viewport size 作为百分比基准,将 absolute 转换为 <percentage> 的结果。
  6. 否则,如果 unitType 是 SVG_LENGTHTYPE_EMS 或 SVG_LENGTHTYPE_EXS,则:
    1. 令 font size 为解析字体大小值所依据的基准, 根据 SVGLength 的关联元素确定:
      没有关联元素
      font size 是 font-size 特性的初始值的绝对长度
      具有关联元素
      font size 是关联元素的 font-size 特性的计算值
    2. 将 SVGLength 的值设置为 将 absolute 转换为具有 em 或 ex 单位(取决于 unitType)的 <length> 的结果, 使用 font size 作为 font-size 基准。
  7. 否则:
    1. 将 SVGLength 的值设置为 将 absolute 转换为 <length> 的结果,其单位 通过在上方长度单位类型表中查找 unitType 获得。
  8. 如果 SVGLength 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

4.5.3. 接口 SVGAngle

SVGAngle 接口用于表示 可以是 <angle> 或 <number> 的值。

SVGAngle 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。通过 animVal 属性反映的 SVGAngle 始终只读。

SVGAngle 对象可以与特定元素关联。如果对象反映 属性,则关联元素用于 确定要更新哪个元素的内容属性。除非另有说明,SVGAngle 对象 不与任何元素关联。

每个 SVGAngle 对象 都以两种模式之一 运行。它可以:

  1. 反映一个反映的可动画属性的基值 (通过 SVGAnimatedAngle 的 baseVal 成员暴露),
  2. 被分离,例如使用 createSVGAngle 创建的 SVGAngle 对象。

SVGAngle 对象维护一个内部 <angle> 或 <number> 值,称为其值。

[Exposed=Window]
interface SVGAngle {

  // 角度单位类型
  const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
  const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
  const unsigned short SVG_ANGLETYPE_DEG = 2;
  const unsigned short SVG_ANGLETYPE_RAD = 3;
  const unsigned short SVG_ANGLETYPE_GRAD = 4;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  undefined convertToSpecifiedUnits(unsigned short unitType);
};

SVGAngle 上定义的数值角度单位类型常量用于 表示 SVGAngle 的值的类型。 它们的含义如下:

常量 含义
SVG_ANGLETYPE_UNSPECIFIED 一个无单位的 <number>,解释为 以度为单位的值。
SVG_ANGLETYPE_DEG 带有 deg 单位的 <angle>。
SVG_ANGLETYPE_RAD 带有 rad 单位的 <angle>。
SVG_ANGLETYPE_GRAD 带有 grad 单位的 <angle>。
SVG_ANGLETYPE_UNKNOWN 其他类型的值。

使用数值角度单位类型常量是一种反模式,并且 不会为 SVGAngle 支持的任何其他单位或角度类型引入 新的常量值。如果支持并使用其他类型的角度, SVGAngle 将使用 SVG_ANGLETYPE_UNKNOWN 单位类型。有关 SVGAngle 的其他特性 如何处理这些类型的角度,请参阅下文。

unitType IDL 属性表示 SVGAngle 的值的类型。 获取 unitType 时,执行以下步骤:

  1. 如果 SVGAngle 的值是无单位的 <number>,或者是带有 deg、 rad 或 grad 单位的 <angle>,则返回上方角度单位类型表中的相应常量 值。
  2. 否则,返回 SVG_ANGLETYPE_UNKNOWN。

    例如,对于带有 turn 单位的 <angle>, 将返回 SVG_ANGLETYPE_UNKNOWN。

value IDL 属性表示 SVGAngle 的以度为单位的值。 获取 value 时,执行以下步骤:

  1. 令 value 为 SVGAngle 的值。
  2. 如果 value 是 <number>,则返回 该数值。
  3. 返回将 value 转换为以度为单位的角度的结果。

设置 value 时,执行以下步骤:

  1. 如果 SVGAngle 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 value 的值。
  3. 将 SVGAngle 的值设置为 一个值为 value 的 <number>。
  4. 如果 SVGAngle 反映一个反映的 属性的基值, 则重新序列化反映属性。

valueInSpecifiedUnits IDL 属性表示 SVGAngle 的值的数值因子。 获取 valueInSpecifiedUnits 时,执行以下 步骤:

  1. 令 value 为 SVGAngle 的值。
  2. 如果 value 是 <number>,则返回 该数值。
  3. 否则,value 是一个 <angle> 值。返回 其单位之前的数值因子。

设置 valueInSpecifiedUnits 时,执行以下 步骤:

  1. 如果 SVGAngle 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 valueInSpecifiedUnits 的值。
  3. 如果 SVGAngle 的值是 <number>,则将其值更新为 value。
  4. 否则,如果 SVGAngle 的值 是 <angle>, 则将其数值因子更新为 value。
  5. 如果 SVGAngle 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

valueAsString IDL 属性表示 SVGAngle 的值的字符串形式。 获取 valueAsString 时,执行以下步骤:

  1. 令 value 为 SVGAngle 的值。
  2. 令 string 为空字符串。
  3. 如果 value 是 <angle>, 令 factor 为 value 的数值因子, 否则如果它是 <number>,则为 value 本身。
  4. 向 string 追加一个特定于实现的 字符串,如果使用 CSS 语法将其解析为 <number>, 则在给定实现所支持的 实数精度的情况下,会返回最接近 factor 的数值。
  5. 如果 value 是 <angle>, 则向 string 追加 value 单位的规范拼写。
  6. 返回 string。

设置 valueAsString 时,执行以下步骤:

  1. 如果 SVGAngle 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 令 value 为赋给 valueAsString 的值。
  3. 使用 CSS 语法 [ <number> | <angle> ] 解析 value。
  4. 如果解析失败,则抛出 SyntaxError。
  5. 否则,解析成功。将 SVGAngle 的 值 设置为解析后的值。
  6. 如果 SVGAngle 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

newValueSpecifiedUnits 方法用于以有类型的方式设置 SVGAngle 的值。 调用 newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 时,执行以下 步骤:

  1. 如果 SVGAngle 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 如果 unitType 是 SVG_ANGLETYPE_UNKNOWN 或是不在上方角度单位类型表中出现的值, 则抛出 NotSupportedError。
  3. 根据 unitType 的值设置 SVGAngle 的值:
    SVG_ANGLETYPE_UNSPECIFIED
    一个值为 valueInSpecifiedUnits 的 <number>
    其他任何值
    一个数值因子为 valueInSpecifiedUnits 且单位由上方角度单位类型表指示的 <angle>
  4. 如果 SVGAngle 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

convertToSpecifiedUnits 方法用于将 SVGAngle 的值 转换为特定类型。 调用 convertToSpecifiedUnits(unitType) 时,执行以下步骤:

  1. 如果 SVGAngle 对象是只读的,则 抛出 NoModificationAllowedError。
  2. 如果 unitType 是 SVG_ANGLETYPE_UNKNOWN 或是不在上方角度单位类型表中出现的值, 则抛出 NotSupportedError。
  3. 令 degrees 为从 value 成员将返回的值。
  4. 如果 unitType 是 SVG_ANGLETYPE_UNSPECIFIED,则:
    1. 将 SVGAngle 的值设置为值为 degrees 的 <number>。
  5. 否则:
    1. 将 SVGAngle 的值设置为 将 degrees 转换为 <angle> 的结果,其单位 通过在上方角度单位类型表中查找 unitType 获得。
  6. 如果 SVGAngle 反映一个反映的 属性的基值,或 反映一个反映的属性的基值中的一个元素, 则重新序列化反映属性。

4.5.4. 列表接口

SVG 2 要求: 使 SVGList* 接口更类似于其他列表/数组。
决议: 为 svg 列表类型添加数组风格的索引以及 .length 和 .item。
目的: 与其他数组类型(例如 NodeList)保持一致。Opera 和 Firefox 已经实现。
负责人: Erik (ACTION-2975)
状态: 已完成

某些 SVG 属性包含值列表,为了表示这些值, 存在多个 SVG DOM 列表 接口,每种所需元素类型对应一个——SVGNumberList、SVGLengthList、 SVGPointList、SVGTransformList 和 SVGStringList。 前四个用于表示 SVGAnimatedNumberList、SVGAnimatedLengthList、 SVGAnimatedPoints 和 SVGTransformList 对象的基值和 动画组件,而第五个 SVGStringList 用于 反映 少数接受字符串列表的非动画属性。

大多数列表接口采用以下形式:

interface SVGNameList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  Type initialize(Type newItem);
  getter Type getItem(unsigned long index);
  Type insertItemBefore(Type newItem, unsigned long index);
  Type replaceItem(Type newItem, unsigned long index);
  Type removeItem(unsigned long index);
  Type appendItem(Type newItem);
  setter undefined (unsigned long index, Type newItem);
};

其中 Name 是列表元素的描述性名称 ("Number"、"Length"、"Point"、"Transform" 或 "String"),而 Type 是 列表元素的 IDL 类型(SVGNumber、SVGLength、SVGPoint、SVGTransform 或 DOMString)。

SVGTransformList 接口采用 上述形式,但还有 两个附加方法。

除 SVGTransformList 外,所有列表接口对象都 反映某个反映内容 属性的基值。SVGTransformList 对象 反映呈现 属性(‘transform’、 ‘gradientTransform’ 或 ‘patternTransform’)。 所有列表接口对象都与特定元素关联。 与 SVGLength 和类似对象不同,不存在 “分离的” 列表接口对象。

列表接口对象维护一个内部元素列表, 下文中简称为“列表”。 IDL 属性和方法用于检查和操作列表中的元素。 列表也可以响应 反映内容属性的更改以及 内容属性的动画而发生更改(对于 SVGTransformList 对象, 则响应 transform 特性的计算值的更改)。

列表 接口对象可以被指定为 只读,这意味着尝试修改该对象将导致 抛出异常,如下所述。通过 animVal IDL 属性反映的列表接口 对象始终只读。

列表接口对象 通过执行以下步骤进行同步:

  1. 令 value 为 反映内容属性的基值。如果属性不存在,或者其 值无法解析,则令 value 为该属性的 初始值;如果属性的 初始值为 (none),则为空列表。
  2. 令 length 为列表中的项目数量。
  3. 令 new length 为 value 中值的数量。 如果 value 是关键词 none (transform 特性支持此关键词), 则 new length 为 0。
  4. 如果列表元素类型是 SVGNumber、SVGLength、SVGPoint 或 SVGTransform,则:
    1. 如果 length > new length,则:
      1. 分离列表中索引 大于或等于 new length 的每个对象。
      2. 将列表截断到长度 new length。
      3. 将 length 设置为 new length。
    2. 当 length < new length 时:
      1. 令 item 为一个新创建的 列表元素类型的对象。
      2. 将 item 附加到此列表接口 对象。
      3. 将 item 追加到列表。
      4. 将 length 设置为 length + 1。
    3. 令 index 为 0。
    4. 当 index < length 时:
      1. 令 item 为列表中索引为 index 的对象。
      2. 令 v 为 value 中索引为 index 的值。
      3. 将 item 的值设置为 v。
      4. 如果 item 是 SVGTransform 对象,则 设置其 matrix 对象的组件 以匹配新的变换函数值。
      5. 将 index 设置为 index + 1。
  5. 否则,列表元素类型是 DOMString:
    1. 将列表替换为由 value 中的值组成的新列表。

每当需要分离一个列表元素对象时, 根据列表元素类型执行以下步骤:

SVGNumber
将 SVGNumber 设置为不再 与任何元素关联。 如果 SVGNumber 是只读的, 则将其设置为不再只读。
SVGLength
将 SVGLength 设置为不再 与任何元素关联。 如果 SVGLength 是只读的, 则将其设置为不再只读。将 SVGLength 设置为具有 未指定的方向性。
SVGPoint
将 SVGPoint 设置为不再 与任何元素 关联。 如果 SVGPoint 是只读的, 则将其设置为不再只读。
SVGTransform
将 SVGTransform 设置为不再 与任何元素关联。 如果 SVGTransform 是只读的, 则将其设置为不再只读。
DOMString
不执行任何操作。

每当需要附加一个列表元素对象时, 根据列表元素类型执行以下步骤:

SVGNumber
将 SVGNumber 与列表接口 对象所关联的元素关联。此外,根据 列表接口对象通过哪个 IDL 属性反映:
baseVal
将 SVGNumber 设置为反映 基值中的一个元素。
animVal
将 SVGNumber 设置为反映 基值中的一个元素。
SVGLength
将 SVGLength 与列表接口 对象所关联的元素关联,并将其 方向性设置为 被反映属性所指定的方向性。 此外,根据列表 接口对象通过哪个 IDL 属性 反映:
baseVal
将 SVGLength 设置为反映 基值中的一个元素。
animVal
将 SVGLength 设置为反映 基值中的一个元素。将 SVGLength 设置为 只读。
SVGPoint
将 SVGPoint 与列表接口 对象所关联的元素关联。 此外,根据列表 接口对象通过哪个 IDL 属性 反映:
baseVal
将 SVGPoint 设置为反映 基值中的一个元素。
animVal
将 SVGPoint 设置为反映 基值中的一个元素。
SVGTransform
将 SVGTransform 与列表接口 对象所关联的元素关联。 将 SVGTransform 设置为反映 呈现属性值中的一个元素。
DOMString
不执行任何操作。

支持的特性索引 of a 列表接口对象,是所有小于列表长度的非负整数的集合。

length 和 numberOfItems IDL 属性 表示列表长度,获取时直接返回 列表长度。

clear 方法用于 删除列表中的所有项目。调用 clear() 时,执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 分离列表中的所有元素,然后将其删除。
  3. 如果列表反映某个属性,或者表示某个反映属性的对象的 基值,则 重新序列化反映属性。

initialize 方法 用于清空列表并向其中添加一个指定值。 调用 initialize(newItem) 时,执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 分离列表中的所有元素,然后将其删除。
  3. 如果 newItem 是对象类型,并且 newItem 不是分离对象,则将 newItem 设置为 一个新创建的、与 newItem 类型相同 且具有相同(数值或长度)值的对象。
  4. 将 newItem 附加到列表 接口对象。
  5. 将 newItem 追加到此列表。
  6. 如果列表反映某个属性,或者表示某个反映属性的对象的 基值,则 重新序列化反映属性。
  7. 返回 newItem。

getItem 方法用于 获取列表中指定位置的项目。调用 getItem(index) 时,执行以下步骤:

  1. 如果 index 大于或等于列表 长度,则抛出 IndexSizeError。
  2. 返回列表中位置 index 处的元素。

    请注意,如果列表的元素类型是对象类型, 例如 SVGLength,则返回的是该对象的引用,而不是 其副本。

insertItemBefore 方法用于在列表中特定位置插入元素。 调用 insertItemBefore(newItem, index) 时, 执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 如果 newItem 是对象类型,并且 newItem 不是分离对象,则将 newItem 设置为 一个新创建的、与 newItem 类型相同 且具有相同(数值或长度)值的对象。
  3. 如果 index 大于列表长度,则 将 index 设置为列表长度。
  4. 在索引 index 处将 newItem 插入列表。
  5. 将 newItem 附加到列表接口对象。
  6. 如果列表反映某个属性,或者表示某个反映属性的对象的 基值,则 重新序列化反映属性。
  7. 返回 newItem。

replaceItem 方法 用于用新项目替换列表中的现有项目。 调用 replaceItem(newItem, index) 时, 执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 如果 index 大于或等于列表 长度,则抛出 IndexSizeError。
  3. 如果 newItem 是对象类型,并且 newItem 不是分离对象,则将 newItem 设置为 一个新创建的、与 newItem 类型相同 且具有相同(数值或长度)值的对象。
  4. 分离列表中索引为 index 的元素。
  5. 使用 newItem 替换列表中索引为 index 的元素。
  6. 将 newItem 附加到列表 接口对象。
  7. 如果列表反映某个属性,或者表示某个反映属性的对象的 基值,则 重新序列化反映属性。
  8. 返回 newItem。

removeItem 方法 用于从列表中删除项目。调用 removeItem(index) 时,执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 如果 index 大于或等于列表 长度,则抛出带有代码的 IndexSizeError。
  3. 令 item 为索引 index 处的列表元素。
  4. 分离 item。
  5. 删除索引 index 处的列表元素。
  6. 返回 item。

appendItem 方法 用于将项目追加到列表末尾。调用 appendItem(newItem) 时,执行以下步骤:

  1. 如果列表是只读的,则抛出 NoModificationAllowedError。
  2. 如果 newItem 是对象类型,并且 newItem 不是分离对象,则将 newItem 设置为 一个新创建的、与 newItem 类型相同 且具有相同(数值或长度)值的对象。
  3. 令 index 为列表长度。
  4. 将 newItem 追加到列表末尾。
  5. 将 newItem 附加到列表 接口对象。
  6. 如果列表反映某个属性,或者表示某个反映属性的对象的 基值,则 重新序列化反映属性。
  7. 返回 newItem。

索引特性设置器的行为 与 replaceItem 方法相同。

4.5.5. 接口 SVGNumberList

SVGNumberList 接口是一个列表接口,其 元素为 SVGNumber 对象。SVGNumberList 对象 表示数字列表。

[Exposed=Window]
interface SVGNumberList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGNumber initialize(SVGNumber newItem);
  getter SVGNumber getItem(unsigned long index);
  SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
  SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
  SVGNumber removeItem(unsigned long index);
  SVGNumber appendItem(SVGNumber newItem);
  setter undefined (unsigned long index, SVGNumber newItem);
};

SVGNumberList 的所有接口成员的行为 都在上面的列表接口一节中定义。

4.5.6. 接口 SVGLengthList

SVGLengthList 接口是一个列表接口,其 元素为 SVGLength 对象。SVGLengthList 对象 表示长度列表。

[Exposed=Window]
interface SVGLengthList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGLength initialize(SVGLength newItem);
  getter SVGLength getItem(unsigned long index);
  SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
  SVGLength replaceItem(SVGLength newItem, unsigned long index);
  SVGLength removeItem(unsigned long index);
  SVGLength appendItem(SVGLength newItem);
  setter undefined (unsigned long index, SVGLength newItem);
};

SVGLengthList 的所有接口成员的行为 都在上面的列表接口一节中定义。

4.5.7. 接口 SVGStringList

SVGStringList 接口是一个列表接口,其 元素为 DOMString 值。SVGStringList 对象 表示字符串列表。

[Exposed=Window]
interface SVGStringList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  DOMString initialize(DOMString newItem);
  getter DOMString getItem(unsigned long index);
  DOMString insertItemBefore(DOMString newItem, unsigned long index);
  DOMString replaceItem(DOMString newItem, unsigned long index);
  DOMString removeItem(unsigned long index);
  DOMString appendItem(DOMString newItem);
  setter undefined (unsigned long index, DOMString newItem);
};

SVGStringList 的所有接口成员的行为 都在上面的列表接口一节中定义。

4.6. 用于反映 可动画 SVG 属性的 DOM 接口

以下接口用于表示 可动画内容属性的反映值。 它们各自由表示相同数据的两个组件对象组成: baseVal 和 animVal。 baseVal(基值)对象可修改, 用于更新相应属性值。

在 SVG 1.1 中,SVG DOM 接口的 animVal 属性表示 反映属性的当前动画值。在此版本的 SVG 中, animVal 不再表示当前动画值,而是 baseVal 的别名。

4.6.1. 接口 SVGAnimatedBoolean

SVGAnimatedBoolean 对象用于 反映 一个接受布尔值的可动画属性。

[Exposed=Window]
interface SVGAnimatedBoolean {
           attribute boolean baseVal;
  readonly attribute boolean animVal;
};

baseVal 和 animVal IDL 属性 都表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 执行以下步骤:

  1. 令 value 为反映属性的值, 如果不存在则为空字符串。
  2. 如果 value 不是 "true" 或 "false",则将 value 设置为反映属性的初始值。
  3. 如果 value 为 "true",则返回 true,否则返回 false。

设置 baseVal 时, 如果值为 true,则将反映属性设置为 "true",否则设置为 "false" 。

4.6.2. 接口 SVGAnimatedEnumeration

SVGAnimatedEnumeration 对象 用于反映 一个接受关键词值的可动画属性(例如 ‘textPath’ 上的 ‘method’ 属性), 或反映 某个可动画属性所具有的值类型(仅由 ‘marker’ 元素的 ‘orient’ 属性的 orientType IDL 属性执行)。

[Exposed=Window]
interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal;
  readonly attribute unsigned short animVal;
};

对于SVGAnimatedEnumeration 对象,如果它们反映 一个只接受关键词值的可动画属性,则 baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 对于 orientType, 它们表示反映的 ‘orient’ 属性当前非动画值的类型。获取 baseVal 或 animVal 时, 执行以下步骤:

  1. 令 value 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
  2. 根据反映 IDL 属性的定义, 返回 value 的数值类型 值。

设置 baseVal 时, 执行以下步骤:

  1. 令 value 为赋给 baseVal 的值。
  2. 如果 value 为 0,或者不是反映属性任何值的数值类型值, 则抛出 TypeError。
  3. 否则,如果反映 IDL 属性是 orientType 且 value 是 SVG_MARKER_ORIENT_ANGLE, 则将反映属性设置为字符串 "0"。
  4. 否则,value 是反映属性的某个特定单一关键词值的 数值类型值。 将反映属性设置为该值。

4.6.3. 接口 SVGAnimatedInteger

SVGAnimatedInteger 对象用于 反映 一个接受整数值的可动画属性(例如 ‘feTurbulence’ 上的 ‘numOctaves’)。 它还 用于反映一个接受 一个整数后跟可选第二个整数的可动画属性的一部分(例如 ‘feConvolveMatrix’ 上的 ‘order’)。

此 SVGAnimatedInteger 接口 未在本规范中使用,不过 滤镜效果 规范多处使用了它。

[Exposed=Window]
interface SVGAnimatedInteger {
           attribute long baseVal;
  readonly attribute long animVal;
};

对于SVGAnimatedInteger 对象,如果它们反映 一个接受单个整数值的可动画属性,则 baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 对于反映一个接受 一个整数后跟可选第二个整数的属性中的一个整数的对象,它们表示 两个整数之一当前的非动画值。获取 baseVal 或 animVal 时, 执行以下步骤:

  1. 令 value 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
  2. 如果反映属性被定义为接受一个整数 后跟可选的第二个整数,则:
    1. 如果此 SVGAnimatedInteger 对象反映 第一个整数,则返回 value 中的第一个值。
    2. 否则,此 SVGAnimatedInteger 对象反映 第二个整数。如果 value 中显式指定了第二个值,则返回它; 如果没有,则返回 属性定义中所述的隐式值。

      例如,‘order’ 的定义指出,隐式的第二个整数与显式的 第一个整数相同。

  3. 否则,反映属性被定义为接受单个 整数值。返回 value。

设置 baseVal 时, 执行以下步骤:

  1. 令 value 为赋给 baseVal 的值。
  2. 令 new 为整数列表。
  3. 如果反映属性被定义为接受一个整数 后跟可选的第二个整数,则:
    1. 令 current 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
    2. 令 first 为 current 中的第一个整数。
    3. 如果 current 中显式指定了第二个整数, 则令 second 为该值;否则为 属性定义中所述的隐式值。
    4. 如果此 SVGAnimatedInteger 对象反映 第一个整数,则将 first 设置为 value。 否则,将 second 设置为 value。
    5. 将 first 追加到 new。
    6. 将 second 追加到 new。
  4. 否则,反映属性被定义为接受单个 整数值。将 value 追加到 new。
  5. 将内容属性设置为由 new 中每个整数 序列化为特定于实现的字符串组成的字符串; 如果使用 CSS 语法将这些字符串解析为 <number>, 则会返回对应的 整数,并且各字符串使用单个 U+0020 SPACE 字符连接和分隔。

4.6.4. 接口 SVGAnimatedNumber

SVGAnimatedNumber 对象用于 反映 一个接受数值的可动画属性(例如 ‘path’ 上的 ‘pathLength’)。它还 用于反映一个接受 一个数值后跟可选第二个数值的可动画属性的一部分(例如 ‘feDiffuseLighting’ 上的 ‘kernelUnitLength’)。

[Exposed=Window]
interface SVGAnimatedNumber {
           attribute float baseVal;
  readonly attribute float animVal;
};

对于SVGAnimatedNumber 对象,如果它们反映 一个接受单个数值的可动画属性,则 baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 对于反映一个接受 一个数值后跟可选第二个数值的属性中的一个数值的对象,它们表示 两个数值之一当前的非动画值。获取 baseVal 或 animVal 时, 执行以下步骤:

  1. 令 value 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
  2. 如果反映属性被定义为接受一个数值 后跟可选的第二个数值,则:
    1. 如果此 SVGAnimatedNumber 对象反映 第一个数值,则返回 value 中的第一个值。
    2. 否则,此 SVGAnimatedNumber 对象反映 第二个数值。如果 value 中显式指定了第二个值,则返回它; 如果没有,则返回 属性定义中所述的隐式值。

      例如,‘kernelUnitLength’ 的定义指出,隐式的第二个数值与显式的 第一个数值相同。

  3. 否则,反映属性被定义为接受单个 数值。返回 value。

设置 baseVal 时, 执行以下步骤:

  1. 令 value 为赋给 baseVal 的值。
  2. 令 new 为数值列表。
  3. 如果反映属性被定义为接受一个数值 后跟可选的第二个数值,则:
    1. 令 current 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
    2. 令 first 为 current 中的第一个数值。
    3. 如果 current 中显式指定了第二个数值, 则令 second 为该值;否则为 属性定义中所述的隐式值。
    4. 如果此 SVGAnimatedNumber 对象反映 第一个数值,则将 first 设置为 value。 否则,将 second 设置为 value。
    5. 将 first 追加到 new。
    6. 将 second 追加到 new。
  4. 否则,反映属性被定义为接受单个 数值。将 value 追加到 new。
  5. 将内容属性设置为由 new 中每个数值 序列化为特定于实现的字符串组成的字符串; 如果使用 CSS 语法将这些字符串解析为 <number>, 则在给定实现所支持的 实数精度的情况下,会返回 最接近该数值的值, 并且各字符串使用单个 U+0020 SPACE 字符连接和分隔。

4.6.5. 接口 SVGAnimatedLength

SVGAnimatedLength 对象用于反映 (a) 一个接受 <length>、 <percentage> 或 <number> 值的可动画属性,或 (b) 一个 接受这些值之一的 CSS 特性及其相应的 呈现属性。

[Exposed=Window]
interface SVGAnimatedLength {
  [SameObject] readonly attribute SVGLength baseVal;
  [SameObject] readonly attribute SVGLength animVal;
};

baseVal 和 animVal IDL 属性 表示反映内容属性的当前值。 获取 baseVal 或 animVal 时, 返回一个 SVGLength 对象,该对象:

4.6.6. 接口 SVGAnimatedAngle

SVGAnimatedAngle 对象用于反映 ‘marker’ 上动画 ‘orient’ 属性的 <angle> 值, 通过 orientAngle IDL 属性实现。

[Exposed=Window]
interface SVGAnimatedAngle {
  [SameObject] readonly attribute SVGAngle baseVal;
  [SameObject] readonly attribute SVGAngle animVal;
};

baseVal 和 animVal IDL 属性表示 反映的 ‘orient’ 属性当前的非动画 <angle> 值。 获取 baseVal 或 animVal 时,返回一个 SVGAngle 对象,该对象:

4.6.7. 接口 SVGAnimatedString

SVGAnimatedString 对象用于 反映 一个接受字符串值的可动画属性。还可以选择 定义为额外反映第二个已弃用属性。

[Exposed=Window]
interface SVGAnimatedString {
           attribute (DOMString or TrustedScriptURL) baseVal;
  readonly attribute DOMString animVal;
};

baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 执行以下步骤:

  1. 如果反映属性不存在,则:
    1. 如果 SVGAnimatedString 对象被定义为还额外 反映第二个已弃用属性,并且该属性存在, 则返回其值。
    2. 否则,如果反映属性具有初始 值, 则返回该值。
    3. 否则,返回空字符串。
  2. 否则,反映属性存在。返回其值。

对于 href 成员在 SVGURIReference 接口上的情况, 如果 已弃用的 ‘xlink:href’ 属性存在 而 ‘href’ 属性不存在, 则会返回前者, 在所有其他情况下则返回 ‘href’ 属性。

设置 baseVal 时, 执行以下步骤:

  1. 如果反映属性的元素是 SVGScriptElement,令 value 为 执行 获取符合 Trusted Type 的字符串 算法的结果,参数为 TrustedScriptURL、 反映属性所属 Document 的相关全局对象、'SVGScriptElement href' 和 'script'。
  2. 否则,令 value 为指定值。
  3. 如果反映属性不存在, SVGAnimatedString 对象 被定义为还额外反映 第二个已弃用属性,并且该已弃用属性存在, 则将该已弃用属性设置为 value。
  4. 否则,将反映属性设置为 value。

SVG 尚未拥有完整的脚本处理模型。 Trusted Types 假设属性和 文本正文修改保护的行为与 HTML 脚本类似。

对于 href 成员在 SVGURIReference 接口上的情况, 如果 已弃用的 ‘xlink:href’ 属性存在 而 ‘href’ 属性不存在, 则会设置前者, 在所有其他情况下则设置 ‘href’ 属性。

4.6.8. 接口 SVGAnimatedRect

SVGAnimatedRect 对象用于反映 一个接受矩形值的可动画属性,该矩形值由 x、y、width 和 height 指定。

在本规范中,唯一作为 SVGAnimatedRect 反映的属性是 ‘viewBox’。

[Exposed=Window]
interface SVGAnimatedRect {
  [SameObject] readonly attribute SVGRect baseVal;
  [SameObject] readonly attribute SVGRect animVal;
};

baseVal 和 animVal IDL 属性表示反映属性当前的非动画矩形值。 获取 baseVal 或 animVal 时, 返回一个 SVGRect 对象。

创建 baseVal 或 animVal SVGRect 对象时,以及 此后每当反映内容属性 被添加、删除或更改时,执行以下步骤:

  1. 令 value 为反映属性的值 (如果该属性不存在或无效,则使用该属性的初始值)。
  2. 令 x、y、width 和 height 为 value 中对应的各组件。
  3. 将 SVGRect 对象的 x 坐标、 y 坐标、 width 和 height 分别设置为 x、y、width 和 height。

每当 baseVal 或 animVal SVGRect 对象的 x 坐标、 y 坐标、 width 或 height 特性 发生变化时, 除非是作为前述将内容属性值 反映到 SVGRect 中的算法的一部分,否则反映的 内容属性必须被重新序列化。

4.6.9. 接口 SVGAnimatedNumberList

SVGAnimatedNumberList 对象 用于反映一个接受 <number> 值列表的可动画属性。

[Exposed=Window]
interface SVGAnimatedNumberList {
  [SameObject] readonly attribute SVGNumberList baseVal;
  [SameObject] readonly attribute SVGNumberList animVal;
};

baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 返回一个 SVGNumberList 对象,该对象 反映 反映属性的基值。

4.6.10. 接口 SVGAnimatedLengthList

SVGAnimatedLengthList 对象 用于反映一个接受 <length>、<percentage> 或 <number> 值列表的可动画属性。

[Exposed=Window]
interface SVGAnimatedLengthList {
  [SameObject] readonly attribute SVGLengthList baseVal;
  [SameObject] readonly attribute SVGLengthList animVal;
};

baseVal 或 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 返回一个 SVGLengthList 对象,该对象 反映 反映属性的基值。

4.7. 其他 DOM 接口

4.7.1. 接口 SVGUnitTypes

SVGUnitTypes 接口定义一组常用 常量, 用于反映 ‘gradientUnits’、 ‘patternContentUnits’ 以及 其他类似属性。

[Exposed=Window]
interface SVGUnitTypes {
  // 单位类型
  const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
  const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
  const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};

SVGUnitTypes 上定义的单位类型常量具有以下含义:

常量 含义
SVG_UNIT_TYPE_USERSPACEONUSE 对应于 'userSpaceOnUse' 属性值。
SVG_UNIT_TYPE_OBJECTBOUNDINGBOX 对应于 'objectBoundingBox' 属性值。
SVG_UNIT_TYPE_UNKNOWN 其他类型的值。

4.7.2. 混入 SVGTests

SVGTests 接口用于反映 条件处理属性,并被混入 支持这些属性的元素的其他 接口中。

interface mixin SVGTests {
  [SameObject] readonly attribute SVGStringList requiredExtensions;
  [SameObject] readonly attribute SVGStringList systemLanguage;
};

requiredExtensions IDL 属性 反映 ‘requiredExtensions’ 内容 属性。

systemLanguage IDL 属性 反映 ‘systemLanguage’ 内容属性。

4.7.3. 混入 SVGFitToViewBox

SVGFitToViewBox 接口用于 反映 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性, 并被混入支持 这两个属性的元素的其他接口中。

interface mixin SVGFitToViewBox {
  [SameObject] readonly attribute SVGAnimatedRect viewBox;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};

viewBox IDL 属性 反映 ‘viewBox’ 内容属性。

preserveAspectRatio IDL 属性 反映 ‘preserveAspectRatio’ 内容 属性。

4.7.4. 混入 SVGURIReference

SVGURIReference 接口用于 反映 ‘href’ 属性和已弃用的 ‘xlink:href’ 属性。

interface mixin SVGURIReference {
  [SameObject] readonly attribute SVGAnimatedString href;
};

href IDL 属性 表示 ‘href’ 属性的值,并且对于定义为支持它的元素, 还表示已弃用的 ‘xlink:href’ 属性。获取 href 时,返回一个 SVGAnimatedString 对象,该对象:

SVGAnimatedString 接口被定义为通过其 baseVal 和 animVal 成员反映已弃用的 ‘xlink:href’ 属性,如果该属性存在 而 ‘href’ 不存在;在所有 其他情况下则反映 ‘href’ 属性。动画元素 将 attributeName='xlink:href' 视为以 ‘href’ 属性为目标的别名。


第 5 章:文档结构

5.1. 定义 SVG 文档片段:‘svg’ 元素

5.1.1. 概述

一个 SVG 文档片段由任意数量的 SVG 元素 组成,这些元素包含在 ‘svg’ 元素中。

SVG 文档片段可以是空片段(即, ‘svg’ 元素内没有内容),也可以是非常简单的 SVG 文档片段,其中包含单个 SVG 图形元素 例如 ‘rect’,也可以是 复杂且深度嵌套的 容器元素和图形元素集合。

SVG 文档片段可以作为自包含的 文件或资源独立存在,此时 SVG 文档片段就是一个 SVG 文档,也可以作为片段内联嵌入 父级 HTML 或 XML 文档中。

以下示例展示了简单的 SVG 内容作为片段内联嵌入父级 XML 文档中。 请注意这里使用 XML 命名空间来表明 ‘svg’ 和 ‘ellipse’ 元素 属于 SVG 命名空间:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- 父元素内容在此 -->
   <svg:svg width="4cm" height="8cm">
      <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
   </svg:svg>
   <!-- ... -->
</parent>

此示例展示了一个稍微复杂一些(即它包含 多个矩形)的独立、自包含 SVG 文档:

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>四个独立的矩形
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

‘svg’ 元素可以出现在 SVG 内容的中间。这 是将 SVG 文档片段嵌入 其他 SVG 文档片段中的机制。

‘svg’ 元素在 SVG 内容中间的另一个用途 是建立新的 SVG 视口。(参见 建立新的 SVG 视口。)

5.1.2. 命名空间

当 SVG 作为 XML 解析时,为了符合 XML 中的命名空间 推荐标准 [xml-names],必须提供 SVG 命名空间 声明,以便所有 SVG 元素都被识别 为属于 SVG 命名空间。

使用 HTML 语法时,命名空间由 HTML 解析器自动提供。

<html>
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="green">
</svg>
</html>

如示例所示,使用 HTML 解析器时无需设置 ‘xmlns’ 属性来声明元素位于 SVG 命名空间中。 HTML 解析器会自动在正确的命名空间中创建 SVG 元素。

本节 应说明如何根据 DOM 定义文档的行为, 并且还应解释 HTML 解析器如何 创建 SVG 片段。

SVG 2 的命名空间是 http://www.w3.org/2000/svg, 与早期版本的 SVG 相同。

以下是 SVG 作为 XML 解析时 提供命名空间声明的几种可能方式。可以在 ‘svg’ 元素上指定不带命名空间前缀的 ‘xmlns’ 属性,这意味着 SVG 是带有 ‘xmlns’ 属性的元素作用域内 所有元素的默认命名空间:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

如果在 ‘xmlns’ 属性上指定了命名空间前缀(例如 xmlns:svg="http://www.w3.org/2000/svg"), 那么对应的命名空间就不是默认命名空间,因此 必须为元素显式指定命名空间前缀:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <svg:rect x="10" y="10" width="80" height="80" fill="green" />
</svg:svg>

命名空间前缀可以在祖先元素上指定(如 上面的示例所示)。有关更多 信息,请参阅 XML 中的命名空间 推荐标准 [xml-names]。

5.1.3. 定义

结构元素
结构元素是定义 SVG 文档主要 结构的元素。具体而言,以下 元素是结构元素: ‘defs’、‘g’、‘svg’、‘symbol’ 和 ‘use’。
结构上 外部的元素
通过引用外部资源来定义其结构的元素。 具体而言,当以下元素 具有 ‘href’ 属性时,它们是结构上外部的元素: ‘foreignObject’、‘image’、‘script’ 和 ‘use’。
当前 SVG 文档 片段
从给定 SVG 元素的最外层祖先 ‘svg’ 元素 开始的文档子树,并要求 最外层 ‘svg’ 与给定元素之间的所有容器元素 都是 SVG 命名空间中的元素。
最外层 svg 元素
仍位于 当前 SVG 文档片段中的最远 ‘svg’ 祖先元素。
SVG 文档片段
从一个 ‘svg’ 元素开始的文档子树,该元素要么是文档的根元素,要么其父 元素不在 SVG 命名空间中。 SVG 文档片段可以由独立的 SVG 文档组成, 也可以是由 ‘svg’ 元素包围的父文档片段。 但是,直接作为另一个 SVG 命名空间元素子元素的 ‘svg’ 元素 不是 SVG 文档片段的根。
SVG 元素
SVG 命名空间中的任何元素。
图形元素
能够使图形 绘制到目标画布上的元素类型之一。具体而言: ‘circle’、‘ellipse’、‘foreignObject’、‘image’、‘line’、‘path’、‘polygon’、‘polyline’、‘rect’、‘text’、‘textPath’ 和 ‘tspan’。
图形引用元素
使用对其他 文档或元素的引用作为其图形内容来源的图形元素。 具体而言:‘image’ 和 ‘use’。

5.1.4. ‘svg’ 元素

SVG 2 要求: 支持变换 ‘svg’ 元素。
决议: 我们将在 SVG 2 中允许 ‘svg’ 使用 ‘transform’。
目的: 允许对嵌套的 ‘svg’ 元素进行变换,以符合作者 的预期。
负责人: Dirk(无需操作)
状态: 已完成
‘svg’
类别:
容器元素、可渲染元素、结构元素
内容模型:
以下任意数量的元素,顺序不限:a、clipPath、 filter、 foreignObject、image、marker、mask、 script、style、switch、text、view
属性:
几何特性:
DOM 接口:

x 和 y 属性指定 嵌入的 ‘svg’ 元素所放置的 矩形区域左上角。在最外层 svg 元素上, 这些属性不起作用。

对于最外层 svg 元素, width 和 height 属性指定 SVG 文档片段的固有尺寸。 对于嵌入的 ‘svg’ 元素, 它们指定 ‘svg’ 元素所放置的矩形区域 的大小。 在这两种情况下,auto 的计算样式 都被视为等同于 100%。

如果 SVG 文档可能被引用为另一个文档的 组成部分,作者通常希望在被引用文档的 最外层 svg 元素上包含一个 ‘viewBox’ 属性。 此属性提供了一种方便的方法来设计 SVG 文档,使其缩放以适合任意 SVG 视口。

‘svg’ 元素将 事件 处理程序内容属性公开为 事件处理程序中的若干 Window 对象事件处理程序。它还镜像它们的 事件处理程序 IDL 属性。

onblur、‘onerror’、onfocus、‘onload’ 和 ‘onscroll’ 事件处理程序是 Window 对象的事件处理程序,公开在 ‘svg’ 元素上, 它们会替换通常由 SVG 元素支持的具有 相同名称的通用 事件处理程序。

5.2. 分组:‘g’ 元素

5.2.1. 概述

容器元素
可以将图形元素和其他 容器元素作为子元素的元素。具体而言: ‘a’、‘clipPath’、 ‘defs’、‘g’、‘marker’、‘mask’、‘pattern’、‘svg’、‘switch’ 和 ‘symbol’。

‘g’ 元素是一个容器元素,用于将相关的 图形元素分组到一起。

元素组以及单个对象都可以使用 ‘id’ 属性指定名称。命名组用于 动画和可重用对象等多种用途。

示例:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>两个组,每组包含两个矩形</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

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

‘g’ 元素可以包含其他 ‘g’ 元素并任意深度地 嵌套其中。

5.2.2. ‘g’ 元素

‘g’
类别:
容器元素、可渲染元素、结构元素
内容模型:
以下任意数量的元素,顺序不限:a、clipPath、 filter、 foreignObject、image、marker、mask、 script、style、switch、text、view
属性:
DOM 接口:

5.3. 定义供重用的内容,以及 ‘defs’ 元素

5.3.1. 概述

SVG 允许定义图形对象以供以后重用. 为此,SVG 广泛使用 URL 引用 构造 [rfc3987]. 例如,要使用线性渐变填充矩形,可以 定义一个 ‘linearGradient’ 元素,并为其 指定一个 ‘id’ 特性,该特性可以 在矩形的 fill 特性值中被引用,如下所示:

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>
        

某些类型的元素,例如渐变,本身不会产生图形结果. 因此它们可以 放置在任何方便的位置. 但是,有时需要定义一个图形对象并 防止它被直接渲染. 它仅用于在其他地方被引用. 为此,并且为了 方便地对已定义内容进行分组,SVG 提供了 ‘defs’ 元素.

建议在可能的情况下,在文档顺序中先定义被引用元素, 再定义使用这些元素的元素. 将所有被引用元素收集 在文件顶部附近的单个 ‘defs’ 元素 内 可以使标记更易于阅读和理解.

5.3.2. ‘defs’ 元素

‘defs’
类别:
容器元素, 从不渲染的元素, 结构元素
内容模型:
以下任意数量的元素,顺序不限:a, clipPath, filter, foreignObject, image, marker, mask, script, style, switch, text, view
属性:
DOM 接口:

‘defs’ 元素是 用于容纳 被引用元素的容器元素. 出于可理解性和 无障碍方面的原因,建议 在可能的情况下,将被引用元素定义在 ‘defs’ 内.

‘defs’ 的内容模型 与 ‘g’ 元素相同; 因此,任何 可以作为 ‘g’ 子元素的元素也可以作为 ‘defs’ 的子元素,反之亦然.

‘defs’ 的后代元素不会被直接渲染; ‘defs’ 元素的 display 值 必须始终由 用户代理样式表 设置为 none ,并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性. 但是请注意,‘defs’ 的后代元素 始终存在于源树中,因此始终可以 被其他元素引用; 因此,‘defs’ 元素上的 display 特性值不会 阻止其他元素引用这些元素.

5.4. ‘symbol’ 元素

‘symbol’ 元素 用于定义图形模板, 这些模板可以由 ‘use’ 元素实例化,但不会 被直接渲染.

‘symbol’ 为 其包含的图形建立嵌套坐标系统. 当 symbol 被实例化 为 ‘use’ 元素的被引用元素时, 因此它的渲染方式与嵌套的 ‘svg’ 元素非常相似.

‘symbol’
类别:
容器元素, 结构元素
内容模型:
以下任意数量的元素,顺序不限:a, clipPath, filter, foreignObject, image, marker, mask, script, style, switch, text, view
属性:
几何特性:
DOM 接口:

x, y, width, 和 height 几何特性 与 ‘svg’ 元素上的作用相同, 当 ‘symbol’ 被 ‘use’ 元素实例化时. 特别是,如果 width 和 height 的计算值为 auto (并且没有被实例化它的 ‘use’ 元素上的值覆盖), 那么它们将被视为值 100%.

SVG 2 中新增. 允许在 symbol 上指定几何特性 提供了更一致的渲染模型, 并允许作者为每个 symbol 设置默认大小 (该大小仍可被 ‘use’ 元素上的属性覆盖).

5.4.1. 属性

名称 值 初始值 可动画
refX <length> | left | center | right (none) 是
refY <length> | top | center | bottom (none) 是

SVG 2 中新增. 添加它是为了更容易将 symbol 对齐到 特定点,就像地图中经常做的那样. 类似于 ‘marker’ 上对应的属性.

为 symbol 元素添加 refX/refY. 决议于 Leipzig F2F. 状态: 已完成.

我们将向 marker/symbol 上的 refX/refY 添加 top/center/bottom, left/center/right 关键词. 决议于 London F2F. 值的灵感来自 'background-position'. 状态: 已完成.

‘refX’ 和 ‘refY’ 属性 定义 symbol 的 参考点,该点将精确放置在 symbol 的 x,y 定位坐标处, 该坐标由 x 和 y 特性以及 ‘symbol’ 和其宿主 ‘use’ 元素上的任何变换的累积效果定义.

关键词值与 ‘marker’ 元素上的 ‘refX’ 和 ‘refY’ 属性 具有相同含义, 在适用方向上解析为 0%, 50%, 或 100%.

与其他定位属性不同, ‘refX’ 和 ‘refY’ 被解释为位于 应用 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性之后的 symbol 内容坐标系统中. 如果未指定其中一个或两个属性, 则不会在相应维度进行调整, 并且 symbol 矩形视口区域的顶部或左侧 (无论 ‘viewBox’ 坐标如何) 都会定位在 x,y 点.

为了向后兼容, 当 ‘refX’ 和 ‘refY’ 未在 ‘symbol’ 上指定时的行为与它们被指定为值 0 时不同, 因此也不同于 ‘marker’ 上未指定等效属性时的行为.

5.4.2. 关于 symbol 的说明

对在同一文档中多次使用的图形使用 ‘symbol’ 元素,可以增加结构和语义. 与 ‘symbol’ 元素密切相关的是 ‘marker’ 和 ‘pattern’ 元素; 这三者都定义了图形内容的容器, 可以在 SVG 中的不同位置和缩放比例下重复渲染. 但是,虽然 pattern 和 marker 中的重用图形 会在另一个元素上提供图形效果, ‘symbol’ 中的内容则会嵌入 为完全交互式内容,位于use 元素影子 树中.

用户代理样式表将 ‘symbol’ 元素的 overflow 特性设置为 hidden,这会在 symbol 的 SVG 视口边界处创建矩形裁剪 路径. 除非 overflow 特性被覆盖,否则 symbol 内任何 超出 symbol SVG 视口的图形 都会被裁剪.

‘symbol’ 元素绝不能 被直接渲染; 它们的唯一用途是作为可使用 ‘use’ 元素引用的内容. 用户代理必须将 ‘symbol’ 元素上的 display 特性 设置为 none, 作为用户代理样式表的一部分, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性.

作为 ‘use’ 元素直接被引用元素的 ‘symbol’ 所生成的实例 的 display 特性计算值必须始终为 inline . 换句话说,只要宿主 ‘use’ 元素被渲染,它就必须被渲染. 用户代理样式表同样将此 声明定义为具有高于任何其他 CSS 规则或呈现属性的重要性. 任何其他被克隆 以在 use 元素影子树中 创建元素实例的 ‘symbol’ 都作为 symbol 定义处理,并且不得被渲染.

5.5. ‘use’ 元素

SVG 2 要求: 允许 ‘use’ 通过省略片段来引用外部文档的根元素。
决议: 我们将放宽对 特定元素的引用要求,以允许省略片段来表示引用根 元素,只要这样做合理,例如 SVG 2 中的 use。
目的: 避免要求作者修改被引用文档,以便为根 元素添加 ID。
负责人: Cameron (ACTION-3417)
状态: 已完成
‘use’
类别:
图形引用元素、可渲染元素、结构元素、结构上外部的元素
内容模型:
以下任意数量的元素,顺序不限:clipPath、 mask、 script、 style
属性:
几何特性:
DOM 接口:

‘use’ 元素 引用另一个元素,其副本 会在文档中 ‘use’ 所在位置渲染。 被引用元素可以是容器元素, 在这种情况下,将使用以 该元素为根的完整 SVG 文档子树的副本。

克隆的内容从 ‘use’ 元素继承样式 并且可以成为用户事件的目标。 但是,这些克隆的元素实例仍与 被引用源 保持关联,并反映原始内容中的 DOM 变更。 此外,在被引用元素作用域内应用的所有样式规则 也会应用于克隆的影子树作用域中。

x、y、width 和 height 几何特性指定被引用元素的位置。 width 和 height 属性 仅当被引用元素 定义视口时才有效(即,如果它是 ‘svg’ 或 ‘symbol’); 如果是,则 ‘use’ 元素上 非 auto 的值会覆盖 该元素上相应几何特性的值。

width 或 height 的负值 是无效的,并且必须被忽略。 如果 width 或 height 为零, 并且这些特性会影响被引用元素, 则该元素的渲染将被禁用。

x 和 y 特性 会影响元素的用户坐标系统。 有关实现细节,请参阅布局一节。

名称 值 初始值 可动画
href URL [URL] (none) 是

对 SVG 文档中 要克隆用于渲染的元素/片段的 URL 引用。

‘use’ 元素 可以通过指定不带 片段的 ‘href’ 值来引用整个 SVG 文档。 此类引用被视为引用被引用文档的 根元素。

请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理。

SVG 2 中新增。 不带片段的 ‘href’ 允许引用整个 SVG 文档 而无需确保其根元素具有 ID。

出于安全原因,用户代理可以限制外部资源文档 。特别是,本规范不允许跨源以及 data URL 资源请求用于 ‘use’。

当设置 ‘href’ 属性时 (或者,在没有 ‘href’ 属性的情况下,设置 ‘xlink:href’ 属性时), 用户代理必须处理 URL。 URL 处理产生的目标元素是 被引用元素,属于 ‘use’。

如果解析 URL 所得的被引用元素 不是 SVG 元素, 则该引用无效,且 ‘use’ 元素处于错误状态。

如果被引用元素是 ‘use’ 元素的(包含影子树的)祖先, 那么这是一个无效的循环引用 并且 ‘use’ 元素 处于错误状态。

否则,用户代理必须生成一个影子树 ,其中包含重用图形,以作为 ‘use’ 元素的内容进行渲染, 如下一节use 元素的影子树中所述。

具有未解析或无效 URL 引用的 ‘use’ 不会被渲染。 为进行边界框计算, 它等同于一个空的容器元素。

5.5.1. use 元素影子树

由 ‘use’ 元素生成的重用图形 是根据影子树定义的。 因此,就交互性和样式继承而言, 它们与 SVG 中其他类型的重用 图形非常不同, 例如 ‘pattern’ 和 ‘marker’ 内容。

影子树中的元素会像 ‘use’ 元素是 容器而它们是其子元素一样进行渲染。 但是,SVG 文档对象模型 (DOM) 仅包含 ‘use’ 元素和 其属性。 SVG DOM 不包含 作为 ‘use’ 元素子元素的元素实例。

支持脚本和文档对象模型的用户代理 必须按照本节中的描述 并遵循 dom 规范 [dom], 或其未来的替代规范,实现use 元素影子树。 相比之下,不支持 动态交互处理模式的用户代理 可能不需要实现影子 DOM 的所有细节。 但是,所有用户代理都必须确保重用图形的布局 和样式继承 以及适用时的声明式动画, 都像实现了影子 DOM 时一样渲染。

讨论 ‘use’ 元素 及其影子树时适用以下定义:

被引用元素
由 ‘href’(或 ‘xlink:href’) 属性在 ‘use’ 元素上指定的元素,或者如果提供的 URL 不包含链接到特定元素 ‘id’ 的目标片段,则为该属性引用的文档的根元素。
被引用文档子树
被引用图形
被引用元素及其所有后代节点。
影子根
一个 ShadowRoot 对象, 它是一种 DocumentFragment 节点, 与宿主 Element 关联, 并包含将用于渲染该宿主的内容。 影子根应遵循 dom 规范 [dom] 或其未来的替代规范实现。
影子宿主
宿主
具有关联影子根的元素; 其用法与 DOM 标准中的宿主定义一致。
影子树
根为影子根的节点树; 其用法与 DOM 标准中的影子 树定义一致。
use 元素影子树
宿主为 ‘use’ 元素的影子树, 其中包含通过克隆被引用图形生成的元素实例。
元素实例
实例
use 元素影子树中的元素, 通过克隆被引用文档子树中对应的元素生成。
实例根
被引用元素的元素实例; 它始终是 ‘use’ 元素影子根的直接子元素。

以下示例和图表说明了当 ‘use’ 元素引用一个组时,这些定义 彼此之间的关系:

<svg>
  <defs>
    <g id="icon">
      <circle/>
      <rect/>
    </g>
  </defs>
  <use href="#icon"/>
</svg>
显示 use 元素的文档树与其影子树之间关系的图表, 并标注所定义的术语。 文档 树 <svg> <defs> <use href="#icon"/> 影子 宿主 被引用文档子树 <g id="icon"> <circle/> <rect/> use 元素 影子树 影子 根 #shadow-root 实例 根 <g> <circle/> 元素 实例 <rect/> 元素 实例 宿主 克隆 自

包含 ‘use’ 元素的文档树与 其use 元素影子树之间的关系。 蓝色虚线箭头表示影子树中的每个元素实例 都是被引用文档 子树中某个元素的克隆。 ‘use’ 元素是 影子宿主, 而实例根是影子根的直接子元素。

当用户代理成功解析 ‘use’ 元素 并识别出被引用元素时, 用户代理必须创建一个 use 元素影子树,其宿主为 ‘use’ 元素本身。 即使 ‘use’ 元素没有 被渲染, 因为它是从不渲染的元素的后代、 因为条件处理, 或者因为它或祖先元素上的 display 特性被设置为 none,也必须创建影子树。

影子树中的每个节点都是来自 被引用文档子树中对应节点的实例。 所有影子节点都源自实例根, 它是被引用元素的实例, 并且其本身是影子根节点的直接子元素。

影子树是开放的(可由脚本检查),但为只读。 任何直接修改影子树中元素、属性和其他节点的尝试 都必须抛出 NoModificationAllowedError。

在use 元素影子树中, ‘script’ 元素 是惰性的(不会执行)。

先前版本的 SVG 将影子树的内容 限制为 SVG 图形元素。 本规范允许克隆任何有效的 SVG 文档子树。 但是,克隆非图形内容 通常不会产生任何可见效果。

如果被引用元素位于外部文件中, 则属性和样式特性中的所有URL 引用 在将值复制到元素实例之前,必须按照生成绝对 URL中的描述转换为绝对 URL。 影子树本身使用与包含它的文档 相同的文档基 URL。

用户代理必须确保 对被引用文档子树的所有变更都 反映到影子树中。 这包括对元素、属性、文本和其他节点的更改。 此外,对被引用图形有效的样式表所作的更改 必须反映为影子树作用域中样式表的更改, 如样式继承一节中进一步所述。

如果 ‘use’ 元素或被引用元素中的任一个发生改变, 导致 ‘use’ 元素的 URL 引用再次变为未解析, 则该 use 元素的整个影子树都会被丢弃。

当 ‘use’ 引用 另一个 ‘use’ 元素,或者引用内容中包含 ‘use’ 元素的另一个元素时, 上述影子 DOM 克隆方法会递归应用。但是,一组 直接或间接引用某个元素 从而产生循环依赖的引用属于无效的循环 引用。 其影子树会产生循环引用的 ‘use’ 元素或 元素实例 处于错误状态,并且用户代理不得渲染它。

5.5.2. 重用图形的布局

‘use’ 元素上的 x、y、width 和 height 特性的值 用于定位重用图形, 并在被引用元素定义嵌套视口时 设置视口大小。 这些特性在 ‘use’ 元素上的作用 与它们在图形元素上的作用, 或与它们在 CSS 框布局中的作用明显不同。

x 和 y 特性定义 一个附加变换 (translate(x,y), 其中 x 和 y 表示相应特性的计算值) 应用于 ‘use’ 元素, 位于使用其他特性指定的任何变换之后 (即,追加到变换列表的右侧)。

出于历史原因, 补充变换应用于 ‘use’ 元素本身, 而不仅仅应用于影子树中的重用内容。 这会影响用于 应用于 ‘use’ 元素 且以 userSpaceOnUse 单位计算的任何遮罩、裁剪路径或滤镜的坐标系统。

要在未变换的坐标空间中应用 userSpaceOnUse 图形效果, 同时使用 x 和 y 定位图形, 作者可以将 ‘use’ 元素嵌套在 ‘g’ 中, 并将图形效果应用于 ‘g’ 元素。

‘use’ 元素上的 width 和 height 特性 在确定实例 根元素上相应特性的使用值时, 会覆盖被引用的 ‘svg’ 或 ‘symbol’ 元素上的相应值。 但是,如果 ‘use’ 元素上该特性的计算值为 auto, 则该特性会针对元素实例正常计算。

因此,这些特性可用于缩放 定义自身坐标系统的图形, 每次重用时均可如此。 因为 auto 是初始值, 如果未在 ‘use’ 元素上显式设置尺寸, 则 ‘svg’ 或 ‘symbol’ 上设置的值将用作默认值。

‘use’ 元素上的 width 和 height 特性 如果被引用元素没有 建立新的视口,则不起作用。 特别是,‘use’ 元素本身并不建立新的视口, 因此不会影响重用图形中百分比的解释。

在所有其他方面, use 元素影子树中元素的 渲染和布局 都像 ‘use’ 元素是其影子内容的容器一样进行。 特别是,除非影子树中的元素建立了新的视口, 否则它们必须绘制在定义 ‘use’ 元素的坐标系统中 (包括任何累积变换)。 这会影响百分比长度的解释, 也会影响使用 userSpaceOnUse 单位的图形效果。

5.5.3. 样式作用域和继承

use 元素影子树与其他影子树一样, 表现出样式封装, 如 CSS 作用域模块 [css-scoping-1] 中所定义。 这意味着影子树中的元素会从其宿主 ‘use’ 元素 继承样式, 但外部文档中定义的样式规则 不会匹配影子树中的元素。 相反,影子树维护自己的样式表列表, 其中的 CSS 规则会与影子树中的元素进行匹配。

呈现属性和 ‘style’ 属性 会像其他属性一样从被引用 图形中的元素克隆 到元素实例中。

当被引用元素 与 ‘use’ 元素来自同一文档时, 相同的文档样式表会同时应用于 原始文档和影子树文档片段。 主文档中样式表的任何更改 也会影响影子树; 通过文档和影子根文档片段的 styleSheets 特性访问的 StyleSheetList 对象 必须相同。 如果 ‘style’ 元素 作为被引用文档子树的一部分被复制, 则元素 实例上的 styleSheet 特性 指向与被引用文档子树中源元素相同的对象。

当被引用元素 来自外部文档时, 处理该文档时生成的样式表对象 应用于影子树,并且是只读的。 样式表中的所有URL 引用, 包括仅片段引用, 都必须相对于包含被引用元素的文档 URL 转换为绝对 URL。 用户代理可以为引用同一外部文档的任何影子树 重用相同的样式表对象。

作用域限定于影子树的样式规则 通常不能影响主文档中的任何元素。 同样,主文档中的样式规则只能 通过改变继承值来影响影子树元素。 但是,CSS 作用域 定义了特殊选择器,用于从影子树内部为宿主元素设置样式, 或根据宿主上下文的变化 调整影子树内的样式 [css-scoping-1]。

影子树作用域内的 CSS 媒体查询 使用与相应“light”文档 相同的设备功能和尺寸进行求值 (即,在递归退出所有嵌套影子树后,包含影子树宿主 ‘use’ 元素 的文档)。

在大多数情况下, 影子树中的元素实例会匹配 与其被引用文档 子树中的源元素相同的样式规则。 但是,如果 CSS 规则使用复杂 选择器 根据元素的祖先或兄弟节点来匹配元素, 而这些祖先或兄弟节点并未作为影子树的一部分被克隆, 则该规则将不再匹配元素实例。 同样,按子索引的伪类 例如 nth-of-type 和 nth-child 可能应用于一个元素而不应用于另一个元素。 这与先前版本 SVG 中 样式克隆的定义方式有所不同。

以下示例展示了保持一致和发生变化的样式匹配规则。 左侧的圆被重用来绘制右侧的圆。 原始圆通过多种方式设置了样式:

  • stroke-width (20) 在圆本身的 呈现属性中设置。
  • stroke-opacity (0.7) 通过 使用匹配圆标签名称的简单选择器的 CSS 规则设置。
  • stroke 颜色 (green) 使用 复杂 CSS 选择器设置,该选择器将圆匹配为 class 为 special 的元素的后代。
  • fill 颜色没有直接设置在 圆上,因此从包含它的 ‘g’ 元素上设置的样式 (blue) 继承。

在 SVG 1.1 样式克隆模型中, 指定样式值 会从原始元素克隆到元素实例。 重用的圆将具有与原始圆相同的样式, 不同之处在于 fill 值将从 ‘use’ (orange) 而不是从 ‘g’ (blue) 继承。

在 SVG 2 要求的影子 DOM 模型中, 重用圆的样式按如下方式计算:

  • stroke-width (20) 呈现 属性被克隆到元素实例。
  • 设置 stroke-opacity (0.7) 的 CSS 规则是克隆到影子树中的 CSS 样式表的一部分;它匹配元素实例的圆标签名称,因此会被应用。
  • 带有复杂选择器的 CSS 规则也是克隆样式表的一部分,但它不会 匹配圆的元素实例,因为该实例不是 class 为 special 的元素的后代;相反,圆上的 stroke 颜色从宿主 ‘use’ 元素 (purple) 继承。
  • fill 颜色仍未直接设置,因此 再次从宿主 ‘use’ 元素继承。

因此,重用的圆在填充颜色(因为它从 不同元素继承)和描边颜色(因为复杂选择器不再匹配)两方面都与原始圆不同。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100" viewBox="0 0 200 100">
  <title>样式继承和 use 元素</title>
  <desc>
    两个圆,其中一个是另一个经过重新设置样式的克隆。
    此文件演示了这样一种情况:
    SVG 2 中的影子 DOM 样式匹配规则
    与 SVG 1.1 的样式克隆规则产生不同效果。
    左侧的原始圆
    应具有蓝色填充
    和绿色描边。
    在符合规范的 SVG 1.1 用户代理中,
    右侧的重用圆
    应具有橙色填充和绿色描边。
    在符合规范的 SVG 2 用户代理中,
    重用圆应具有橙色填充和紫色描边。
    在所有情况下,
    描边都应为部分透明
    且宽度为 20 个单位,
    相对于圆的总直径 100 个单位。
  </desc>
  <style type="text/css">
    circle          { stroke-opacity: 0.7; }
    .special circle { stroke: green; }
    use             { stroke: purple;
                      fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40"
             stroke-width="20" />
  </g>
  <use xlink:href="#c" x="100" />
</svg>
示例 Use-changed-styles — 一个 'use' 元素复制一个 'circle',并演示各种样式匹配规则

示例 Use-changed-styles

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

先前版本的 SVG 并未明确动态伪类 (例如 :hover) 应如何应用于元素实例。 影子树模型要求所有此类伪类 根据用户正在与哪个元素交互,独立匹配 元素实例或其被引用文档子树中的源元素。

在 ‘use’ 元素上指定 'visibility:hidden' 并不能保证 被引用内容不会被渲染。 与 display 或 opacity 特性不同, visibility 特性不会 直接应用于容器元素, 因此也不会直接应用于 ‘use’ 元素。 因为 visibility 通常会继承, 隐藏 use 元素通常会隐藏子内容, 但并非一定如此。 如果影子树中的任何图形元素指定了 'visibility:visible',那么即使 ‘use’ 元素指定 'visibility:hidden',该 元素也将可见。

在以下示例中,关键样式规则如下:

.dark {
  visibility: hidden;
}
.eyes {
  visibility: visible;
}
svg:hover .dark, svg:focus .dark {
  visibility: visible;
}
                

"dark" class 设置在包含 ‘use’ 元素的组上, 因此重用图形的所有部分都会继承 hidden 可见性设置, 但 class 为 "eyes" 的子树除外,其中它被重置为 visible。 当悬停或聚焦图形时,隐藏效果会被移除。

黑色背景上某个生物 symbol 的多个 use 副本;use 元素具有 visibility: hidden,但生物的眼睛具有 visibility: visible。

示例 Use-visibility-hidden,默认样式

浅绿色背景上某个兔子 symbol 的多个 use 副本;每只兔子的毛色不同,但都有相同的粉色鼻子和白色蓬松尾巴。

示例 Use-visibility-hidden,交互样式

以此查看示例 为 SVG

该示例还演示了其他样式特性的继承 (fill 和 stroke) 这些特性指定在 ‘use’ 元素上, 以及如果 symbol 内的任何元素 指定显式值时这些值同样不会被使用(例如粉色的鼻子和耳朵以及白色尾巴)。

5.5.4. use 元素影子树中的动画

Web Animations API [web-animations-1] 和 SVG 动画规范 [svg-animation] 定义了在不直接操作 DOM 特性的情况下 对目标元素上的属性和样式进行动画处理的非 CSS 方式 (有关详细信息,请参阅动画附录)。 实现这些功能的用户代理 必须确保所有 应用于被引用文档 子树中元素的动画 也会应用于该元素在 use 元素影子树中的实例, 如本节所述。

通过直接操作 被引用 图形中元素的属性创建的脚本动画 (包括 ‘style’ 属性或其 IDL 特性) 将以与任何其他 DOM 操作相同的方式传播到 影子树中的元素实例。

使用 CSS 应用的动画效果 将与其他样式表规则一起被复制, 遵循 样式作用域和继承一节中指定的过程。

use 元素影子树中的所有动画 都使用与宿主 ‘use’ 元素相同的文档时间线, 无论被引用元素 来自同一文档还是外部文档。

对于使用 Web Animations API 方法 [web-animations-1] 应用的动画效果, 如果动画目标是被引用文档子树中的元素, 并且该元素对应于影子树中的元素实例, 则用户代理必须构造一个ShadowAnimation, 其源是该 Animation 对象, 目标是该元素实例。 如果该元素在不同树中有多个实例, 则会有多个影子动画,每个实例一个。

用户代理必须为影子树生成时 所有有效的 Web Animations API 动画 (包括待处理和冻结的动画) 创建这样的ShadowAnimation, 并为影子树存在期间应用的任何新动画创建。 用户代理不得为 CSS 动画或动画元素 创建ShadowAnimation 对象 (因为这些会单独复制)。

作为接口定义的一部分, ShadowAnimation 是只读的, 并且必须反映其 sourceAnimation 的任何变化。

任何直接将新动画应用于 use 元素影子树内只读元素实例(或 伪元素) 目标的尝试 都必须抛出 NoModificationAllowedError。

对于每个以 被引用文档子树中的元素 为目标的动画 元素 [svg-animation], 用户代理必须确保等效的动画元素 在use 元素影子树中生效。 如果动画元素本身是被引用文档子树的一部分, 那么通过为动画元素创建 元素实例,这会自然发生。 否则,用户代理必须为动画元素生成一个元素实例 ,其效果与它是影子树中的节点时相同。 这些生成动画元素的有效文档顺序 必须与其源元素在被引用文档子树中的文档顺序相同。

每个动画元素或实例只能影响 同一节点树(影子或 light)中的目标元素, 无论目标指定是隐式的(父元素) 还是显式的(对某个元素 ‘id’ 的 URL 交叉引用)。 通过这种方式,动画元素 与目标元素之间的一对一关系得以保留。

‘id’ 属性 与任何其他属性一样,从源元素克隆到元素实例; 这并不与 ‘id’ 必须唯一的要求冲突, 因为克隆和原始元素位于不同的节点树中。

文档或影子树中的所有动画元素, 如果被定时为响应另一个由其 ‘id’ 属性标识的元素 上的事件开始或结束, 则当具有该 ‘id’ 的元素的任何实例 接收到相同事件时,也必须开始或结束。 这与被引用元素上的事件侦听器 同样监听该元素实例上的事件的方式一致, 如 use 元素影子树中的事件处理一节所述。 此行为不适用于仅由事件 而不是由 ‘id’ 定义的动画开始或结束时间 (因此隐式监听目标元素上的事件); 在这种情况下,每个动画元素只由其自己的目标触发。

当动画元素的实例 在影子树中生成时, 如果被引用文档子树中的源元素存在关联的活动动画 (包括冻结动画), 并且启动该动画的定时事件在实例存在时也会启动该实例, 则必须启动元素实例的动画, 并将其开始时间 在文档时间线中向前回调 以匹配源元素的时间。

在许多情况下, 本节的要求意味着 元素实例及其源元素 将同步进行动画。 如果动画纯粹基于时间, 或者响应用户与由其 ‘id’ 引用的元素 交互而开始和结束,就会如此。 但是,如果动画由目标元素 上的用户交互事件(隐式)触发, 则只有接收到交互事件的元素或元素实例 会显示动画。

这是相对于先前版本 SVG 的变化, 先前版本要求源元素上的所有动画都被镜像, 无论用户交互如何, 但没有明确指导 如何响应与元素实例的用户交互。 此更改确保使用动画元素声明的交互式动画 与交互式 CSS 样式和 CSS 动画的行为方式相同。

为了创建这样的动画: 当任何实例或原始元素 接收到事件时应用于所有实例, 请显式指定元素的 ‘id’:


<set href="#target" begin="mouseover" ... />
  <!-- 仅影响鼠标悬停的元素 -->

<set href="#target" begin="target.mouseover" ... />
  <!-- 影响具有 id 'target' 的元素的所有实例,
          在所有 light 和影子节点树中,
          当鼠标悬停在其中任何一个上时 -->
  

5.5.5. use 元素影子树中的事件处理

use 元素影子树中的元素 既可以监听 DOM 事件,也可以成为 DOM 事件的目标。 事件重定向提供封装, 因此当事件从影子树冒泡到 light 树时, 影子 DOM 结构的细节会被隐藏。

事件重定向是 SVG 2 中新增的。 它与 Shadow DOM 规范、 现有实现 以及仅关注主 DOM 中元素的作者预期保持一致。

在被引用图形中的元素 上定义的任何事件侦听器 也必须在同一捕获阶段监听该元素在use 元素影子树中的每个实例上的相同事件。 这包括使用事件属性分配的事件侦听器 (它们会像任何其他 DOM 属性一样被复制) 以及使用 addEventListener 方法分配的事件侦听器。 用户代理必须确保每个元素实例的 事件侦听器列表保持同步,以匹配 其被引用文档 子树中的源元素。 不能直接将事件侦听器分配 给use 元素影子树中的只读元素实例。 任何尝试向此类元素添加事件侦听器的操作 都必须抛出 NoModificationAllowedError。

use 元素影子树中的事件 按照影子树 事件路径和事件重定向算法 [DOM] 进行分派和冒泡。

一般而言,use 元素影子 树的事件路径 从事件目标元素的祖先构建, 一直到影子根, 然后是宿主 ‘use’ 元素 及其一直到文档窗口的事件路径。 这意味着,在捕获阶段, 事件从窗口经由常规文档树传播 到 ‘use’ 元素, 然后到影子根对象, 再向下穿过影子树 (或递归穿过多个影子树) 到达事件目标元素。 在冒泡阶段,事件沿相反方向传递, 从影子树元素到影子根, 然后到 ‘use’ 元素及其祖先。

事件重定向算法确保, 从 ‘use’ 元素 或其祖先上的事件侦听器的角度来看, 所有以影子树中的元素实例为目标的事件 都改为以 ‘use’ 元素本身为目标。 如果事件同时具有 target 和 relatedTarget, 且这两个特性都会被重定向 为指向同一个 ‘use’ 元素, 则该事件完全不会传播到影子树之外。 例如, 当焦点从影子树中的一个元素移动到另一个元素时,就会发生这种情况。 某些其他事件类型也被限制为 不会传播到创建它们的影子树之外。

相比之下,在事件 通过影子树传播时处理该事件的事件侦听器 (因为该侦听器已添加到 被引用文档 子树中的源元素) 接收到事件时,其 target 将指向影子树中的只读元素实例。

5.6. 条件处理

5.6.1. 条件处理概述

SVG 包含一个 ‘switch’ 元素以及 ‘requiredExtensions’ 和 ‘systemLanguage’ 属性,以 提供一种 根据给定用户代理的能力或用户语言 指定替代视图的能力。

‘requiredExtensions’ 和 ‘systemLanguage’ 属性充当 测试,并 求值为 true 或 false。‘switch’ 会渲染第一个 所有这些属性测试均为 true 的子元素。如果 未指定给定属性,则 假定值为 true。

当一个元素由于条件处理而被排除时, 会将其视为 display 特性的使用值为 none。 与 display 特性类似,条件 处理 属性仅影响元素的直接渲染,并且 不会阻止其他元素成功引用这些元素 (例如通过 ‘use’)。

因此:

先前版本的 SVG 包含第三个条件处理属性, requiredFeatures。 此属性旨在允许作者为 仅实现 SVG 规范部分功能的用户代理提供回退行为。 遗憾的是,该属性糟糕的规范定义和实现使其无法可靠地 用作功能支持测试。

5.6.2. 定义

条件 处理属性
条件处理属性是控制其所在元素是否 被处理的属性。大多数元素(但并非所有元素) 都可以指定条件处理属性。 有关详细信息,请参阅条件处理。 SVG 2 中定义的条件处理属性是 ‘requiredExtensions’ 和 ‘systemLanguage’。

5.6.3. ‘switch’ 元素

‘switch’
类别:
容器元素、可渲染元素
内容模型:
以下任意数量的元素,顺序不限:a、foreignObject、g、image、svg、switch、text、use
属性:
DOM 接口:

‘switch’ 元素 按顺序求值 其直接子元素上的 ‘requiredExtensions’ 和 ‘systemLanguage’ 属性,然后处理并渲染第一个这些 属性求值为 true 的子元素。所有其他子元素都将被跳过,因此 不会渲染。如果子元素是容器元素,例如 ‘g’,则整个子树 要么被处理/渲染,要么 被跳过/不渲染。

在 SVG 中,对 ‘systemLanguage’ 属性求值时, ‘switch’ 元素后代元素的 求值顺序必须如同 SMIL 规范 [SMIL] 中定义的 'allowReorder' 属性 始终具有值 'yes'。

请注意,特性 display 和 visibility 的值对 ‘switch’ 元素 的处理没有影响。特别是,将 display 设置为 none 于 ‘switch’ 元素的子元素上, 对与 ‘switch’ 元素处理相关的 true/false 测试没有影响。

‘switch’ 元素 不会影响 ‘script’ 和 ‘style’ 元素的处理。

有关更多信息和示例,请参阅 嵌入外部 对象类型。

5.6.4. ‘requiredExtensions’ 属性

‘requiredExtensions’ 属性定义所需语言扩展的列表。 语言扩展是用户代理中 超出本规范所定义功能集的能力。每个 扩展都由一个URL 引用标识。

名称 值 初始值 可动画
requiredExtensions 空格 分隔的标记集合 [HTML] (none) 否

该值是一个URL 引用列表, 用于标识所需扩展,各个 值之间以空白分隔。它确定所有命名的 扩展是否都受用户 代理支持。如果给定的所有扩展都受支持,则 该属性求值为 true;否则,当前 元素及其子元素会被跳过,因此不会 被渲染。

如果给定的URL 引用本身包含空白,则该 空白必须进行转义。

如果属性不存在,则其隐式求值为 "true"。如果向 属性 ‘requiredExtensions’ 提供 null 字符串或空字符串值,则该 属性求值为 "false"。

‘requiredExtensions’ 通常 与 ‘switch’ 元素结合使用。如果 ‘requiredExtensions’ 用于 其他 情况,则它表示给定元素是否 渲染的简单开关。

扩展的 URL 名称应包含版本 信息,例如 "http://example.org/SVGExtensionXYZ/1.0", 以便脚本作者能够区分给定扩展的不同 版本。

5.6.5. ‘systemLanguage’ 属性

名称 值 初始值 可动画
systemLanguage 逗号 分隔的标记集合 [HTML] (none) 否

该值是一个逗号 分隔的标记集合,其中每个标记都必须是 Language-Tag 值,如 BCP 47 中所定义 [BCP47]。

要对值为 V 的 ‘systemLanguage’ 属性进行求值:

  1. 令 tags 为将 V 解析为 逗号 分隔的标记集合 [HTML] 的结果。

  2. 从 tags 中移除任何为空字符串的标记。

  3. 如果 tags 为空,则返回 false。

  4. 令 user languages 为用户按顺序排列的首选语言列表。

  5. 对于 tags 中的每个 tag,以及 user languages 中的每个 user-lang:

    1. 如果 tag 与 user-lang ASCII 大小写不敏感 匹配,则返回 true。

    2. 如果 user-lang 是 tag 的 ASCII 大小写不敏感 前缀,并且 tag 中紧跟在该前缀 之后的码点是 U+002D HYPHEN-MINUS (-),则返回 true。

  6. 返回 false。

如果属性不存在,则其隐式求值为 "true"。

这种前缀匹配规则的使用并不意味着 语言标签以这样的方式分配给语言,即 如果用户理解具有 某个标签的语言,那么该用户也一定理解所有 标签以该标签为前缀的语言。

此前缀规则只是允许在 情况合适时使用前缀标签。

实现说明:当向用户提供语言 偏好选择时,实现者应考虑到 用户并不熟悉上述 语言匹配的细节,并应提供 适当的指导。例如,用户可能认为选择 "en-gb" 后,如果英式英语不可用,他们就会获得任何类型的英语 文档。用于设置用户偏好的用户 界面应引导用户 添加 "en" 以获得最佳匹配行为。

面向多个受众的内容可以列出 多种语言。例如,同时以原始毛利语和英语 版本呈现的内容,应使用:

<text systemLanguage="mi, en"><!-- 内容放在这里 --></text>

但是,仅仅因为 放置 ‘systemLanguage’ 测试 属性的对象内存在多种语言,并不意味着它面向 多种语言受众。例如,初学者 语言教材,例如 "A First Lesson in Latin",显然 是供能够阅读英语的受众使用的。在 这种情况下, ‘systemLanguage’ 测试属性 应仅包含 "en"。

‘switch’ 元素按顺序求值每个子元素的 ‘systemLanguage’ 属性,并仅渲染第一个匹配项。最后一个没有 ‘systemLanguage’ 的子元素 充当通配项,确保无论用户的 语言偏好如何,始终都会显示内容。

<switch>
  <text systemLanguage="fr" x="10" y="30">Bonjour</text>
  <text systemLanguage="ja" x="10" y="30">こんにちは</text>
  <text x="10" y="30">Hello</text>
</switch>

语言偏好为 "fr" 的用户会看到 "Bonjour"。语言偏好为 "ja" 的用户 会看到 "こんにちは"。其他任何用户都会看到通配项 "Hello"。

前缀匹配规则允许作者提供逐渐更具体的 语言变体。更具体的标签应放在前面,因为 ‘switch’ 元素会渲染第一个匹配的子元素。

<switch>
  <text systemLanguage="zh-Hans" x="10" y="30">简体中文</text>
  <text systemLanguage="zh-Hant" x="10" y="30">繁體中文</text>
  <text systemLanguage="zh" x="10" y="30">中文</text>
</switch>

语言偏好为 "zh-Hans-CN" 的用户会匹配第一个子元素, 因为 "zh-Hans" 是 "zh-Hans-CN" 后跟 "-" 的 ASCII 大小写不敏感 前缀。 使用 "zh-TW" 的用户不会匹配 "zh-Hans" 或 "zh-Hant",但会匹配 "zh" 回退项。

创作说明:作者应意识到,如果多个 替代语言对象包含在 ‘switch’ 中,并且没有任何一个 匹配,则可能导致没有内容 显示。因此建议在此类 ‘switch’ 的末尾包含一个 在所有情况下均可接受的 "catch-all" 选项。

‘systemLanguage’ 通常 与 ‘switch’ 元素结合使用。如果 ‘systemLanguage’ 用于其他 情况,则它表示给定 元素是否渲染的简单开关。

5.7. ‘desc’ 和 ‘title’ 元素

5.7.1. 定义

描述性元素
为其父元素提供补充描述信息的元素。 具体而言,以下元素是描述性元素: ‘desc’、‘metadata’ 和 ‘title’。

基于 ‘lang’ 属性的多语言描述性文本选择功能被添加,以支持 ‘desc’ 和 ‘title’ 元素的 国际化。

SVG 2 中新增。在 Rigi Kaltbad 面对面会议上决议添加 'lang'。 已删除限制 'desc' 和 'title' 元素数量的文本。状态:已完成。

SVG 文档中的任何容器元素或图形元素 都可以有零个或多个 ‘desc’ 和/或 ‘title’ 元素作为子元素, 其内容为文本。‘desc’ 和 ‘title’ 元素 不会作为图形的一部分进行视觉渲染。 ‘title’ 和 ‘desc’ 元素的 display 值 必须始终由用户代理样式表 设置为 none, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性。

多个同级 ‘desc’ 或 ‘title’ 元素 必须具有 不同的语言, 如描述性元素或其祖先上的 ‘lang’ 属性(或 xml:lang 属性)所定义。 用户代理必须选择每种类型中其语言最 匹配用户所设置语言偏好的元素。 具有空字符串语言标签的描述性元素 (表示没有语言,例如由 emoji 符号组成的文本替代项) 对任何用户都是最低优先级匹配,低于所有用户指定的语言偏好。 如果存在多个同样有效的匹配,则应使用第一个匹配。 如果 'title' 或 'desc' 均不存在匹配,则必须选择该类型的第一个元素。

以下示例展示了重用星形图标上的替代语言标题, 内联于 HTML 文档中。 该示例假定整个 HTML 文档已正确声明语言为 en(未指定国家代码的英语)。

<svg>
  <use href="#star">
    <title>Favourite</title>
    <title lang="en-us">Favorite</title>
    <title lang="nl">Favoriet</title>
    <title lang="">★</title>
  </use>
</svg>
  

第一个 title 元素继承文档的语言(en);其他 元素各自显式声明了语言。 如果用户的首选语言(在所提供的语言中)是美式英语,则图标标题为 美式拼写 "Favorite"。 如果用户的首选语言是荷兰语,则图标标题为 "Favoriet"。 如果用户的偏好列表中通用英语的优先级高于荷兰语,则标题为 英式拼写 "Favourite"。 如果用户既不理解荷兰语也不理解英语,则标题将是星形符号 字符——这并不理想(大多数屏幕阅读器会将其读作 "black star" 的本地化版本),但总比完全没有文本替代项好。

作者应注意,支持 SVG 1.1 的用户代理 如果尚未实现多语言描述性文本, 通常会选择每种类型的第一个元素,而不考虑用户偏好。 SVG 1.1 用户代理也可能无法识别不是其父元素第一个 子元素的 title 元素, 或其前面的同级元素并非其他描述性元素的 desc 元素。

使用 多个 ‘title’ 或 ‘desc’ 元素来 提供本地化信息的功能存在风险,目前没有已知实现。

用户代理必须使所选 'title' 和 'desc' 元素的文本内容可供平台 无障碍 API 使用,作为父元素名称和描述计算的一部分,如 SVG 无障碍 API 映射 [SVG-AAM]规范中所定义。

将任何 'title' 或 'desc' 元素作为已渲染元素的直接子元素包含,表示该已渲染元素在 图形中具有语义重要性。 作者不应该,并且SVG 生成器不得包含 没有文本内容或只有空白文本内容的空 'title' 或 'desc' 元素, 因为这会导致向辅助技术用户呈现无名称对象。

如果单个图形元素本身没有意义, 则应改为为描述有意义对象的最近容器元素提供 替代文本。 作者应使用分组(‘g’)元素将其绘图元素构造成 有意义的对象,并使用 ‘title’ 为这些组命名。 相反,如果容器对象仅用于应用样式或布局, 既不定义对象,也不提供有意义的分组结构, 则不需要替代文本。

父元素未渲染的描述性文本元素可以 被作者或创作工具用作参考信息;但作者应注意,此数据通常 无法提供给通过辅助技术查看图形的最终用户。不过,未渲染元素可以作为已渲染元素的 无障碍名称或描述的一部分被引用(如 SVG-AAM 中所定义),递归计算将使用 被引用元素的描述性子元素。

描述和标题元素可以包含来自 其他命名空间的带标记文本,并使用标准 XML 机制指明命名空间。 但是,作者不应依赖此类标记为替代文本提供含义; 目前仅要求向辅助技术公开纯文本内容。

HTML 解析器处理 ‘title’ 和 ‘desc’ 中所有标记的方式 与处理 HTML 片段中的标记相同; 大多数元素将被分配到 HTML 命名空间。

用户代理可以使用 ‘title’ 中的标记 来影响标题(例如工具提示)的视觉呈现, 但并不要求这样做。

‘title’
类别:
描述性元素、从不渲染的元素
内容模型:
任意元素或字符数据。
属性:
DOM 接口:

‘title’ 子 元素表示该元素的简短文本替代。

对于链接,这可以是标题或目标资源的描述;对于 图像或绘图对象,它可以是图形的简短 描述;对于交互式内容,它可以是使用 该元素的标签或说明;等等。

如果绘图元素也有可见标签(例如使用 ‘text’ 元素),作者不应在 ‘title’ 元素中提供 冗余信息。 相反,视觉标签应与绘图元素 使用 ‘aria-labelledby’ 属性关联。

交互式用户代理应根据 用户交互提供 ‘title’ 元素的纯文本内容,并采用 与平台约定一致的方式; 现有用户代理通常会在悬停父元素时将 ‘title’ 元素渲染为 工具提示。

作者应为独立 SVG 文档中的根 svg 元素提供 ‘title’ 子元素。由于用户经常脱离上下文查看文档, 作者应提供上下文丰富的标题。因此,不应使用 "Introduction" 这样提供上下文背景很少的标题, 而应改为提供 "Introduction to Medieval Bee-Keeping" 这样的标题。出于无障碍原因,用户代理应始终使 根 svg 元素的 ‘title’ 子元素内容可供 用户使用。 不过,这通常通过与嵌套 SVG 和图形 元素所使用的工具提示不同的方式完成,例如显示在浏览器标签页中。

‘desc’
类别:
描述性元素、从不渲染的元素
内容模型:
任意元素或字符数据。
属性:
DOM 接口:

‘desc’ 元素 表示元素的更详细文本 信息,例如描述。这通常会向辅助 技术公开,以提供更详细的信息,例如图形视觉外观的描述, 或帮助解释复杂小部件的功能。它通常不会提供给其他 用户,因此不应将其用于必要说明。

作者可以使用 ‘aria-describedby’ 属性 将详细信息(包括可见文本)与图形的一部分关联起来 (位于被描述元素或父容器上), 其值是对包含描述的一个或多个 SVG 或 HTML 元素的 ID 引用。 ‘aria-describedby’ 属性在提供描述时优先于 子 ‘desc’ 元素。 如果元素同时具有可见描述和提供补充 信息的子 ‘desc’ 元素, 作者应显式地将元素自身的 ‘id’ 包含在其自己的 ‘aria-describedby’ 列表中,以便将两个描述连接起来。

5.8. ‘metadata’ 元素

与 SVG 内容一起包含的元数据应 在 ‘metadata’ 元素中指定。‘metadata’ 的内容应是来自 其他 XML 命名空间的元素,这些命名空间中的元素 应以符合 XML 中的命名空间 推荐标准 [xml-names] 的方式表达。

SVG 2 删除了要求以任何特定方式组织 metadata 元素的建议。

‘metadata’
类别:
描述性元素、从不渲染的元素
内容模型:
任意元素或字符数据。
属性:
DOM 接口:

元数据内容不会被直接渲染; ‘metadata’ 元素的 display 值 必须始终由用户代理样式表 设置为 none, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性。

以下示例说明如何在 SVG 文档中包含元数据。该示例使用 Dublin Core 1.1 版模式。 (也可以使用其他与 XML 兼容的元数据语言,包括 不基于 RDF 的语言。)

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
    xmlns = 'http://www.w3.org/2000/svg'>
    <desc xmlns:myfoo="http://example.org/myfoo">
      <myfoo:title>这是一份财务报告</myfoo:title>
      <myfoo:descr>全局描述使用来自
        <myfoo:emph>myfoo</myfoo:emph> 命名空间的标记。</myfoo:descr>
      <myfoo:scene><myfoo:what>widget $growth</myfoo:what>
      <myfoo:contains>$three $graph-bar</myfoo:contains>
        <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
   </desc>
    <metadata>
      <rdf:RDF
           xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
           xmlns:dc = "http://purl.org/dc/elements/1.1/" >
        <rdf:Description about="http://example.org/myfoo"
             dc:title="MyFoo Financial Report"
             dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
             dc:publisher="Example Organization"
             dc:date="2000-04-11"
             dc:format="image/svg+xml"
             dc:language="en" >
          <dc:creator>
            <rdf:Bag>
              <rdf:li>Irving Bird</rdf:li>
              <rdf:li>Mary Lambert</rdf:li>
            </rdf:Bag>
          </dc:creator>
        </rdf:Description>
      </rdf:RDF>
    </metadata>
</svg>

5.9. HTML 元数据元素

对于支持 HTML 的用户代理,SVG 文档中必须支持以下 HTML 元素(位于 HTML 命名空间中):

请注意,base 元素会影响文档中的所有 URL 值,包括例如绘制服务器引用或 ‘use’ 元素引用。 但是,在处理 URL 引用 以标识特定目标元素时, 用户代理必须始终将生成的绝对 URL 与当前文档基 URL 进行比较, 以确定它是否为同文档 URL 引用。 这样,无论文档基 URL 如何变化, 对同一文档中元素仅使用目标片段的引用仍然有效。

5.10. 外部命名空间和私有数据

SVG 允许在 SVG 内容中的任何位置 包含来自外部命名空间的元素。 一般而言,SVG 用户代理 必须将未知的外部命名空间元素包含在 DOM 中, 但会忽略它们并将其排除在渲染之外。

值得注意的例外情况在嵌入内容章节的 嵌入外部对象 类型中描述。

此外,SVG 允许在任何 SVG 元素上包含来自 外部命名空间的属性。 SVG 用户代理必须 将未知属性包含在 DOM 中,但在其他方面应忽略 未知属性。

作者应注意,未知的带命名空间元素和属性 不会被 HTML 解析器按这种方式解析。 相反,命名空间前缀将包含在标签名或属性名中, 元素将放置在父元素的命名空间中,而属性放置在默认命名空间中。

为了以一种在 XML 和 HTML 文档中都能得到一致解析的方式 添加自定义属性, 作者可以使用‘data-*’ 属性。 如果这些属性所编码的信息与文档中的其他任何元素无关, 则可以将它们添加到 SVG ‘metadata’ 元素中。

SVG 包含外部命名空间的能力可用于 以下目的:

例如,业务图形创作应用程序 可能希望在 SVG 文档中包含一些私有数据, 以便在重新读取时正确重建图表(本例中为 饼图):

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
     xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <myapp:piechart xmlns:myapp="http://example.org/myapp"
                    title="按地区划分的销售额">
      <myapp:pieslice label="北部地区" value="1.23"/>
      <myapp:pieslice label="东部地区" value="2.53"/>
      <myapp:pieslice label="南部地区" value="3.89"/>
      <myapp:pieslice label="西部地区" value="2.04"/>
      <!-- 其他私有数据放在这里 -->
    </myapp:piechart>
  </defs>
  <desc>此图表包含另一个命名空间中的私有数据
  </desc>
  <!-- 这里将放置实际的 SVG 图形元素,
       用于绘制饼图 -->
</svg>

5.11. 通用属性

5.11.1. 定义

核心属性
核心属性是可以在 任何 SVG 元素上指定的属性。 核心属性是 ‘id’、‘tabindex’、‘autofocus’、‘lang’、‘xml:space’、‘class’ 和 ‘style’,以及所有 自定义数据属性。

5.11.2. 所有元素通用的属性:‘id’

‘id’ 属性可用于 所有 SVG 元素:

名称 值 初始值 可动画
id (见下文) (none) 否

必须反映元素的 ID [DOM]。 ‘id’ 属性 在节点树中必须唯一, 不得为空字符串, 并且不得包含任何空白字符。

为使 ‘id’ 属性在 XML 文档中 有效,还适用其他要求, 如相关 XML 版本的规范所定义。 独立 SVG 文档使用 XML 1.0 语法 [xml], 其中规定有效的 ‘id’ 值是XML 名称标记。 有效的 XML 1.0 名称仅包含指定字符(字母、数字和少量标点 符号), 并且不能以数字、句点 (.) 字符或连字符减号 (-) 字符开头。

无论 XML 是否有效,用户代理都应处理 SVG 文件中的 ‘id’ 值。

作者应避免使用在作为 URL 目标片段使用时会被解析 为SVG 视图规范 或基本媒体片段的 ‘id’ 值。

5.11.3. ‘lang’ 和 ‘xml:lang’ 属性

‘lang’ 属性(不属于任何命名空间)指定 元素内容以及 元素任何包含文本的属性的主要语言。

XML 命名空间中的 ‘lang’ 属性在 XML [xml] 中定义。

如果元素上省略了这些属性,则此元素的语言与 其父元素的语言相同(如果存在父元素)。

XML 命名空间中的 ‘lang’ 属性可以用于 XML 文档中的 SVG 元素。 如果不属于任何命名空间的 ‘lang’ 属性和 XML 命名空间中的 ‘lang’ 属性 都指定在同一元素上,则按 ASCII 大小写不敏感方式比较时,它们必须具有完全相同的值。

如果不属于任何命名空间的 ‘lang’ 属性和 XML 命名空间中的 ‘lang’ 属性 都设置在一个元素上,则用户代理必须使用 XML 命名空间中的 ‘lang’ 属性,并且 在确定元素语言时,必须忽略不属于任何命名空间的 ‘lang’ 属性。

名称 值 初始值 可动画
lang Language-Tag [ABNF] (none) 否

‘lang’ 属性指定元素 内容以及 元素任何包含文本的属性的主要语言。其值必须是有效的 BCP 47 语言 标签, 或空字符串。将属性设置为空字符串表示主要语言 未知。 [BCP47]。

5.11.4. ‘xml:space’ 属性

SVG 2 要求: 弃用使用 ‘xml:space’ 影响文本布局的做法,改用 ‘white-space’ 特性。
决议: 我们从 SVG 2 中移除 xml:space,并 从 SVG 1.1 测试套件中移除相关测试。
目的: 与 CSS 保持一致。
负责人: Chris (ACTION-3004, 已完成; 以及 ACTION-3005, 已完成)
状态 已完成。
名称 值 初始值 可动画
xml:space (见下文) default 否

已弃用的 XML 属性,用于指定字符数据中的空白是否 保留。唯一可能的值 是字符串 'default' 和 'preserve',其中不含 空白。请参阅 可扩展标记语言 (XML) 1.0 推荐标准 [xml],以及 SVG 中关于 空白 处理的讨论。

新内容应改用 white-space 特性。

5.11.5. ‘tabindex’ 属性

名称 值 初始值 可动画
tabindex 有效整数 [HTML] (none) 否

此内容属性允许作者控制元素是否可获得焦点、是否 应当可通过 顺序焦点导航到达,以及该元素在顺序焦点 导航中的相对顺序。

名称 "tab index" 来源于通常使用 "tab" 键在可获得焦点的元素之间导航。术语 "tabbing" 指通过顺序焦点导航 在可到达的可获得焦点元素之间向前移动。

5.11.6. ‘autofocus’ 属性

名称 值 初始值 可动画
autofocus 布尔属性 [HTML] (none) 否

此内容属性允许作者请求一个可获得焦点的元素 在连接到文档后获得焦点。有关详细信息,请参阅 HTML 规范中的 autofocus。

如果元素本身尚不可获得焦点,则该属性不起作用。

5.11.7. ‘data-*’ 属性

所有 SVG 元素都支持 自定义数据 属性, 即不属于任何命名空间且名称以字符串 "data-" 开头的属性。 请参阅 HTML 规范中的自定义数据属性 要求。

5.12. WAI-ARIA 属性

5.12.1. 定义

ARIA 属性
这些是在 WAI-ARIA 中定义的属性, 包括 WAI-ARIA 状态和特性 以及 role 属性。 请参阅 WAI-ARIA 角色定义、WAI-ARIA 图形模块的图形角色, 以及 WAI-ARIA 支持的状态和 特性。 aria 属性是 ‘aria-activedescendant’、 ‘aria-atomic’、 ‘aria-autocomplete’、 ‘aria-busy’、‘aria-checked’、 ‘aria-colcount’、 ‘aria-colindex’、 ‘aria-colspan’、 ‘aria-controls’、 ‘aria-current’、 ‘aria-describedby’、 ‘aria-details’、 ‘aria-disabled’、 ‘aria-dropeffect’、 ‘aria-errormessage’、 ‘aria-expanded’、 ‘aria-flowto’、 ‘aria-grabbed’、 ‘aria-haspopup’、 ‘aria-hidden’、 ‘aria-invalid’、 ‘aria-keyshortcuts’、 ‘aria-label’、‘aria-labelledby’、 ‘aria-level’、‘aria-live’、‘aria-modal’、‘aria-multiline’、 ‘aria-multiselectable’、 ‘aria-orientation’、 ‘aria-owns’、‘aria-placeholder’、 ‘aria-posinset’、 ‘aria-pressed’、 ‘aria-readonly’、 ‘aria-relevant’、 ‘aria-required’、 ‘aria-roledescription’、 ‘aria-rowcount’、 ‘aria-rowindex’、 ‘aria-rowspan’、 ‘aria-selected’、 ‘aria-setsize’、 ‘aria-sort’、‘aria-valuemax’、 ‘aria-valuemin’、 ‘aria-valuenow’、 ‘aria-valuetext’ 和 ‘role’。

请注意,上述 ARIA 属性列表可能会被未来的 WAI-ARIA 规范扩展。

5.12.2. Role 属性

任何可渲染元素都可以指定 ARIA role 属性; role 属性在未渲染元素上会被忽略。 如果指定,该属性的值必须是一个空格 分隔的标记集合,表示该元素所属的各种 WAI-ARIA 角色。 这些标记是 角色定义 ([wai-aria],第 5.4 节)和图形角色 ([graphics-aria-1.0],第 4 节)中定义的角色值。

分配给 SVG 元素的 WAI-ARIA 角色是在 role 属性 按空格拆分后生成的标记列表中找到的第一个有效 角色。 有效角色是已识别、非抽象且允许 用于该元素类型的角色。

名称 值 初始值 可动画
role 空格 分隔的标记集合 [HTML] (见下文) 否

‘role’ 属性 必须是一个 空格 分隔的标记集合,其值定义于 角色定义([wai-aria],第 5.4 节)。

role 值是一组以空白分隔、可由机器提取的语义信息,用于 定义元素的用途。

对于每个 SVG 元素,‘role’ 属性的初始值 是相应的 SVG 元素默认隐含 ARIA 语义。

为了有效且有用,许多元素角色要求以 无障碍名称 或显式状态和特性值的形式提供附加信息。 可以使用 SVG 描述性元素 或 ARIA 属性提供无障碍名称。 每个角色的要求在定义该角色的位置给出,例如 WAI-ARIA ([WAI-ARIA])或 WAI-ARIA 图形模块 ([graphics-aria-1.0])。

5.12.3. 状态和特性属性(所有 aria- 属性)

可以在 SVG 元素上指定 WAI-ARIA 状态和特性属性。 这些属性由 ARIA 在 状态和特性定义(所有 aria-* 属性) ([wai-aria],第 6.6 节)中定义。

如果指定这些属性,其值必须是状态或特性定义中 "Value" 字段所列的 WAI-ARIA 值 类型,并根据 将 WAI-ARIA 值类型映射到语言 使用 SVG 映射将其映射到适当的 SVG 值类型([wai-aria],第 10.2 节)。

这些属性可动画; 如果使用动画改变图形的状态, 或以改变正确替代文本描述的方式改变其内容, 则应使用相同的动画方法更新相应的 ARIA 状态或特性属性。

WAI-ARIA 状态和特性属性可用于任何元素。但是, 它们并不总是有意义,在这种情况下用户代理可能不会执行 除将其包含在 DOM 中之外的任何处理。状态和特性属性 按照 ARIA 和 SVG 无障碍 API 映射规范 进行处理。[wai-aria] [svg-aam-1.0]

5.12.4. 隐式和允许的 ARIA 语义

下表定义了适用于SVG 元素的默认隐式 ARIA 语义。第一 列单元格中的每个语言功能(元素)都隐含同一行第二列单元格中 给出的 ARIA 语义(角色、状态和/或特性)。第三列定义 哪些 WAI-ARIA 语义(角色、状态或特性)可以或不可以应用的限制。

对于许多图形元素,只有当作者提供表明语义重要性的 信息时,才会分配隐式角色。 无障碍树的完整纳入 标准 由面向用户代理的 SVG 无障碍 API 映射规范定义 [svg-aam-1.0]。 对于作者,表示语义重要性的首选方式是为 元素提供无障碍名称。 可以通过直接子 ‘title’ 元素, 或通过 ‘aria-label’ 或 ‘aria-labelledby’ 属性来完成。 作者应使用其中一种方法为 任何对理解 SVG 至关重要的内容提供无障碍名称, 特别是任何交互式内容。

语言功能 默认隐含 ARIA 语义 允许的角色
‘a’ 如果元素具有有效的 href 或 xlink:href 属性,则为 link 角色。 对于不是链接的 a 元素,如果 a 元素是 text 的后代,则默认语义与 tspan 相同, 否则与 g 相同。 无限制
‘circle’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘clipPath’ none 不得应用任何角色
‘defs’ none 不得应用任何角色
‘desc’ none 不得应用任何角色
‘ellipse’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘feBlend’ none 不得应用任何角色
‘feColorMatrix’ none 不得应用任何角色
‘feComponentTransfer’ none 不得应用任何角色
‘feComposite’ none 不得应用任何角色
‘feConvolveMatrix’ none 不得应用任何角色
‘feDiffuseLighting’ none 不得应用任何角色
‘feDisplacementMap’ none 不得应用任何角色
‘feDistantLight’ none 不得应用任何角色
‘feDropShadow’ none 不得应用任何角色
‘feFlood’ none 不得应用任何角色
‘feFuncA’ none 不得应用任何角色
‘feFuncB’ none 不得应用任何角色
‘feFuncG’ none 不得应用任何角色
‘feFuncR’ none 不得应用任何角色
‘feGaussianBlur’ none 不得应用任何角色
‘feImage’ none 不得应用任何角色
‘feMerge’ none 不得应用任何角色
‘feMergeNode’ none 不得应用任何角色
‘feMorphology’ none 不得应用任何角色
‘feOffset’ none 不得应用任何角色
‘fePointLight’ none 不得应用任何角色
‘feSpecularLighting’ none 不得应用任何角色
‘feSpotLight’ none 不得应用任何角色
‘feTile’ none 不得应用任何角色
‘feTurbulence’ none 不得应用任何角色
‘filter’ none 不得应用任何角色
‘foreignObject’ 如果元素满足纳入标准,则为 group 角色, 否则为 none 无限制
‘g’ 如果元素满足纳入标准,则为 group 角色, 否则为 none 无限制
‘image’ img 角色 无限制
‘line’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘linearGradient’ none 不得应用任何角色
‘marker’ none 不得应用任何角色
‘mask’ none 不得应用任何角色
‘metadata’ none 不得应用任何角色
‘mpath’ none 不得应用任何角色
‘path’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘pattern’ none 不得应用任何角色
‘polygon’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘polyline’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘radialGradient’ none 不得应用任何角色
‘rect’ 如果元素满足纳入标准,则为 graphics-symbol 角色, 否则为 none 无限制
‘script’ none 不得应用任何角色
‘stop’ none 不得应用任何角色
‘style’ none 不得应用任何角色
‘svg’ graphics-document 角色 无限制
‘switch’ none 不得应用任何角色
‘symbol’ 如果元素是满足纳入标准的已渲染元素实例, 则为 graphics-object 角色, 否则为 none 无限制
‘text’ group角色, 使用特定于平台的角色映射, 如 SVG 无障碍 API 映射规范中所定义 无限制
‘textPath’ 如果元素满足纳入标准,则为 group 角色, 否则为 none 无限制
‘title’ none 不得应用任何角色
‘tspan’ 如果元素满足纳入标准,则为 group 角色, 否则为 none 无限制
‘use’ 如果元素满足纳入标准,则为 graphics-object 角色, 否则为 none 无限制
‘view’ none 不得应用任何角色

5.13. DOM 接口

5.13.1. Document 接口的扩展

DOM Core 规范定义了一个 Document 接口,本 规范对其进行了扩展。

当 SVG 文档通过引用嵌入时, 例如当 HTML 文档具有一个 ‘object’ 元素,其 ‘data’ 属性引用 SVG 文档(即 MIME 类型为 "image/svg+xml" 且其根元素因此为 ‘svg’ 元素的文档)时,将存在 两个不同的 DOM 层次结构。第一个 DOM 层次结构属于 引用文档(例如 XHTML 文档)。第二个 DOM 层次结构 属于被引用的 SVG 文档。

partial interface Document {
  readonly attribute SVGSVGElement? rootElement;
};

rootElement IDL 属性 表示根 ‘svg’ 元素。获取 rootElement 时,如果文档的根元素 是 ‘svg’ 元素,则返回该根元素,否则返回 null 。

此属性已弃用,并且可能在未来的 SVG 规范中删除。 建议作者改用 documentElement 属性,该属性位于 Document 上。

实现 HTML 的 SVG 实现必须支持 HTML 对 document 接口的扩展。 其他 SVG 实现必须支持以下 IDL 片段。

// 仅必须在某些实现中实现
partial interface Document {
  readonly attribute DOMString title;
  readonly attribute DOMString referrer;
  readonly attribute DOMString domain;
  readonly attribute Element? activeElement;
};

title、referrer、domain 和 activeElement IDL 属性的行为必须与 HTML 中定义的相应 IDL 属性相同。

5.13.2. 接口 SVGSVGElement

SVGSVGElement 对象表示 DOM 中的 ‘svg’ 元素。 SVGSVGElement 接口还包含 各种实用方法,例如数据类型对象工厂方法。

SVGSVGElement 对象维护一个内部 SVGPoint 对象,称为 它的 当前平移点 对象, 即从 currentTranslate IDL 属性返回的对象。

[Exposed=Window]
interface SVGSVGElement : SVGGraphicsElement {

  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;

  attribute float currentScale;
  [SameObject] readonly attribute SVGPoint currentTranslate;

  NodeList getIntersectionList(SVGRect rect, SVGElement? referenceElement);
  NodeList getEnclosureList(SVGRect rect, SVGElement? referenceElement);
  boolean checkIntersection(SVGElement element, SVGRect rect);
  boolean checkEnclosure(SVGElement element, SVGRect rect);

  undefined deselectAll();

  [NewObject] SVGNumber createSVGNumber();
  [NewObject] SVGLength createSVGLength();
  [NewObject] SVGAngle createSVGAngle();
  [NewObject] SVGPoint createSVGPoint();
  [NewObject] SVGMatrix createSVGMatrix();
  [NewObject] SVGRect createSVGRect();
  [NewObject] SVGTransform createSVGTransform();
  [NewObject] SVGTransform createSVGTransformFromMatrix(optional DOMMatrix2DInit matrix = {});

  Element? getElementById(DOMString elementId);

  // 已弃用的方法,调用时不起作用,
  // 但出于兼容性原因予以保留。
  unsigned long suspendRedraw(unsigned long maxWaitMilliseconds);
  undefined unsuspendRedraw(unsigned long suspendHandleID);
  undefined unsuspendRedrawAll();
  undefined forceRedraw();
};

SVGSVGElement includes SVGFitToViewBox;
SVGSVGElement includes WindowEventHandlers;

x、 y、 width 和 height IDL 属性 分别反映 x、y、width 和 height 特性的计算值及其相应的 呈现属性。

currentScale 和 currentTranslate IDL 属性表示应用于 SVG 的附加变换。 它们仅对 SVG 文档片段的最外层 svg 元素 有效。

文档的缩放和平移 变换是一个如下形式的 2x3 矩阵: [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]。 ‘transform’ 特性的值不会影响 currentScale 或 currentTranslate。

先前版本的 SVG 建议用户代理默认实现控件, 供用户设置图形的缩放(zoom)和平移(pan)。 这些用户操作产生的变换会反映在 currentScale 和 currentTranslate 的值中。 这些用户控件并未得到良好实现,因此不再推荐。 不过,作者应注意用户代理可能会更新这些值。

最外层 SVG 元素上的已废弃属性 zoomAndPan="disable" 应禁用用户代理基于用户操作对这些值进行的任何修改, 但在某些用户代理中可能产生不良副作用。

currentScale 和 currentTranslate 与变换文档根的其他方式(变换和 SVG 视图) 之间的交互定义得不够明确。 有关更多信息,请参阅 GitHub issue。

获取 currentScale 时, 执行以下步骤:

  1. 如果当前 ‘svg’ 元素不是最外层 svg 元素, 则返回 1。
  2. 令 [a b c d e f] 为表示文档缩放和平移 变换的 2x3 矩阵。
  3. 返回 a。

设置 currentScale 时, 执行以下步骤:

  1. 如果当前 ‘svg’ 元素不是最外层 svg 元素, 则返回。
  2. 令 scale 为赋给 currentScale 的值。
  3. 令 [a b c d e f] 为表示文档缩放和平移 变换的 2x3 矩阵。
  4. 将文档的缩放和平移变换设置为 [scale 0 0 scale e f]。

获取 currentTranslate 时, 返回 SVGSVGElement 对象的当前 平移点对象。此对象 表示当前平移 ‘svg’ 元素的 。一个 当前 平移点对象在其 ‘svg’ 元素 不是最外层 svg 元素时必须只读, 否则可写。

有关修改当前 平移点对象如何影响文档的缩放和平移变换,请参阅向 SVGPoint 赋值的规则。

每当文档的缩放和平移变换 响应用户交互而发生变化,或者最外层 svg 元素 发生变化时,执行以下步骤:

  1. 令 [a b c d e f] 为表示文档缩放和平移 变换的 2x3 矩阵。
  2. 令 element 为最外层 svg 元素。
  3. 将 element 的 当前平移点对象 的 x 和 y 分量分别更新为 e 和 f。

当最外层 svg 元素 发生变化时运行这些步骤,将确保如果文档元素被不同的 ‘svg’ 元素替换,则其 currentTranslate 会立即更新,以反映 文档缩放和平移变换的平移分量。

每当一个 ‘svg’ 元素 不再是最外层 svg 元素时, 其当前 平移点对象的 x 和 y 分量必须设置为 0。

suspendRedraw、 unsuspendRedraw、 unsuspendRedrawAll 和 forceRedraw 方法均已弃用,并被定义为不起作用。当 调用 suspendRedraw 方法时,它必须返回 1。

getIntersectionList、 getEnclosureList、 checkIntersection 和 checkEnclosure 方法 用于对图形元素执行几何操作,以 找出其图形内容部分或 完全位于给定矩形内的元素(或检查它们是否如此)。

要查找给定元素 element 的 相交 或被包围后代, 使用给定矩形 rectangle,并以 ancestor 作为解释 rectangle 所采用坐标空间中的元素, 执行以下步骤:

  1. 令 result 为初始为空的列表。
  2. 如果 element 未显示,这是由于其 display 值 为 none,或位于具有失败的 条件处理属性 或 ‘switch’ 中失败分支的子树内, 则返回 result。
  3. 对于 element 的每个子元素 child,按文档顺序:
    1. 如果 child 是 ‘svg’ 或 ‘g’ 元素, 则:
      1. 令 descendants 为 查找 child 的 相交(或被包围)后代的结果,使用 rectangle 并在 ancestor 的坐标空间中解释。
      2. 将 descendants 中的所有元素追加到 result。
    2. 否则,如果 child 是 ‘use’ 元素,则:
      1. 令 root 为 child 的影子树根。
      2. 令 descendants 为 查找 root 的 相交(或被包围)后代的结果,使用 rectangle 并在 ancestor 的坐标空间中解释。
      3. 如果 descendants 不为空,则将 child 追加到 result。

        这意味着,尽管我们会检查 use 元素影子 树中的元素, 但不会将元素实例 或其在被引用文档子树中的源元素 放入 result 列表;只返回 ‘use’ 元素本身。

    3. 否则,如果 child 是图形 元素,则:
      1. 令 region 为 child 坐标 系统中对命中检测敏感的形状,同时考虑 解释 child 的 pointer-events 值的规则。
      2. 将 region 变换到 ancestor 的坐标系统中。
      3. 如果正在查找相交后代,并且 region 部分 或完全位于 rectangle 内,则将 child 追加到 result。
      4. 否则,正在查找被包围后代。如果 region 完全位于 rectangle 内,则将 child 追加到 result。
  4. 返回 result。

要查找 非容器 图形元素于给定元素 element 内,运行以下 步骤:

  1. 令 result 为初始为空的列表。
  2. 如果 element 是 ‘svg’ 或 ‘g’ 元素, 则对于 element 的每个子元素 child, 按文档顺序:
    1. 令 descendants 为 查找非容器 图形元素于 child 内的结果。
    2. 将 descendants 中的所有元素追加到 result。
  3. 否则,如果 element 是图形元素 则 将 element 追加到 result。
  4. 返回 result。

当调用 getIntersectionList(rect, referenceElement) 或 getEnclosureList(rect, referenceElement) 时, 运行以下步骤:

  1. 令 descendants 为一个列表,取决于当前所处的方法:
    getIntersectionList
    descendants 为 查找相交 后代 于当前 ‘svg’ 元素与矩形 rect 在当前 ‘svg’ 元素的坐标系统中的结果。
    getEnclosureList
    descendants 为 查找被包围 后代 于当前 ‘svg’ 元素与矩形 rect 在当前 ‘svg’ 元素的坐标系统中的结果。
  2. 如果 referenceElement 不为 null,则从 descendants 中移除任何不以 referenceElement 为祖先的元素。
  3. 返回一个静态 NodeList,其中 包含 descendants 中的所有元素。 ([DOM],第 5.2.7 节)

当调用 checkIntersection(element, rect) 或 checkEnclosure(element, rect) 时, 运行以下步骤:

  1. 令 descendants 为一个列表,取决于当前所处的方法:
    getIntersectionList
    descendants 为 查找相交 后代 于当前 ‘svg’ 元素与矩形 rect 在当前 ‘svg’ 元素的坐标系统中的结果。
    getEnclosureList
    descendants 为 查找被包围 后代 于当前 ‘svg’ 元素与矩形 rect 在当前 ‘svg’ 元素的坐标系统中的结果。
  2. 令 elements 为 查找非容器 图形元素于 element 内的结果。
  3. 如果 elements 为空,则返回 false。
  4. 如果 elements 中任何元素也不在 descendants 中, 则返回 false。
  5. 返回 true。

deselectAll 方法 用于移除文档中的任何选择。调用 deselectAll() 时, 会移除文档选择中的所有 范围, 并将选择的 方向设置为 forwards。[DOM][EDITING] 此方法已弃用,因为它与 Selection API 的功能重复。

这等同于在此 ‘svg’ 元素所在的文档上调用 document.getSelection().removeAllRanges()。

createSVGNumber、 createSVGLength、 createSVGAngle、 createSVGPoint、 createSVGMatrix、 createSVGRect 和 createSVGTransform 方法都是用于创建特定类型的新数据类型对象的工厂函数。 调用其中一个方法时,会按照下表返回一个新的 对象:

方法 对象和详细信息
createSVGNumber 一个新的、分离的 SVGNumber 对象,其值为 0。
createSVGLength 一个新的、分离的 SVGLength 对象,其值为无单位的 <number> 0。
createSVGAngle 一个新的、分离的 SVGAngle 对象,其值为无单位的 <number> 0。
createSVGPoint 一个新的、分离的 SVGPoint 对象,其所有坐标 均为 0。
createSVGMatrix 一个新的、分离的 SVGMatrix 对象,表示 单位矩阵。
createSVGRect 一个新的 SVGRect 对象,其 x、y、width 和 height 均为 0。
createSVGTransform 一个新的、分离的 SVGTransform 对象,其值为 matrix(1, 0, 0, 1, 0, 0)。

createSVGPoint、 createSVGMatrix 和 createSVGRect 方法 均已弃用,仅为兼容旧内容而保留。 建议作者改用 SVGPoint、SVGMatrix 和 SVGRect 构造函数。

createSVGTransformFromMatrix 方法用于从矩阵对象创建新的 SVGTransform 对象。 其行为与 createSVGTransformFromMatrix 方法在 SVGTransformList 上的行为相同。

getElementById 方法 必须返回 ‘svg’ 元素 后代中按树 顺序排列的第一个 ID 为 elementId 的元素;如果不存在此类元素,则返回 null。

5.13.3. 接口 SVGGElement

SVGGElement 对象表示 DOM 中的 ‘g’ 元素。

[Exposed=Window]
interface SVGGElement : SVGGraphicsElement {
};

5.13.4. 接口 SVGDefsElement

SVGDefsElement 对象表示 DOM 中的 ‘defs’ 元素。

[Exposed=Window]
interface SVGDefsElement : SVGGraphicsElement {
};

5.13.5. 接口 SVGDescElement

SVGDescElement 对象表示 DOM 中的 ‘desc’ 元素。

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

5.13.6. 接口 SVGMetadataElement

SVGMetadataElement 对象 表示 DOM 中的 ‘metadata’ 元素。

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

5.13.7. 接口 SVGTitleElement

SVGTitleElement 对象表示 DOM 中的 ‘title’ 元素。

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

5.13.8. 接口 SVGSymbolElement

SVGSymbolElement 对象 表示 DOM 中的 ‘symbol’ 元素。

[Exposed=Window]
interface SVGSymbolElement : SVGGraphicsElement {
};

SVGSymbolElement includes SVGFitToViewBox;

SVG 2 中新增。 SVGSymbolElement 接口现在 继承自 SVGGraphicsElement, 因此影子 DOM 中实例化的 symbol 可以作为图形元素进行查询。

5.13.9. 接口 SVGUseElement

SVGUseElement 对象表示 DOM 中的 ‘use’ 元素。

[Exposed=Window]
interface SVGUseElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
};

SVGUseElement includes SVGURIReference;

x、 y、 width 和 height IDL 属性 分别反映 x、y、width 和 height 特性的计算值及其相应的 呈现属性。

5.13.10. 接口 SVGUseElementShadowRoot

每个use 元素影子树的根对象 实现 SVGUseElementShadowRoot 接口。 此接口目前没有定义 对 ShadowRoot 接口 和 DocumentOrShadowRoot 混入 所定义特性和方法的任何扩展。 但是,从作者脚本的角度来看, 以此节点为根的树完全只读。

[Exposed=Window]
interface SVGUseElementShadowRoot : ShadowRoot {
};

5.13.11. 接口 ShadowAnimation

ShadowAnimation 接口定义 一个只读 Animation 对象, 它会镜像构造它的 sourceAnimation 对象 的所有变化。 它们用于在 use 元素影子树中镜像由作者发起的动画对象。

[Exposed=Window]
interface ShadowAnimation : Animation {
  constructor(Animation source, (Element or CSSPseudoElement) newTarget);
  [SameObject] readonly attribute Animation sourceAnimation;
};

sourceAnimation IDL 特性 指向构造函数中传入的 Animation 对象。

构造函数生成一个新的 ShadowAnimation 对象, 它反映 sourceAnimation 上的所有特性, 但其 effect 是通过 使用 sourceAnimation 的关键帧效果作为源 构造一个新的 KeyframeEffectReadOnly 而创建, 然后修改其 target 以匹配 newTarget 参数。

ShadowAnimation 是只读的。 任何设置继承的 IDL 特性的尝试, 或调用任何会改变其状态的 Animation 方法的尝试, 都必须抛出 NoModificationAllowedError。 但是,用户代理必须确保 sourceAnimation 的特性或状态的任何变化 都反映为 ShadowAnimation 的变化。

5.13.12. 接口 SVGSwitchElement

SVGSwitchElement 对象 表示 DOM 中的 ‘switch’ 元素。

[Exposed=Window]
interface SVGSwitchElement : SVGGraphicsElement {
};

5.13.13. 混入 GetSVGDocument

此接口提供对通过引用嵌入 另一个基于 DOM 的语言中的 SVG 文档的访问。预期此接口 实现在允许此类 SVG 文档引用的 DOM 对象上。

此接口已弃用,并且可能从未来版本的 SVG 规范中删除。要访问 ‘iframe’ 或 ‘object’ 元素内的 SVG 文档, 建议作者分别使用 HTMLIFrameElement 或 HTMLObjectElement 接口上的 contentDocument 属性。

HTMLIFrameElement、 HTMLEmbedElement 和 HTMLObjectElement 接口都定义了各自的 getSVGDocument 方法,该方法以与 GetSVGDocument 相同的方式提供对 SVG 文档的访问。因此,这三个 接口无需 实现 GetSVGDocument。不过, 强烈建议作者 改用 contentDocument。

interface mixin GetSVGDocument {
  Document getSVGDocument();
};

getSVGDocument 方法 用于返回被引用的 SVG 文档。调用 getSVGDocument() 时, 它必须返回由实现 GetSVGDocument 接口的嵌入元素 所引用的 Document 对象;如果没有文档, 则返回 null。

请注意,此操作不会检查被引用的 文档实际上是否为 SVG 文档。相反,会返回任何文档。


第 6 章: 样式

6.1. 使用 CSS 为 SVG 内容设置样式

SVG 文档中的元素可以使用 CSS 设置样式. 大多数视觉特征以及元素的某些 几何方面使用 CSS 特性进行控制. 例如, fill 特性控制所使用的绘制 方式来 填充形状内部, 而 width 和 height 特性用于控制 ‘rect’ 元素的大小.

SVG 用户代理必须支持本章所述的所有 CSS 样式 机制.

在 SVG 1.1 中, 对内联样式表的支持 使用 ‘style’ 元素 和 ‘style’ 并非必需. 在 SVG 2 中, 这些是必需的.

6.2. 内联样式表: ‘style’ 元素

SVG 2 要求: 将 HTML5 ‘style’ 元素属性添加到 SVG 的 ‘style’ 元素.
决议: SVG 2 ‘style’ 元素应与 HTML5 ‘style’ 元素保持一致.
目的: 避免 HTML 和 SVG 内容中 ‘style’ 元素的不同行为令作者感到意外.
负责人: Cameron (ACTION-3277)

‘style’ 元素允许 样式表直接嵌入 SVG 内容中. SVG 的 ‘style’ 元素具有 相同的 属性, 与 HTML 中对应的 元素.

‘style’
类别:
从不渲染的元素
内容模型:
字符数据.
属性:
DOM 接口:

属性定义:

名称 值 初始值 可动画
type (见下文) (无) 否

此属性将元素内容的样式表语言指定为 媒体类型. [rfc2046]. 如果未指定该属性, 则 假定样式表语言为 CSS. 此属性已过时, 不应使用.

名称 值 初始值 可动画
media (见下文) (无) 否

此属性指定一个必须 匹配才能应用样式表的媒体查询. 其值被解析 为 media_query_list. 如果未指定, 则样式表无条件应用.

名称 值 初始值 可动画
title (见下文) (无) 否

此属性为样式表指定标题, 在公开和选择替代 样式表时使用. 该属性可取任意值.

‘style’ 及其 属性的语义和处理必须与 HTML ‘style’ 元素的定义相同.

样式表的文本内容绝不会直接渲染; ‘style’ 元素的 display 值 必须始终设置为 none 由用户代理样式表设置, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性.

6.3. 外部样式表: HTML ‘link’ 元素的作用

SVG 文档中的 HTML ‘link’ 元素 (即, HTML 命名空间中本地名称为 "link" 的元素) 其 ‘rel’ 属性设置为 'stylesheet' 时, 必须按照 HTML 规范中的定义处理, 并使外部样式表 加载并应用于文档. HTML 文档中位于 内联 SVG 片段之外的此类元素也必须应用于 SVG 内容.

因为该元素必须位于 HTML 命名空间中, 所以 HTML ‘link’ 元素不可能被解析为 text/html 文档中内联 SVG 片段的一部分. 但是, 当 使用 XML 语法解析 SVG 文档时, XML 命名空间声明 可用于将该元素放入 HTML 命名空间.

请注意, 引用外部样式表的另一种方式 无需使用 HTML ‘link’ 元素, 即在内联样式表中使用 @import 规则. 例如:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(mystyles.css);
  </style>
  <rect .../>
</svg>

其行为类似于:

<svg xmlns="http://www.w3.org/2000/svg">
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <rect .../>
</svg>

或者, 在 XML 文档中, 可以使用 <?xml-stylesheet?> 处理指令 [xml-stylesheet] 包含外部 CSS 样式表.

6.4. HTML 文档中的样式表

当 SVG ‘style’ 或 HTML ‘style’ 元素用于 HTML 文档时, 这些样式表必须应用于文档中的所有 HTML 和 内联 SVG 内容. 类似地, SVG 文档中使用的任何 HTML ‘style’ 元素 也必须将其样式表应用于该文档.

6.5. 元素特定样式: ‘class’ 和 ‘style’ 属性

与 HTML 一样, SVG 支持 ‘class’ 和 ‘style’ 属性用于所有元素, 以支持元素特定样式.

属性定义:

名称 值 初始值 可动画
class 空格 分隔的标记集合 [HTML] (无) 是

‘class’ 属性为元素分配一个或多个类名, 随后可供样式语言寻址使用.

名称 值 初始值 可动画
style (见下文) (无) 否

‘style’ 属性用于提供元素的 CSS 声明. 该属性会 作为 declaration-list 解析.

除了 ‘class’ 属性在 SVG DOM 中的反映方式 (在 className IDL 属性中, 位于 SVGElement 上), 其语义 和行为, 即 ‘class’ 和 ‘style’ 属性必须 相同 于 HTML 中对应的 属性.

在以下示例中, ‘text’ 元素与 ‘class’ 属性结合使用来标记文档消息. 消息同时以 英语和法语版本出现.

<!-- 英语消息 -->
<text class="info" lang="en">变量声明了两次</text>
<text class="warning" lang="en">未声明的变量</text>
<text class="error" lang="en">变量名语法错误</text>
<!-- 法语消息 -->
<text class="info" lang="fr">Variable déclarée deux fois</text>
<text class="warning" lang="fr">Variable indéfinie</text>
<text class="error" lang="fr">Erreur de syntaxe pour variable</text>

以下 CSS 样式 规则会指示视觉用户代理以绿色显示信息 消息, 以黄色显示警告消息, 并以红色显示错误 消息:

text.info    { fill: green; }
text.warning { fill: yellow; }
text.error   { fill: red; }

此示例展示了如何使用 ‘style’ 属性 为 ‘text’ 元素设置与上一个示例类似的样式:

<text style="fill: green;" lang="en">变量声明了两次</text>
<text style="fill: yellow;" lang="en">未声明的变量</text>
<text style="fill: red;" lang="en">变量名语法错误</text>

6.6. 呈现属性

某些样式特性不仅可以在样式表 和 ‘style’ 属性中指定, 还可以在 呈现 属性中指定. 这些属性的名称与给定 CSS 特性的名称相同 (或相似) 并且其值被解析为该特性的值. 呈现 属性参与层叠的 作者级别, 后跟所有其他作者级样式表, 并具有特殊性 0.

由于呈现属性被解析为 CSS 值而非声明, 呈现属性中的 !important 声明 会使其具有无效 值. 有关呈现属性如何解析的详细信息, 请参阅属性语法.

并非所有可能影响 SVG 渲染的样式特性都有对应的 呈现属性. 其他属性 (恰好与样式特性同名) 不得被解析为 呈现属性, 并且不得影响 CSS 层叠和继承. 此外, 只有 SVG 命名空间中的元素支持呈现属性. 大多数 SVG 呈现属性可以在 SVG 命名空间中的任何元素上指定, 只要其名称不与现有属性冲突. 但是, 几何特性仅具有等效的 呈现属性 于指定元素上. 其他元素上的同名属性不得影响 CSS 层叠和继承.

除 transform 呈现属性表中注明的情况外, 呈现属性名称与特性名称相同, 且使用小写字母.

具有呈现属性的特性 支持该呈现属性的元素
cx, cy ‘circle’ 和 ‘ellipse’
height, width, x, y ‘foreignObject’, ‘image’, ‘rect’, ‘svg’, ‘symbol’, 和 ‘use’
r ‘circle’
rx, ry ‘ellipse’ 和 ‘rect’
d ‘path’
fill SVG 命名空间中的任何元素, 除了动画 元素, 它们具有不同的 ‘fill’ 属性.
transform 出于历史原因, transform 特性根据其所应用的 SVG 元素由不同的呈现属性 表示:
transform
SVG 命名空间中的任何元素, 但以下 ‘pattern’, ‘linearGradient’ 和 ‘radialGradient’ 元素除外.
‘patternTransform’
‘pattern’. ‘patternTransform’ 被映射到 transform CSS 特性 [css-transforms-1].
‘gradientTransform’
‘linearGradient’ 和 ‘radialGradient’ 元素. ‘gradientTransform’ 被映射到 transform CSS 特性 [css-transforms-1].
alignment-baseline, baseline-shift, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, cursor, direction, display, dominant-baseline, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, mask-type, opacity, overflow, paint-order, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform-origin, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode SVG 命名空间中的任何元素.

请注意, ‘cx’, ‘cy’, ‘r’, ‘x’, ‘y’, ‘width’ 和 ‘height’ 属性并非 总是呈现属性. 例如, ‘x’ 属性位于 ‘text’ 和 ‘tspan’ 上 并不是 x 特性的呈现属性, 而 ‘r’ 属性位于 ‘radialGradient’ 上 并不是 r 特性的呈现属性.

将来, 任何应用 于 SVG 内容的新特性都不会获得呈现属性. 因此, 建议作者使用样式特性, 可以通过 内联 ‘style’ 特性 或样式表, 而不是呈现属性, 为 SVG 内容设置样式.

呈现属性的动画等同于 对相应特性进行动画处理.

6.7. 必需特性

所有 SVG 用户代理都必须支持以下特性:

6.8. 用户代理样式表

以下用户 代理样式表必须应用于所有 SVG 用户代理.

@namespace url(http://www.w3.org/2000/svg);
@namespace xml url(http://www.w3.org/XML/1998/namespace);

svg:not(:root), image, marker, pattern, symbol { overflow: hidden; }

*:not(svg),
*:not(foreignObject) > svg {
  transform-origin: 0 0;
}

*[xml|space=preserve] {
  white-space-collapse: preserve-spaces;
}

:link, :visited {
  cursor: pointer;
}

此外, 所有交互式用户代理都必须 对 :focus 伪类 (通常使用 outline 特性) 和 ::selection 伪元素 应用明显的样式 (使用适当的高亮技术, 例如使用反色重新绘制所选字形).

CSS Transforms 定义 transform-origin 的初始值为 50% 50%. 由于 SVG 中的元素默认必须围绕其原点 (0, 0) 进行变换, transform-origin 会被 覆盖并设置为默认值 0 0, 适用于所有 SVG 元素 (根 ‘svg’ 元素以及作为 ‘foreignObject’ 元素或非 SVG 命名空间中的元素之子元素的 ‘svg’ 元素除外; 这些元素 必须围绕其中心进行变换). [css-transforms-1]

OpenType 规范 要求额外的用户代理样式 表 在处理 [OPENTYPE] 时应用. 如下:

@namespace svg url(http://www.w3.org/2000/svg);

svg|text, svg|foreignObject {
  display: none !important;
}

:root {
  fill: context-fill;
  fill-opacity: context-fill-opacity;
  stroke: context-stroke;
  stroke-opacity: context-stroke-opacity;
  stroke-width: context-value;
  stroke-dasharray: context-value;
  stroke-dashoffset: context-value;
}

context-fill 和 context-stroke 关键字 按本规范中的定义, 其中字体字形的上下文元素 是对应的文本内容元素. 其他关键字按 OpenType 规范中的定义, 并确保来自文本内容 元素的样式值 传播到字体字形, 并针对坐标系统的变化进行适当调整 [OPENTYPE].

6.9. 必需的 CSS 功能

除了上述功能外, 以下 CSS 功能也必须 由 SVG 用户代理支持:

6.10. DOM 接口

6.10.1. 接口 SVGStyleElement

SVGStyleElement 对象表示 DOM 中的 ‘style’ 元素 .

[Exposed=Window]
interface SVGStyleElement : SVGElement {
  [Reflect] attribute DOMString type;
  [Reflect] attribute DOMString media;
  [Reflect] attribute DOMString title;
  attribute boolean disabled;
};

SVGStyleElement includes LinkStyle;

第 7 章: 几何特性

除了 SVG 的样式特性之外, SVG 还定义了 几何特性. 几何特性 描述图形元素 ‘circle’, ‘ellipse’, ‘rect’, ‘image’, ‘foreignObject’ 和 ‘svg’ 元素的位置和尺寸.

cx, cy, x 和 y 特性接受负值. r, rx, ry, width 和 height 特性则不接受: 负的 <length-percentage> 是 无效的. 当为这些 特性之一指定无效的负值时, 无论是通过呈现属性还是 CSS 声明, 都必须将其视为指定了 该特性的初始值: 对于 rx, ry, width 和 height 为 auto, 对于 r 为 0. 因此负值绝不会使元素 进入错误状态; @@ 未知术语 "used value" 根据特性的正常解析 规则确定. 下表 总结了这种处理方式.

几何特性负值的处理
特性 值 初始值 允许负值? 负值计算为 负值的使用值
cx, cy <length-percentage> 0 是 指定值 (保持不变) 负值 (平移形状)
r <length-percentage> 0 否 0 0; r = 0 的 ‘circle’ 不会被渲染
rx, ry <length-percentage> | auto auto 否 auto 按 auto 解析: 等于另一个半径的使用值, 如果另一个半径也是 auto 或为负值, 则为 0. 解析后的半径为 0 的 ‘ellipse’ 不会被渲染.
width, height <length-percentage> | auto auto 否 auto 按照 尺寸表解析为 auto: 对最外层 ‘svg’ 为 100%, 对 ‘image’ 为固有尺寸, 对所有其他元素为 0.

7.1. 水平中心坐标: ‘cx’ 特性

名称: cx
值: <length-percentage>
初始值: 0
适用于: ‘circle’ 和 ‘ellipse’ 元素
继承: 否
百分比: 参照当前 SVG 视口的宽度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

cx 特性描述元素位置的水平中心 坐标.

cx 允许负值; 负值会平移 形状的中心, 并且不会像 r, rx 和 ry 那样禁用渲染 (参见 负值的处理).

7.2. 垂直中心坐标: ‘cy’ 特性

名称: cy
值: <length-percentage>
初始值: 0
适用于: ‘circle’ 和 ‘ellipse’ 元素
继承: 否
百分比: 参照当前 SVG 视口的高度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

cy 特性描述元素位置的垂直中心坐标.

cy 允许负值; 负值会平移 形状的中心, 并且不会禁用渲染 (参见 负值的处理).

7.3. 半径: ‘r’ 特性

名称: r
值: <length-percentage>
初始值: 0
适用于: ‘circle’ 元素
继承: 否
百分比: 参照当前 SVG 视口的归一化对角线 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

r 特性描述 ‘circle’ 元素的半径.

r 的负值是无效的; 它会被视为 指定了 0 (参见 负值的处理), 因此 ‘circle’ 不会被渲染.

7.4. 水平半径: ‘rx’ 特性

名称: rx
值: <length-percentage> | auto
初始值: auto
适用于: ‘ellipse’, ‘rect’ 元素
继承: 否
百分比: 参照当前 SVG 视口的宽度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

rx 特性描述 ‘ellipse’ 元素的水平半径和 ‘rect’ 元素的曲线半径. 当 ‘rx’ 的计算值为 auto 时, 使用半径等于 ry 所使用的绝对长度, 从而创建圆弧. 如果 ‘rx’ 和 ‘ry’ 的计算值均为 auto, 则使用值为 0.

无论该值如何计算, ‘rect’ 的 ‘rx’ 使用值绝不会超过 同一形状的 width 使用值的 50%.

对于 ‘ellipse’, auto 行为是 SVG 2 中新增的, 与 ‘rect’ 元素在未指定 rx 时的行为一致.

rx 的负值是无效的; 它会被视为 指定了 auto (参见 负值的处理). 因此它会像 auto 一样解析: 为 ry 的使用值, 或者如果 ry 也是 auto 或 为负值, 则解析为 0.

7.5. 垂直半径: ‘ry’ 特性

名称: ry
值: <length-percentage> | auto
初始值: auto
适用于: ‘ellipse’, ‘rect’
继承: 否
百分比: 参照当前 SVG 视口的高度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
可动画类型: 按计算值

ry 特性描述 ‘ellipse’ 元素的垂直半径和 ‘rect’ 元素的垂直曲线半径. 当 ‘ry’ 的计算值为 auto 时, 使用半径等于 rx 所使用的绝对长度, 从而创建圆弧. 如果 ‘rx’ 和 ‘ry’ 的计算值均为 auto, 则使用值为 0.

无论该值如何计算, ‘rect’ 的 ‘ry’ 使用值绝不会超过 同一形状的 height 使用值的 50%.

对于 ‘ellipse’, auto 行为是 SVG 2 中新增的, 与 ‘rect’ 元素在未指定 ry 时的行为一致.

ry 的负值是无效的; 它会被视为 指定了 auto (参见 负值的处理). 因此它会像 auto 一样解析: 为 rx 的使用值, 或者如果 rx 也是 auto 或 为负值, 则解析为 0.

7.6. 水平坐标: ‘x’ 特性

名称: x
值: <length-percentage>
初始值: 0
适用于: ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素
继承: 否
百分比: 参照当前 SVG 视口的宽度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

x 特性描述 元素位置的水平坐标.

7.7. 垂直坐标: ‘y’ 特性

名称: y
值: <length-percentage>
初始值: 0
适用于: ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素
继承: 否
百分比: 参照当前 SVG 视口的高度 (参见 单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

y 特性描述 元素位置的垂直坐标.

7.8. 尺寸特性: ‘width’ 和 ‘height’ 特性的作用

有关 width 和 height 的定义, 请参阅 CSS 2.1 规范.

CSS width 和 height 特性用于 调整某些 SVG 元素的尺寸. 具体而言, 它们用于调整 ‘rect’, ‘image’, ‘foreignObject’, 和 最外层 ‘svg’ 元素的尺寸. 所有这些元素都具有 ‘width’ 和 ‘height’ 呈现属性. 这些特性也用于布局来自 HTML 命名空间的嵌入元素.

其他 SVG 元素, 例如嵌套的 ‘svg’ 元素, ‘use’ 元素, 以及 ‘symbol’ 元素, 也具有 ‘width’ 和 ‘height’ 属性, 但不接受它们作为 CSS 特性. 在这些元素上, width 和 height 必须指定为 XML 属性; 同名的 CSS 特性 会被忽略.

width 的使用值 可能受 max-width 和 min-width 特性值的约束. height 的使用值 可能受 max-height 和 min-height 特性值的约束.

下表总结了 width 和 height 的值 auto 在不同元素上的处理方式:

元素 值 视为
‘svg’ auto 100%
‘image’ auto 根据所引用图像的固有尺寸和宽高比计算, 按照 CSS 默认尺寸 算法
所有其他元素 auto 0

SVG 2 中新增. 嵌入 SVG 的图像现在可以自动调整为固有尺寸, 或根据固有宽高比缩放到固定的 高度或宽度. 这与 HTML 中嵌入图像的行为一致.

这意味着, 例如, ‘foreignObject’ 对象元素在使用 auto 时不会收缩包裹其内容.


第 8 章: 坐标系统, 变换和单位

8.1. 介绍

所有 SVG 内容都绘制在 SVG 视口内. 每个 SVG 视口都定义一个由大小 (宽度, 高度)和原点表征的绘制区域, 以抽象的 用户单位度量.

请注意, 术语 SVG 视口不同于 CSS 中使用的 "viewport" 术语.

初始视口是一个 顶层 SVG 视口, 它在包含环境所使用的坐标系统 (例如, Web 浏览器中的 CSS 像素) 和用户单位之间建立映射. 建立初始视口将在 初始视口中更 详细地说明.

SVG 视口只能由元素建立. 有关 哪些元素生成视口的信息, 请参阅建立新的 SVG 视口.

每个 SVG 视口都会生成一个 视口坐标 系统 和一个用户坐标 系统, 二者最初相同. 在视口元素上提供 ‘viewBox’ 会相对于视口坐标系统变换用户坐标系统, 如 ‘viewBox’ 属性中所述. 视口的子元素可以 进一步修改用户 坐标系统, 例如通过指定 transform 特性.

SVG 视口可以嵌套. 百分比单位参照 最近祖先视口定义元素的用户坐标系统解析, 如单位一节中所定义. 因此, 嵌套 SVG 视口提供了重新定义百分比 单位含义的机会, 并为相对于 特定矩形区域“适配”图形提供新的参考矩形. 最远祖先 SVG 视口是在不 离开SVG 上下文的情况下最顶层的根 SVG 视口. 祖先 SVG 视口可能不 取决于 DOM 树顺序. 例如对于 ‘linearGradient’, ‘radialGradient’, ‘pattern’, ‘mask’, ‘clipPath’ ‘symbol’ 或 ‘use’ 元素.

SVG 上下文是一个文档片段, 其中片段内的所有元素 都以 SVGElement 作为原型.

SVG 视口的宽度, 高度和原点由生成 SVG 视口的 SVG 文档片段与该 片段的父级(无论是真实还是隐式)之间的协商 过程建立. 有关此协商过程的 说明, 请参阅建立新的 SVG 视口.

默认情况下, 嵌套 SVG 视口的视口坐标 系统等同于父元素的局部 坐标系统, 并按 SVG 视口 元素的原点进行平移. 但是, SVG 视口元素上的 transform 特性会 相对于父 元素的用户坐标系统修改视口坐标系统.

从抽象意义上讲, 所有 SVG 视口都嵌入 画布中, 这是一个在所有相关维度上都无限大的绘制区域.

8.2. 计算 SVG 视口的等效变换

此过程将 viewBox 属性的 min-x, min-y, width 和 height 值, 定义 viewBox 属性的元素的位置和大小, 以及该元素上 preserveAspectRatio 属性的值转换为应用于 元素所包含内容的平移和 缩放.

  1. 令 vb-x, vb-y, vb-width, vb-height 分别为 viewBox 属性的 min-x, min-y, width 和 height 值.
  2. 令 e-x, e-y, e-width, e-height 分别为 元素的位置和大小.
  3. 令 align 为 preserveAspectRatio 的 align 值, 如果 未定义 preserveAspectRatio 则为 'xMidYMid'.
  4. 令 meetOrSlice 为 preserveAspectRatio 的 meetOrSlice 值, 如果 未定义 preserveAspectRatio 或该值中缺少 meetOrSlice 则为 'meet'.
  5. 将 scale-x 初始化为 e-width/vb-width.
  6. 将 scale-y 初始化为 e-height/vb-height.
  7. 如果 align 不是 'none' 且 meetOrSlice 是 'meet', 则将 scale-x 和 scale-y 中较大的一个设置为较小的一个.
  8. 否则, 如果 align 不是 'none' 且 meetOrSlice 是 'slice', 则将 scale-x 和 scale-y 中较小的一个设置为较大的一个.
  9. 将 translate-x 初始化为 e-x - (vb-x * scale-x).
  10. 将 translate-y 初始化为 e-y - (vb-y * scale-y)
  11. 如果 align 包含 'xMid', 则将 (e-width - vb-width * scale-x) / 2 加到 translate-x.
  12. 如果 align 包含 'xMax', 则将 (e-width - vb-width * scale-x) 加到 translate-x.
  13. 如果 align 包含 'YMid', 则将 (e-height - vb-height * scale-y) / 2 加到 translate-y.
  14. 如果 align 包含 'YMax', 则将 (e-height - vb-height * scale-y) 加到 translate-y.

应用于元素所包含内容的变换为 translate(translate-x, translate-y) scale(scale-x, scale-y).

8.3. 初始视口

初始视口的宽度必须是最外层 svg 元素上的 width 呈现属性的值, 除非 满足 以下条件:

在这些条件下, 视口的宽度必须通过 定位特性建立.

类似地, 如果引用元素或 最外层 svg 元素上指定了 足以建立视口高度的 定位 特性, 则这些定位特性必须建立视口的高度; 否则, 初始视口的高度必须是最外层 svg 元素上的 height 呈现属性的值.

如果最外层 svg 元素上的 width 或 height 呈现属性以用户单位表示(即, 未提供单位 标识符), 则假定该值等同于 相同数量的 "px" 单位(参见单位).

在以下示例中, SVG 图形以内联方式嵌入 使用 CSS 布局规则格式化的父 XML 文档中. 由于最外层 svg 元素上未提供 CSS 定位特性, width="100px" 和 height="200px" 属性 决定初始视口的大小:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">

   <!-- SVG 图形 -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- SVG 图形的其余部分放在这里 -->
   </svg>

</parent>

8.4. 初始坐标系统

对于最外层 svg 元素, SVG 用户 代理必须确定一个初始视口坐标 系统和一个 初始用户坐标系统, 使得这 两个坐标系统相同. 两个 坐标系统的原点都必须位于 SVG 视口的原点, 并且初始坐标系统中的一个 单位必须等于 SVG 视口中的一个 CSS 2.1 px ([CSS2], 第 4.3.2 节). 在独立 SVG 文档以及嵌入 (通过引用或内联)到父文档中的 SVG 文档片段中, 如果父文档的 布局由 CSS [CSS2] 确定, 则初始视口 坐标系统(因此也是初始用户坐标 系统)的原点必须位于视口的左上角, 正 x 轴指向右侧, 正 y 轴指向下方, 文本以 "upright" 方向渲染, 这意味着字形的方向应使罗马 字符和亚洲 文字的全尺寸表意字符的相应字形顶部边缘朝 上方, 相应字形的右边缘朝 右方.

如果 SVG 实现是 支持使用 CSS 2.1 兼容 px 单位设置文档样式的用户代理的一部分, 则 SVG 用户代理应将现实世界 单位中 px 单位大小的初始值设置为与其他样式操作所用值 一致; 否则, 如果用户代理能够从其环境确定 px 单位的大小, 则应使用该 值; 否则, 应为一个 px 单位选择合适的大小. 在所有情况下, px 的大小必须 符合CSS 2.1 中描述的 规则 ([CSS2], 第 4.3.2 节).

下面的示例 InitialCoords 显示初始坐标系统的原点位于 左上角, x 轴指向右方, y 轴 指向下方. 初始用户坐标系统中的一个用户 单位等于父级(隐式或显式)用户代理的 "pixel".

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>示例 InitialCoords - SVG 的初始坐标系统</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
示例 InitialCoords — SVG 的初始坐标系统

示例 InitialCoords

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

8.5. ‘transform’ 特性

用户代理必须支持 [css-transforms-1] 中定义的 transform 特性 和呈现属性.

8.6. ‘viewBox’ 属性

名称 值 初始值 可动画
viewBox [<min-x>,? <min-y>,? <width>,? <height>] 如同未指定. 是
<min-x>, <min-y>, <width>, <height> = <number>

‘svg’ 元素上的 Transform 由于 ‘viewBox’ 属性而有些特殊. transform 应像 ‘svg’ 具有一个设置了该 transform 的父元素那样应用.

决议: transform 特性 在概念上应用于 'svg' 元素的外部, 并且 呈现属性与样式特性之间没有区别 (就视觉结果而言).

‘viewBox’ 属性与 ‘preserveAspectRatio’ 属性结合使用, 提供了 拉伸 SVG 视口以适配特定容器元素的能力.

‘viewBox’ 属性的值是四个 数字 <min-x>, <min-y>, <width> 和 <height> 的列表, 由 空白和/或逗号分隔, 用于指定用户 空间中的一个矩形, 该矩形应映射到由给定元素 建立的 SVG 视口边界, 同时考虑 ‘preserveAspectRatio’ 属性. ‘viewBox’ 属性的存在会导致 按 计算 SVG 视口的等效变换中所述向视口坐标系统应用变换.

<width> 或 <height> 的负值是错误: ‘viewBox’ 属性是无效的, 并且必须将其视为未 指定, 因此不会应用 viewBox 变换. <width> 或 <height> 为零会 禁用元素的渲染, 这与其他零尺寸 视口的处理方式一致.

示例 ViewBox 演示 如何在最外层 svg 元素上使用 ‘viewBox’ 属性 指定 SVG 内容应拉伸以适配 SVG 视口的边界.

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>示例 ViewBox - 使用 viewBox
   属性自动创建初始用户坐标
   系统, 使图形缩放以适配
   SVG 视口, 无论 SVG 视口大小如何.</desc>
  <!-- 此矩形在用户坐标系统中从 (0,0) 延伸到 (1500,1000).
       由于上面的 viewBox 属性,
       该矩形最终将填满
       为 SVG 内容保留的整个区域. -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- 一个大的红色三角形 -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- 一个横跨大部分 SVG 视口的文本字符串 -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    拉伸以适配
  </text>
</svg>
示例 ViewBox
渲染到
SVG 视口, 其
width=300px,
height=200px
渲染到
SVG 视口, 其
width=150px,
height=200px
示例 ViewBox - 拉伸以适配 300 乘 200 示例 ViewBox - 拉伸以适配 150 乘 200

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

‘viewBox’ 属性的作用是用户代理自动提供 适当的变换矩阵, 将用户坐标系统中的指定 矩形映射到指定区域的边界 (通常是 SVG 视口). 为实现左侧 示例的效果, SVG 视口尺寸为 300 乘 200 像素时, 用户代理需要自动插入一个 将 X 和 Y 都缩放 0.2 的变换. 其效果等同于拥有 大小为 300px 乘 200px 的 SVG 视口以及文档中的以下 补充变换, 如下:

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.2)">
    <!-- 文档的其余部分放在这里 -->
  </g>
</svg>

为实现右侧示例的效果, SVG 视口尺寸为 150 乘 200 像素时, 用户代理需要 自动插入一个将 X 缩放 0.1 并将 Y 缩放 0.2 的变换. 其效果等同于拥有大小 为 150px 乘 200px 的 SVG 视口以及文档中的以下补充 变换, 如下:

<?xml version="1.0" standalone="no"?>
<svg width="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.1 0.2)">
    <!-- 文档的其余部分放在这里 -->
  </g>
</svg>

请注意, 在某些情况下, 用户代理除了提供 scale 变换外, 还需要提供 translate 变换. 例如, 在 最外层 svg 元素上, 如果 ‘viewBox’ 属性为 <min-x> 或 <min-y> 指定 非零值, 则需要 translate 变换.

如果 transform (或 ‘patternTransform’) 和 ‘viewBox’ 都 应用于一个元素, 则会建立两个新的坐标 系统. transform 为该元素建立 第一个新的 坐标系统. ‘viewBox’ 为该元素的所有后代建立第二个坐标系统. 第一个坐标系统与 第二个坐标系统进行后乘.

与 transform 特性不同, 由于 ‘viewBox’ 创建的自动变换 不会影响具有 ‘viewBox’ 属性的元素上的 ‘x’, ‘y’, ‘width’ 和 ‘height’ 属性(或者对于 ‘marker’ 元素, 是 ‘markerWidth’ 和 ‘markerHeight’ 属性). 因此, 在上面的示例中, ‘svg’ 元素具有 width 和 height 呈现属性 以及 ‘viewBox’ 属性, width 和 height 表示在 ‘viewBox’ 变换应用之前存在的坐标系统中的值. 另一方面, 与 transform 特性一样, 它 会 为所有其他属性和 后代元素建立新的坐标系统.

8.7. ‘preserveAspectRatio’ 属性

名称 值 初始值 可动画
preserveAspectRatio <align> <meetOrSlice>? xMidYMid meet 是
<align> =
    none
    | xMinYMin | xMidYMin | xMaxYMin
    | xMinYMid | xMidYMid | xMaxYMid
    | xMinYMax | xMidYMax | xMaxYMax
<meetOrSlice> = meet | slice

指示是否强制进行均匀缩放. 适用于所有 建立新 SVG 视口的元素(参见建立 SVG 视口的 元素), 以及 ‘image’, ‘marker’, ‘pattern’ 和 ‘view’ 元素

在某些情况下, 通常在使用 ‘viewBox’ 属性时, 希望图形非均匀地拉伸以 适配并占满 整个 SVG 视口. 在其他情况下, 希望使用均匀 缩放以保持图形的宽高比.

对于建立新 SVG 视口的元素(参见建立 SVG 视口的 元素), 以及 ‘marker’, ‘pattern’ 和 ‘view’ 元素, ‘preserveAspectRatio’ 仅在 同一元素上提供了 ‘viewBox’ 值时适用. 对于这些元素, 如果未提供 ‘viewBox’ 属性, 则 ‘preserveAspectRatio’ 会被 忽略.

对于 ‘image’ 元素, ‘preserveAspectRatio’ 指示 被引用图像应如何相对于 参考矩形适配, 以及是否应相对于 当前用户坐标系统保持被引用图像的宽高比.

<align> 参数 指示是否强制进行均匀缩放, 如果是, 则指示当 ‘viewBox’ 的宽高比与 SVG 视口的宽高比不匹配时要使用的 对齐方法. <align> 参数必须是以下字符串之一:

<meetOrSlice> 参数是可选的, 如果提供, 则与 <align> 值之间由一个或 多个空格分隔, 并且必须是以下字符串之一:

示例 PreserveAspectRatio 演示 ‘preserveAspectRatio’ 的各种选项. 该示例通过包含嵌入 最外层 svg 元素内部的 ‘svg’ 子元素 创建多个新的 SVG 视口(参见建立新的 SVG 视口).

<svg width="450px" height="300px" xmlns="http://www.w3.org/2000/svg">

  <desc>示例 PreserveAspectRatio - 演示 preserveAspectRatio 属性</desc>

  <style type="text/css">
    text { font-size: 9; }
    rect { fill: none; stroke: blue; }
  </style>

  <defs>
    <g id="smile">
      <rect x='.5' y='.5' width='29' height='39' style="fill:black;stroke:red"/>
      <circle cx='15' cy='20' r='10'  fill='yellow'/>
      <circle cx='12' cy='17' r='1.5' fill='black'/>
      <circle cx='17' cy='17' r='1.5' fill='black'/>
      <path d='M 10 24 A 8 8 0 0 0 20 24' stroke='black' stroke-width='2'/>
    </g>
  </defs>

  <rect x="1" y="1" width="448" height="298"/>

  <text x="10" y="30">要适配的 SVG</text>
  <g transform="translate(20,40)"><use href="#smile" /></g>

  <text x="10" y="110">视口 1</text>
  <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29'/></g>

  <text x="10" y="180">视口 2</text>
  <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59'/></g>

  <g id="meet-group-1" transform="translate(100, 60)">
    <text x="0" y="-30">--------------- meet ---------------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(0,70)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30">
        <use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="meet-group-2" transform="translate(250, 60)">
    <text x="0" y="-30">---------- meet ----------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect  x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50, 0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100, 0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-1" transform="translate(100, 220)">
    <text x="0" y="-30">---------- slice ----------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100,0)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">
 	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-2" transform="translate(250, 220)">
    <text x="0" y="-30">--------------- slice ---------------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
           width="50" height="30">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">
 	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">
 	<use href="#smile" />
      </svg>
    </g>
  </g>
</svg>
示例 PreserveAspectRatio — 演示可用选项

示例 PreserveAspectRatio

8.8. 建立新的 SVG 视口

在 SVG 内容中包含一个 ‘svg’ 元素 会创建一个新的 SVG 视口, 所有包含的 图形都绘制到其中; 这会隐式建立 一个新的视口坐标系统和一个新的用户坐标系统. 此外, 其中的百分比单位也具有新的含义, 因为建立了一个新的 SVG 视口 (参见单位).

新 SVG 视口的边界由建立新 SVG 视口的 元素上的 ‘x’, ‘y’, ‘width’ 和 ‘height’ 属性定义, 例如 ‘svg’ 元素. 新 视口坐标系统和新用户坐标系统 的原点都位于 (‘x’, ‘y’), 其中 ‘x’ 和 ‘y’ 表示建立 SVG 视口的 元素上相应属性的值. 新 视口坐标系统和新用户坐标系统的方向 与建立 SVG 视口的元素当前用户坐标 系统的方向一致. 新视口坐标系统和新用户 坐标系统中的一个单位 与建立 SVG 视口的元素当前用户坐标系统中的一个单位大小相同.

以下是一个示例:

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>此 SVG 绘图嵌入了另一个绘图,
    从而建立一个新的 SVG 视口
  </desc>
  <!-- 以下语句建立一个新的 SVG 视口
       并将 SVG 绘图 B 渲染到该 SVG 视口中 -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- 绘图 B 放在这里 -->
  </svg>
</svg>

有关创建新 SVG 视口的详细示例, 请参阅示例 PreserveAspectRatio.

以下元素建立新的 SVG 视口:

出于历史原因, ‘pattern’ 和 ‘marker’ 元素 不会创建新的视口, 尽管它们接受 ‘viewBox’ 属性. ‘clipPath’ 或 ‘mask’ 元素也不会. 这些元素内容中的百分比长度 与图形效果区域的尺寸不成比例.

‘foreignObject’ 元素为其子内容建立一个新的 CSS 包含块. 这具有一些类似于新视口的效果, 会重置子内容的布局作用域. 但是, 为了渲染作为 ‘foreignObject’ 后代的 SVG 元素, 必须由新的 ‘svg’ 元素 建立 SVG 文档片段和 SVG 视口.

‘image’ 为被引用文档创建一个新的 文档视口. 如果被引用文档是 SVG 文件, 它当然会建立自己的 SVG 视口.

新的 SVG 视口是否还建立一个额外的新 裁剪路径, 由建立新 SVG 视口的元素上的 overflow 特性的值决定.

8.9. 单位

对于属性, 呈现属性和 CSS 特性, SVG 遵循 CSS Values and Units Module [css-values] 对常用值和 单位的说明和定义. 每个属性和特性 都必须指定使用的分量值类型. CSS WG 或 SVG WG 发布的后续或扩展 规范可以扩展基本数据 类型或添加新的数据类型.

对于定义为相对于 SVG 视口大小的 <percentage> 值:

下面的示例 Units 演示不同类型 单位的一些处理规则.

<?xml version="1.0" standalone="no"?>
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>示例 Units</title>
  <desc>演示各种单位选项</desc>

  <!-- 为图片加框 -->
  <rect x="5" y="5" width="3990" height="1990" 
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- 绝对单位说明符 -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">绝对单位:</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- 相对单位说明符 -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">相对单位:</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- 百分比 -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">百分比:</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>
示例 Units — 演示可用选项

示例 Units

左侧的三个矩形演示一种 绝对单位标识符 "in" 单位(inch)的使用. CSS 定义 1 inch 等于 96 像素. 因此, 最上面的矩形以 inch 指定, 与中间 矩形大小完全相同, 后者以用户单位指定, 使最上面的 矩形中每个对应的 inch 都有 96 个用户单位. 该组最下面的矩形演示 以 inch 指定的值被缩放时会发生什么.

中间的三个矩形演示一种 相对单位标识符 "em" 单位的使用. 因为 font-size 特性已在最外层 ‘g’ 元素上设置 为 150, 每个 "em" 单位 等于 150 个用户单位. 最上面的矩形以 "em" 单位指定, 与中间 矩形大小完全相同, 后者以用户单位指定, 使最上面的 矩形中每个对应的 "em" 单位都有 150 个用户单位. 该组最下面的矩形演示 以 "em" 单位指定的值被缩放时会发生什么.

右侧的三个矩形演示 百分比的使用. 请注意, SVG 视口元素的用户坐标系统中 SVG 视口的宽度和高度(在本例中 是最外层 svg 元素)分别为 4000 和 2000, 因为处理 ‘viewBox’ 属性会产生 变换后的用户坐标系统. 最上面的矩形 以百分比单位指定, 与中间矩形大小 完全相同, 后者以等效的 用户单位指定. 特别要注意, 中间矩形中的 stroke-width 特性 设置为 sqrt((actual-width)**2 + (actual-height)**2) / sqrt(2) 的 1%, 在本 例中为 .01*sqrt(4000*4000+2000*2000)/sqrt(2), 即 31.62. 该组最下面的 矩形演示百分比单位指定的值被缩放时 会发生什么.

8.10. 边界框

边界框

元素的边界框(或 "bbox")是与该元素用户坐标系统的轴 对齐且完全 包围该元素及其后代的最紧密贴合矩形.

可以为元素计算三种边界框:

  1. 对象边界 框是仅包含 元素几何形状的边界框. 对于基本形状, 这是 被填充的区域. 除非另有规定, 不加限定的术语 "bounding box" 指的就是它.
  2. 描边边界 框是包含 元素几何形状及其描边形状的边界框.
  3. 装饰边界 框是包含 元素几何形状, 其描边形状以及其标记的边界框.

请注意, 元素上的 opacity, visibility, fill, fill-opacity, fill-rule, stroke-dasharray 和 stroke-dashoffset 特性的值对 元素的边界框没有影响.

对于曲线形状, 边界框必须包围沿形状 边缘的所有部分, 而不仅仅是端点. 请注意, 曲线中未定义为位于最终曲线线条上的 控制点(例如三次 Bézier 命令的第二个 坐标对)不得影响边界框的尺寸 (不过这些点如果位于形状本身内部, 或位于曲线上或接近曲线, 则可能落在边界框区域内). 例如, 位于距曲线边缘 更远位置的曲线控制点, 从曲线边缘未包围的一侧来看, 必须从 边界框中排除.

显示二次 Bézier 曲线对象边界框的图像.

路径 'M20,50 L35,100 H120 V50 Q70,10 20,50' 以浅蓝色显示. 左侧显示该路径正确的对象边界框. 请注意, 它不包括曲线最顶部的控制点, 但 包括蓝色形状的所有部分, 甚至包括位于控制点凸包 之外的部分.

即使一个元素不在渲染树中 – 因为它为 'display: none', 位于 ‘defs’ 元素中, 像 ‘symbol’ 元素那样通常不被渲染, 或者当前 不存在于文档树中 – 它仍然具有边界框. 在该元素上调用 getBBox 会返回与该元素被渲染时相同的矩形. 但是, 不在渲染树中的元素 不会影响任何祖先元素的边界框.

以下示例定义了多个元素. 每个具有 ID 的元素预期的 对象边界框显示 如下.

<svg xmlns="http://www.w3.org/2000/svg">

  <title>边界框计算</title>
  <desc>基于上下文具有不同边界框结果的元素示例.</desc>

  <defs id="defs-1">
     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
  </defs>

  <g id="group-1">
    <use id="use-1" href="#rect-1" x="10" y="10" />

    <g id="group-2" display="none">
      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
    </g>
  </g>
</svg>
元素 ID 边界框结果
"defs-1" {0, 0, 0, 0}
"rect-1" {20, 20, 40, 40}
"group-1" {30, 30, 40, 40}
"use-1" {30, 30, 40, 40}
"group-2" {10, 10, 100, 100}
"rect-2" {10, 10, 100, 100}

对于文本内容元素, 为了进行边界 框 计算, 每个字形都必须视为单独的图形元素. 计算必须假定所有字形都占据完整字形 单元格. 完整字形单元格对于 水平 文本必须具有等于水平前进量的宽度和等于 EM 框的高度. 对于侧向排版的垂直文本, 完整字形 单元格必须 具有等于 EM 框的宽度和等于水平前进量的高度. 对于其他垂直文本, 完整字形单元格的宽度必须 等于 EM 框, 高度等于垂直前进量, 或者如果字体中未定义垂直前进量, 则高度等于 EM 框的高度. 例如, 对于水平文本, 计算必须假定每个字形 垂直延伸到字体完整的上升和下降值.

由于声明式或脚本动画可以改变元素的形状, 大小和 位置, 边界框是可变的. 因此, 无论是通过脚本调用 还是作为声明式或链接语法的一部分, 元素的边界框都应反映请求边界框的 时间快照中该元素的当前值.

宽度为零, 高度为零或两者均为零的元素(例如 垂直或水平线, 或者具有零 width 或 height 的 ‘rect’ 元素)仍具有边界框, 对于正 尺寸具有正值, 或者如果没有指定正尺寸, 宽度和高度 都为 '0'. 类似地, 宽度和高度为零的 ‘path’ 元素的子路径段必须 为了边界框而包含在该元素的几何形状中.

未指定位置的元素(例如 ‘path’ 元素, 其 d 特性的值为 none) 在计算边界框时定位于 点 (0,0).

请注意, DOM 对象不派生自 SVGGraphicsElement 的元素(例如渐变元素)没有边界框, 因此也没有 请求边界框的接口.

渲染树中引用未解析资源的元素仍 应具有边界框, 由其属性中指定的位置和尺寸定义, 如果未提供 值, 则由这些属性的初始值定义. 例如, 元素 <use href="#bad" x="10" y="10"/> 将具有 x 和 y 为 10, 宽度和高度为 0 的边界框.

以下算法定义如何为给定 元素计算边界框. 算法的输入为:

计算边界框的算法如下, 取决于 element 的类型:

一个形状
一个文本内容元素
位于 文本内容元素内的 ‘a’ 元素
  1. 令 box 为初始化为 (0, 0, 0, 0) 的矩形.
  2. 如果 element 是形状, 令 fill-shape 为 element 的等效路径, 否则为包含 元素中文本所对应每个 字形单元格的形状.
  3. 如果 fill 为 true, 则将 box 设置为 坐标系统 space 中包含 fill-shape 的最紧密矩形.

    fill, fill-opacity 和 fill-rule 特性的值不会影响 fill-shape.

  4. 如果 stroke 为 true 且元素的 stroke 不是 none, 则将 box 设置为 box 与 坐标系统 space 中包含该元素描边形状的最紧密矩形的并集, 并假设该元素没有虚线图案.

    stroke-opacity, stroke-dasharray 和 stroke-dashoffset 特性的值不会影响描边形状的计算.

  5. 如果 markers 为 true, 则对于在该 元素上渲染的每个标记 marker:
    1. 对于定义 marker 内容的 ‘marker’ 元素的每个后代图形元素 child:
      1. 如果 child 在 ‘marker’ 内有祖先元素 为 'display: none', 具有失败的条件处理 属性, 或者不是 ‘a’, ‘g’, ‘svg’ 或 ‘switch’ 元素, 则 继续到下一个后代图形元素.
      2. 否则, 将 box 设置为 box 与调用 边界框计算算法所得结果的并集, 其中 child 作为元素, space 作为目标坐标空间, fill, stroke 和 markers 为 true, 而 clipped 的值用于 clipped.
  6. 如果 clipped 为 true 且 element 上 clip-path 的值不是 none, 则将 box 设置为 坐标系统 space 中包含 box 与 裁剪路径交集的最紧密矩形.
  7. 返回 box.
一个容器 元素
‘use’
  1. 令 box 为初始化为 (0, 0, 0, 0) 的矩形.
  2. 如果它是容器元素, 令 parent 为该元素, 否则为 ‘use’ 元素影子树的 根.
  3. 对于 parent 的每个后代图形元素 child:
    1. 如果 child 未被渲染, 则 继续到下一个后代图形 元素.
    2. 否则, 将 box 设置为 box 与调用 边界框计算算法所得结果的并集, 其中 child 作为元素, space, fill, stroke, markers 和 clipped 使用与相应算法输入 值相同的值.
  4. 如果 clipped 为 true:
    • 如果 element 上 clip-path 的值不是 none, 则将 box 设置为 坐标系统 space 中包含 box 与裁剪路径交集的最紧密矩形.
    • 如果 overflow 特性适用于 element 且其值不是 visible, 则将 box 设置为 坐标系统 space 中包含 box 与元素溢出边界交集的最紧密矩形.
    • 如果 clip 特性 适用于 element 且其值不是 auto, 则将 box 设置为 坐标系统 space 中包含 box 与 clip 指定矩形的交集的最紧密矩形.
  5. 返回 box.
‘foreignObject’
‘image’
  1. 令 box 为坐标空间 space 中包含由元素的 ‘x’, ‘y’, ‘width’ 和 ‘height’ 几何特性定义的定位矩形的最紧密矩形.

    此算法的 fill, stroke 和 markers 输入参数不会影响为这些元素返回的边界框.

  2. 如果 clipped 为 true 且 element 上 clip-path 的值不是 none, 则将 box 设置为 坐标系统 space 中包含 box 与 裁剪路径交集的最紧密矩形.
  3. 返回 box.

值为 (0, 0, 0, 0) 的 box 与空形状的并集 是 box.

元素的对象边界框, 描边边界框或装饰边界框 是以上述以下参数调用边界框计算算法的结果: element 是元素本身; space 是元素的用户坐标系统; fill 为 true; 如果正在计算描边 边界框或装饰边界框, 则 stroke 为 true, 否则为 false; 如果正在计算装饰 边界框, 则 markers 为 true, 否则为 false; 并且 clipped 为 false.

8.11. 对象边界框单位

以下元素提供一种选项, 可通过在给定元素上将指定属性设置为 'objectBoundingBox', 将坐标值和长度表示为对象边界框的分数(在某些情况下为 百分比):

元素 属性 作用
‘linearGradient’ ‘gradientUnits’ 指示指定 渐变向量的属性(‘x1’, ‘y1’, ‘x2’, ‘y2’)表示 应用该渐变的元素边界框的分数或 百分比.
‘radialGradient’ ‘gradientUnits’ 指示指定中心 (‘cx’, ‘cy’), 半径(‘r’)和焦点 (‘fx’, ‘fy’)的属性表示 应用该渐变的元素边界框的分数或 百分比.
‘pattern’ ‘patternUnits’ 指示定义如何平铺图案的属性 (‘x’, ‘y’, ‘width’, ‘height’)是 使用应用该图案的元素边界框 建立的.
‘pattern’ ‘patternContentUnits’ 指示图案内容的用户坐标系统 使用应用该图案的元素边界 框建立.
‘clipPath’ ‘clipPathUnits’ 指示 ‘clipPath’ 元素内容的用户坐标系统 使用应用该裁剪路径的 元素边界框建立.
‘mask’ ‘maskUnits’ 指示定义遮罩区域的属性 (‘x’, ‘y’, ‘width’, ‘height’) 是 使用应用该遮罩的元素边界框 建立的.
‘mask’ ‘maskContentUnits’ 指示 ‘mask’ 元素内容的用户坐标系统使用 应用该遮罩的元素边界框建立.
‘filter’ ‘filterUnits’ 指示定义 滤镜效果 区域 的属性(‘x’, ‘y’, ‘width’, ‘height’) 表示 应用该滤镜的元素边界框的分数或百分比.
‘filter’ ‘primitiveUnits’ 指示滤镜 图元中的各种长度值表示应用滤镜的元素边界框的分数或百分比.

在以下讨论中, 术语适用元素 是给定效果所应用的元素. 对于渐变和 图案, 适用元素是其 fill 或 stroke 特性引用给定渐变或图案的图形元素. (有关文本元素的特殊规则, 请参阅 对象 边界框单位和文本元素的讨论.) 对于裁剪路径, 遮罩和滤镜, 适用元素可以是 容器元素或图形元素.

使用关键字 objectBoundingBox 时, 其效果如同在嵌套变换矩阵列表中 插入一个补充变换矩阵以 创建新的用户坐标系统.

首先, (minx,miny) 和 (maxx,maxy) 坐标由 适用元素对象边界框的范围确定.

然后, 新用户坐标系统中的坐标 (0,0) 映射到适用元素用户坐标系统内紧密边界框的 (minx,miny) 角, 新用户坐标系统中的坐标 (1,1) 映射到适用元素紧密边界框的 (maxx,maxy) 角. 在大多数情况下, 以下 变换矩阵会产生正确效果:

[ (maxx-minx) 0 0 (maxy-miny) minx miny ]

当百分比与定义 渐变向量, 图案图块, 滤镜区域或 遮罩区域的属性一起使用时, 百分比表示与相应 十进制值相同的值(例如, 50% 与 0.5 含义相同). 如果百分比用于 ‘pattern’, ‘clipPath’, ‘mask’ 或 ‘filter’ 元素的内容中, 则这些值 按单位中定义的百分比处理规则 处理.

对于表示为对象边界框单位分数或百分比的值, 可以指定任何数值. 特别是, 可以指定小于零或大于一的分数, 以及小于 0% 或大于 100% 的百分比.

当适用元素的几何形状 没有宽度或没有高度时, 不应使用关键字 objectBoundingBox, 例如水平或 垂直线的情况, 即使由于具有非零描边宽度, 该线在查看时具有实际厚度, 因为描边宽度 在边界框计算中会被忽略. 当适用元素的几何形状 没有宽度或高度且指定了 objectBoundingBox 时, 给定效果(例如渐变或滤镜)将被 忽略.

8.12. SVG 内容的固有尺寸特性

为了能够在使用 CSS 格式化的宿主文档中包含 SVG, 必须 计算具体对象大小. 具体对象大小必须 使用 CSS Images 3 [css-images-3] 中定义的 默认尺寸算法 计算, 输入如下:

指定大小必须根据 ‘svg’ 元素的 width 和 height 尺寸特性的使用值确定.

固有尺寸也必须 根据 width 和 height 尺寸特性确定. 如果 width 或 height 中任一个 未指定, 则使用值为初始值 'auto'. 'auto' 和百分比长度不得用于 确定固有宽度或固有高度.

对于位图图像格式, 固有尺寸固定在 图像文件中, 指定大小根据需要在宿主文档中定义 以缩放图像. SVG 本身具有可缩放性, 会调整固有宽度和 固有高度使其成为指定大小的宽度和 高度. 因此, 当指定为长度时, ‘svg’ 元素的 width 和 height 尺寸特性控制 SVG 图像的固有尺寸以及 将 SVG 图像放置到宿主文档中时使用的指定大小.

固有宽高比必须 使用以下 算法计算. 如果算法返回 null, 则没有固有宽高比.

  1. 如果 ‘svg’ 元素上的 width 和 height 尺寸特性 都是绝对值:
    1. 返回 width / height
  2. 如果一个SVG View 处于活动状态:
    1. 令 viewbox 为活动 SVG View 定义的 viewbox
    2. 返回 viewbox.width / viewbox.height
  3. 如果 ‘svg’ 元素上的 ‘viewBox’ 正确指定:
    1. 令 viewbox 为 ‘svg’ 元素上的 ‘viewBox’ 属性定义的 viewbox
    2. 返回 viewbox.width / viewbox.height
  4. 返回 null

本节定义的行为特定于 CSS, 但可以调整 到其他宿主上下文. 在所有宿主上下文中, 在可用的情况下, 调整 SVG 视口大小时必须遵循固有宽高比.

示例:

示例: 固有宽高比 1
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  ...
</svg>

在此示例中, SVG 视口的固有宽高比为 2:1. 固有 宽度为 10cm, 固有高度为 5cm.

示例: 固有宽高比 2
<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="50%" viewBox="0 0 200 200">
  ...
</svg>

在此示例中, 最外层 SVG 视口的固有宽高比为 1:1. 在这种情况下进行宽高比计算, 可允许嵌入到 包含块中的对象中, 即使该包含块只在一个方向上受到约束.

示例: 固有宽高比 3
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" viewBox="0 0 200 200">
  ...
</svg>

在此情况下, 固有宽高比为 1:1.

示例: 固有宽高比 4
<svg xmlns="http://www.w3.org/2000/svg"
     width="75%" height="10cm" viewBox="0 0 200 200">
  ...
</svg>

在此示例中, 固有宽高比为 1:1.

为新的 auto 值添加更多 示例? 例如 David Vest 提供的示例.

8.13. 矢量效果

SVG 2 要求: SVG 2 将具有基于 SVG 1.2 Tiny 的受约束变换.
决议: 向 SVG 2 规范添加矢量效果扩展 提案.
目的: 包含非缩放功能 (对象的非缩放部分, 以及整个对象的非缩放
负责人: Satoru Takagi (ACTION-3619)

有时希望让对象的轮廓保持其 原始宽度, 或者无论对对象应用何种 变换都让其位置固定. 例如, 在使用 2px 宽线条 表示道路的地图中, 即使 用户放大地图, 也希望道路保持 2px 宽, 或者在可以 平移的图形图表上显示说明性注释.

为了提供与特殊坐标变换和 图形绘制有关的此类效果, SVG Tiny 1.2 引入了 vector-effect 特性. 虽然 SVG Tiny 1.2 只引入了非缩放描边行为, 但此版本 引入了许多额外效果. 此外, 由于这些效果 可以组合指定, 因而可以表现出更多不同效果. 并且, SVG 语言的未来 版本将允许通过此特性实现更强大的矢量效果 .

除 non-scaling-stroke 和 none 以外的 vector-effect 值由于缺乏实现, 存在从 SVG 2 中删除的风险. 请求实现者提供反馈, 关于按当前规定实现它们的可行性, 在实现阶段.

名称: vector-effect
值: none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position
初始值: none
适用于: 图形元素和 ‘use’
继承: 否
百分比: 不适用
媒体: 视觉
计算值: 如指定值
动画类型: 离散
none
指定不应用任何矢量效果, 即使用 SVG 1.1 的默认渲染行为, 即首先使用指定的 绘制填充形状的几何区域, 然后使用指定的绘制描边轮廓.
non-scaling-stroke
请参阅关于绘制中矢量效果的此说明 .
non-scaling-size
通过具有以下 特征的受约束变换, 为此元素及其后代指定特殊的用户 坐标系统. 即使来自 宿主坐标空间的 CTM 发生变化, 用户坐标系统的缩放也 不会 改变. 但是, 它并不指定抑制旋转和倾斜. 此外, 它也不指定固定用户坐标系统的位置. 由于 non-scaling-size 抑制用户坐标系统的缩放, 因此它也具有 non-scaling-stroke 的特征. 变换 公式和示例行为在下一节中给出.
non-rotation
通过具有以下 特征的受约束变换, 为此元素及其后代指定特殊的用户 坐标系统. 即使来自 宿主坐标空间的 CTM 发生变化, 用户坐标系统的旋转和倾斜 也会被抑制. 但是, 它并不指定抑制缩放. 此外, 它也不 指定固定用户坐标系统的位置. 变换公式和示例行为在 下一节中给出.
fixed-position
通过具有以下 特征的受约束变换, 为此元素及其后代指定特殊的用户 坐标系统. 即使来自 宿主坐标空间的 CTM 发生变化, 用户坐标系统的位置也会 固定 . 但是, 它并不指定抑制旋转, 倾斜和缩放. 当 具有 fixed-position 效果的元素还具有 transform 特性时, 该特性会用于此效果. transform 特性矩阵的平移分量 e 和 f 用于移动固定用户坐标系统的原点. 变换 公式和示例行为在 下一节中给出.

这些值可以枚举. 因此, 可以指定同时具有这些 特征的效果.

vector-effect 的宿主坐标空间是 最远祖先 SVG 视口的视口坐标系统.

注意: SVG 的未来版本可能允许指定设备坐标系统的方式.

8.13.1. 计算矢量效果

本节列出有关 值组合的变换公式, 以阐明矢量效果的行为, 不包括含义明确的 non-scaling-stroke .

vector-effect 特性对在 3d 渲染 上下文中执行的变换没有影响 .

从用户坐标系统 到视口坐标系统的常规坐标变换公式如下.

x viewport y viewport 1 = CTM ⋅ x userspace y userspace 1 CTM = a ctm c ctm e ctm b ctm d ctm f ctm 0 0 1
<circle vector-effect="veValue" transform="translate(xo yo)" cx="xf" cy="yf" r=".."/>

当将 vector-effect 添加到像上面的元素 时, 从用户坐标到设备坐标的变换公式更改为 如下. 这里, xf 和 yf 是对应元素及其后代的用户 坐标. 并且, xo 和 yo 是对应元素所具有 transform 属性的矩阵元素 e 和 f . 此外, |det(CTM)| 是 CTM 行列式的绝对值. 当此值变为 0 并且 指定 non-scaling-size 时, vector-effect 变为无效, 即 none.

det CTM = a ctm ⋅ d ctm - b ctm ⋅ c ctm
veValue 公式
non-scaling-size
x viewport y viewport 1 = CTM ⋅ 0 0 1 + CTM det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
non-rotation
x viewport y viewport 1 = CTM ⋅ 0 0 1 + det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
non-scaling-size non-rotation
x viewport y viewport 1 = CTM ⋅ 0 0 1 + 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position
x viewport y viewport 1 = x o y o 1 + CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-scaling-size
x viewport y viewport 1 = x o y o 1 + CTM det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-rotation
x viewport y viewport 1 = x o y o 1 + det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-scaling-size non-rotation
x viewport y viewport 1 = x o y o 1 + 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1

8.13.2. 计算嵌套 视口坐标系统的矢量效果

下面是不使用矢量效果的嵌套视口 坐标系统的常规坐标变换公式. xviewport(UA) 和 yviewport(UA) 是直接受 用户代理控制的坐标. CTMthis 是目标图形的CTM, 用于从目标图形的用户 坐标系统 到它所属的视口坐标系统的变换矩阵. CTMparent 是CTM, 用于从 上述视口坐标系统到其父级的视口坐标系统 的变换矩阵. 并且, CTMroot 是用于 最根部视口坐标系统 (UA) 的CTM.

x viewport(UA) y viewport(UA) 1 = CTM root ⋅ ... ⋅ CTM parent ⋅ CTM this ⋅ x userspace y userspace 1

将上一节的七个公式应用于嵌套视口 坐标系统时, 这些公式的应用方式会根据 viewport 或 screen 是否被指定为 vector-effect 的附加值而如下变化.

指定 viewport 值时, 用户代理将上一节七个公式之一与 以下公式组合来计算坐标.

x viewport ( UA ) y viewport ( UA ) 1 = CTM root ⋅ ... ⋅ CTM parent ⋅ x viewport y viewport 1 CTM = CTM this

指定 screen 值时, 用户代理将上一节七个公式之一与 以下公式组合来计算坐标.

x viewport ( UA ) y viewport ( UA ) 1 = x viewport y viewport 1 CTM = CTM root ⋅ ... ⋅ CTM parent ⋅ CTM this

8.13.3. 矢量效果示例

下面是 non-scaling-stroke vector-effect 的示例.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="6cm" height="4cm" viewBox="0 0 600 400" 
     viewport-fill="rgb(255,150,200)">

  <desc>非缩放描边示例</desc>
  <rect x="1" y="1" width="598" height="398" fill="none" stroke="black"/>
  
  <g transform="scale(9,1)">
    <line stroke="black" stroke-width="5" x1="10" y1="50" x2="10" y2="350"/>
    <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" 
        x1="32" y1="50" x2="32" y2="350"/>
    <line vector-effect="none" stroke="black" stroke-width="5" 
        x1="55" y1="50" x2="55" y2="350"/>
  </g>

</svg>

下面是 none vector-effect 的示例 (无矢量效果).

更改 CTM 前 更改 CTM 后
显示无矢量效果的图像 显示无矢量效果的图像

源代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="500" width="500">

  <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"/>

  <!-- 嵌套用户坐标系统由此 transform 属性进行变换 -->
  <g transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)
                translate(-50,-50)">
    <svg viewBox="-50,-50,500,500" height="500" width="500">
      <!-- 此 svg 基本用户坐标系统上的方格纸 -->
      <g stroke="green" stroke-width="1" fill="none">
        <circle cx="0" cy="0" r="10"/>
        <circle cx="150" cy="150" r="7"/>
        <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"/>

        <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"/>
        <line x1="-100" y1="000" x2="600" y2="000"/>
        <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"/>
        <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"/>
        <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"/>
        <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"/>
        <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"/>

        <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"/>
        <line y1="-100" x1="000" y2="600" x2="000"/>
        <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"/>
        <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"/>
        <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"/>
        <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"/>
        <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"/>
      </g>

      <!-- 具有矢量效果的图形 -->
      <!-- 此图形嵌套用户坐标系统原点上的粗红色右箭头和小矩形
           -->
      <path id="ve" vector-effect="none"
            stroke="red" stroke-width="3" fill="none"
            transform="matrix(1,0,0,1,150,150)"
            d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>
    </svg>
  </g>
</svg>

下面是 non-scaling-size 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-scaling-size 矢量效果的图像
<path id="ve" vector-effect="non-scaling-size"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 non-rotation 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-rotation 矢量效果的图像
<path id="ve" vector-effect="non-rotation"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 non-scaling-size non-rotation 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-scaling-size non-rotation 矢量效果的图像
<path id="ve" vector-effect="non-scaling-size non-rotation"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 fixed-position 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 fixed-position 矢量效果的图像
<path id="ve" vector-effect="fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 non-scaling-size fixed-position 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-scaling-size fixed-position 矢量效果的图像
<path id="ve" vector-effect="non-scaling-size fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 non-rotation fixed-position 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-rotation fixed-position 矢量效果的图像
<path id="ve" vector-effect="non-rotation fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

下面是 non-scaling-size non-rotation fixed-position 的示例.

更改 CTM 前 更改 CTM 后
显示矢量效果生效前外观的图像 显示 non-scaling-size non-rotation fixed-position 矢量效果的图像
<path id="ve" vector-effect="non-scaling-size non-rotation fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

8.14. DOM 接口

8.14.1. 接口 SVGTransform

SVGTransform 接口用于 表示 出现在 transform 特性 及其呈现属性 ‘transform’, ‘gradientTransform’ 和 ‘patternTransform’ 中的<transform-function> 值. 一个 SVGTransform 表示变换列表中的单个分量, 例如单个 scale(…) 或 matrix(…) 值.

一个 SVGTransform 对象可以被指定为只 读, 这意味着尝试修改该对象将导致抛出异常 , 如下所述.

一个 SVGTransform 对象可以与特定元素关联 . 关联元素用于 确定当对象反映 ‘transform’ 呈现属性时要更新哪个元素的该属性. 除非另有说明, 一个 SVGTransform 对象 不与任何元素关联.

每个 SVGTransform 对象都以 两种模式之一运行. 它可以:

  1. 反映呈现属性值的一个元素 (通过 SVGAnimatedTransformList 的 baseVal 成员上的方法公开),
  2. 处于分离状态, 这是使用 SVGTransform 对象 createSVGTransform 和 createSVGTransformFromMatrix 创建时的情况.

一个 SVGTransform 对象维护一个内部 <transform-function> 值, 称为其值. 它还维护一个 SVGMatrix 对象, 称为其矩阵 对象, 即从 matrix IDL 属性返回的对象. SVGTransform 对象的 矩阵对象 始终与其值保持同步.

[Exposed=Window]
interface SVGTransform {

  // 变换类型
  const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
  const unsigned short SVG_TRANSFORM_MATRIX = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE = 3;
  const unsigned short SVG_TRANSFORM_ROTATE = 4;
  const unsigned short SVG_TRANSFORM_SKEWX = 5;
  const unsigned short SVG_TRANSFORM_SKEWY = 6;

  readonly attribute unsigned short type;
  [SameObject] readonly attribute SVGMatrix matrix;
  readonly attribute float angle;

  undefined setMatrix(optional DOMMatrix2DInit matrix = {});
  undefined setTranslate(float tx, float ty);
  undefined setScale(float sx, float sy);
  undefined setRotate(float angle, float cx, float cy);
  undefined setSkewX(float angle);
  undefined setSkewY(float angle);
};

定义在 SVGTransform 上的数值变换类型常量用于 表示 SVGTransform 的值的类型. 它们的含义如下:

常量 含义
SVG_TRANSFORM_MATRIX 一个 matrix(…) 值.
SVG_TRANSFORM_TRANSLATE 一个 translate(…) 值.
SVG_TRANSFORM_SCALE 一个 scale(…) 值.
SVG_TRANSFORM_ROTATE 一个 rotate(…) 值.
SVG_TRANSFORM_SKEWX 一个 skewX(…) 值.
SVG_TRANSFORM_SKEWY 一个 skewY(…) 值.
SVG_TRANSFORM_UNKNOWN 某种其他类型的值.

使用数值变换类型常量是一种反模式, 并且 不会为 SVGTransform 支持的任何变换类型引入新的常量值. 如果支持并使用其他类型的 变换, 则 SVGTransform 使用 SVG_TRANSFORM_UNKNOWN 类型. 有关 SVGTransform 的其他特性 如何与这些类型的变换一起运行的详细信息, 请参阅下文.

type IDL 属性表示 SVGTransform 的值 所对应的变换项类型. 获取 type 时, 执行以下步骤 :

  1. 如果 SVGTransform 的值 是 matrix(…), translate(…), scale(…), rotate(…), skewX(…) 或 skewY(…) 函数, 则返回上面变换类型表中对应的常量 值.
  2. 否则, 返回 SVG_TRANSFORM_UNKNOWN.

    例如, 对于 scaleX(…) 或 translate3d(…) 变换, 将返回 SVG_TRANSFORM_UNKNOWN.

matrix IDL 属性 将变换表示为 4x4 齐次矩阵, 并在获取时 返回 SVGTransform 的矩阵对象. 当矩阵对象首次创建时, 其 值被设置为与 SVGTransform 的变换 函数值匹配, 并被设置为 反映 SVGTransform.

有关不同变换函数类型 如何对应特定矩阵值的说明, 请参阅 CSS Transforms 规范.

angle IDL 属性 表示 rotate(…), skewX(…) 或 skewY(…) 变换函数的角度参数. 获取时, 执行以下步骤:

  1. 如果 SVGTransform 对象的值 是 rotate(…), skewX(…) 或 skewY(…) 函数, 则以度为单位返回其 angle 参数.
  2. 否则, 返回 0.

setMatrix 方法用于 将 SVGTransform 设置为给定的 矩阵值. 调用 setMatrix(matrix) 时, 执行以下步骤:

  1. 如果 SVGTransform 对象为只读, 则 抛出 NoModificationAllowedError.
  2. 令 newMatrix 为 DOMMatrixReadOnly.fromMatrix(matrix) 的结果, 包括针对缺失值执行的验证和 修正步骤. 如果该方法抛出错误, 则重新抛出该错误并中止这些步骤.
  3. 如果 newMatrix.is2D() 将返回 true, 则将 SVGTransform 对象的 值设置为表示与 newMatrix 相同矩阵的 matrix(…) 值.
  4. 否则, 将 SVGTransform 对象的 值设置为表示与 newMatrix 相同矩阵的 matrix3d(…) 值.
  5. 无论哪种情况, 矩阵对象都会与 SVGTransform 对象的值同步.
  6. 如果 SVGTransform 对象 反映元素的呈现属性值, 则重新序列化所反映的属性.

setTranslate, setScale, setRotate, setSkewX 和 setSkewY 方法用于 将 SVGTransform 设置为新的 变换函数 值. 调用其中一个方法时, 执行以下步骤:

  1. 如果 SVGTransform 对象为只读, 则 抛出 NoModificationAllowedError.
  2. 将 SVGTransform 对象的 值设置为新的变换函数 值, 具体取决于调用了哪个方法:
    setTranslate(tx, ty)
    新的变换函数值为 translate(tx, ty)
    setScale(sx, sy)
    新的变换函数值为 scale(sx, sy)
    setRotate(angle, cx, cy)
    新的变换函数值为 rotate(angle, cx, cy)
    setSkewX(angle)
    新的变换函数值为 skewX(angle)
    setSkewY(angle)
    新的变换函数值为 skewY(angle)
  3. 设置 SVGTransform 对象的 矩阵对象的分量, 使其 与新的变换函数值匹配.
  4. 如果 SVGTransform 对象 反映呈现属性值的一个 元素, 则重新序列化 所反映的属性.

本规范对 SVGMatrix 对象的行为施加了超出 Geometry Interfaces 规范所述的额外要求, 以便它们可用于反映采用变换值的呈现属性 .

每个 SVGMatrix 对象都以两种 模式之一运行. 它可以:

  1. 反映 SVGTransform (通过 SVGTransform 上的 matrix IDL 属性公开), 或者
  2. 处于分离状态, 这是使用其构造函数或 createSVGMatrix 创建 SVGMatrix 对象时的情况.

一个 SVGMatrix 可以被指定为只 读, 这意味着尝试修改该对象将导致抛出异常 . 当向只读 SVGMatrix 的任何 IDL 属性赋值, 或调用其任何可变变换方法时, 将抛出 NoModificationAllowedError 异常, 而不是更新内部值.

请注意, 根据 svgwg#706 (2019-10 WG 决议), SVG 2 恢复 SVG 1.1 的惯例: 不存在 单独的只读变体接口. SVGMatrix 可以通过内部标志指定为 只读; 写入操作会在同一接口上抛出 NoModificationAllowedError .

当向可写 SVGMatrix 的任何 IDL 属性赋值, 或调用其任何可变变换方法时, 更新内部矩阵值后会执行以下步骤:

  1. 如果 SVGMatrix 反映 SVGTransform, 则:
    1. 如果 SVGMatrix 从其 is2d 方法将返回 true, 则将 SVGTransform 对象的 值设置为表示与 SVGMatrix 相同矩阵的 matrix(…) 值.
    2. 否则, 将 SVGTransform 对象的 值设置为表示与 SVGMatrix 相同矩阵的 matrix3d(…) 值.
    3. 如果 SVGTransform 对象 反映呈现属性值的一个 元素, 则重新序列化 所 反映的属性.

8.14.2. 接口 SVGTransformList

SVGTransformList 接口是一个 列表接口, 其元素为 SVGTransform 对象. 一个 SVGTransformList 表示 transform 特性 可以采用的值, 即 <transform-list> 或关键字 none.

[Exposed=Window]
interface SVGTransformList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGTransform initialize(SVGTransform newItem);
  getter SVGTransform getItem(unsigned long index);
  SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
  SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
  SVGTransform removeItem(unsigned long index);
  SVGTransform appendItem(SVGTransform newItem);
  setter undefined (unsigned long index, SVGTransform newItem);

  // 其他列表接口不共有的附加方法.
  SVGTransform createSVGTransformFromMatrix(optional DOMMatrix2DInit matrix = {});
  SVGTransform? consolidate();
};

createSVGTransformFromMatrix 方法用于从矩阵对象创建一个新的 SVGTransform 对象. 调用 createSVGTransformFromMatrix(matrix) 方法时, 执行以下步骤:

  1. 令 transform 为新创建的 SVGTransform 对象, 其处于分离状态.
  2. 按照在 transform 上调用 setMatrix 方法时会执行的步骤, 将 matrix 作为其参数传入.
  3. 返回 transform.

consolidate 方法用于将变换列表转换为使用单个变换函数的等效 变换. 调用 consolidate() 方法时, 执行以下步骤:

  1. 如果 SVGTransformList 对象 为只读, 则抛出 NoModificationAllowedError.
  2. 如果列表为空, 返回 null.
  3. 分离列表中的所有元素, 然后将其移除.
  4. 令 transform 为新创建的 SVGTransform 对象.
  5. 令 matrix 为从单位矩阵开始, 然后按顺序将列表中每个 SVGTransform 的矩阵对象值后乘所得的矩阵值 .
  6. 将 transform 的 矩阵对象的分量设置为 matrix 中的分量值.
  7. 如果 transform 的 矩阵对象从其 is2d 方法将返回 true, 则将 transform 的 值设置为表示与矩阵 对象相同矩阵的 matrix(…) 值.
  8. 否则, 将 transform 的 值设置为表示与矩阵 对象相同矩阵的 matrix3d(…) 值.
  9. 附加 transform 到此 SVGTransformList.
  10. 将 transform 追加到此列表.
  11. 如果列表反映一个呈现属性, 则 重新序列化所反映的属性.
  12. 返回 transform.

SVGLengthList 所有其他接口成员的行为 定义于列表接口.

8.14.3. 接口 SVGAnimatedTransformList

SVGAnimatedTransformList 对象用于反映 transform 特性及其对应的 呈现属性 (根据元素不同, 它是 ‘transform’, ‘gradientTransform’ 或 ‘patternTransform’).

[Exposed=Window]
interface SVGAnimatedTransformList {
  [SameObject] readonly attribute SVGTransformList baseVal;
  [SameObject] readonly attribute SVGTransformList animVal;
};

baseVal 和 animVal IDL 属性 表示所反映呈现属性的值. 获取 baseVal 或 animVal 时, 返回一个 SVGTransformList 对象, 该对象反映给定的 呈现属性.

8.14.4. 接口 SVGPreserveAspectRatio

SVGPreserveAspectRatio 接口用于表示 ‘preserveAspectRatio’ 属性的值.

一个 SVGPreserveAspectRatio 对象可以被指定 为只读, 这意味着尝试修改该对象将导致抛出异常 , 如下所述.

每个 SVGPreserveAspectRatio 对象 都反映一个被反映的 ‘preserveAspectRatio’ 属性的基值 (通过 baseVal 或 animVal 成员上的方法公开, 该成员属于 SVGAnimatedPreserveAspectRatio).

[Exposed=Window]
interface SVGPreserveAspectRatio {

  // 对齐类型
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;

  // Meet-or-slice 类型
  const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
  const unsigned short SVG_MEETORSLICE_MEET = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

  attribute unsigned short align;
  attribute unsigned short meetOrSlice;
};

定义在 SVGPreserveAspectRatio 上的数值对齐类型常量 用于表示 ‘preserveAspectRatio’ 可以采用的对齐关键字值. 它们的含义如下:

常量 含义
SVG_PRESERVEASPECTRATIO_NONE none 关键字.
SVG_PRESERVEASPECTRATIO_XMINYMIN xMinYMin 关键字.
SVG_PRESERVEASPECTRATIO_XMIDYMIN xMidYMin 关键字.
SVG_PRESERVEASPECTRATIO_XMAXYMIN xMaxYMin 关键字.
SVG_PRESERVEASPECTRATIO_XMINYMID xMinYMid 关键字.
SVG_PRESERVEASPECTRATIO_XMIDYMID xMidYMid 关键字.
SVG_PRESERVEASPECTRATIO_XMAXYMID xMaxYMid 关键字.
SVG_PRESERVEASPECTRATIO_XMINYMAX xMinYMax 关键字.
SVG_PRESERVEASPECTRATIO_XMIDYMAX xMidYMax 关键字.
SVG_PRESERVEASPECTRATIO_XMAXYMAX xMaxYMax 关键字.
SVG_PRESERVEASPECTRATIO_UNKNOWN 某种其他类型的值.

类似地, 定义在 SVGPreserveAspectRatio 上的数值 meet-or-slice 类型常量 用于表示 ‘preserveAspectRatio’ 可以 采用的 meet-or-slice 关键字值. 它们的 含义如下:

常量 含义
SVG_MEETORSLICE_MEET meet 关键字.
SVG_MEETORSLICE_SLICE slice 关键字.
SVG_MEETORSLICE_UNKNOWN 某种其他类型的值.

align IDL 属性 表示 ‘preserveAspectRatio’ 值中的对齐关键字部分. 获取时, 执行以下步骤:

  1. 令 value 反映基值, 该基值属于一个 ‘preserveAspectRatio’ 属性. value 是该属性当前的非动画值 (如果该属性不存在 或无效, 则使用该属性的初始值).
  2. 返回上面对齐 常量表中与 value 中对齐关键字对应的常量值.

设置 align 时, 执行以下步骤:

  1. 如果 SVGPreserveAspectRatio 为只读, 则抛出 NoModificationAllowedError.
  2. 如果 value 是 SVG_PRESERVEASPECTRATIO_UNKNOWN 或在上面的 对齐关键字表中没有对应条目, 则抛出 TypeError.
  3. 令 string 为上面对齐关键字表中 与 value 对应的关键字.
  4. 向 string 追加一个 U+0020 SPACE 字符.
  5. 令 meet or slice 为从此 SVGPreserveAspectRatio 上的 meetOrSlice 成员返回的值 .
  6. 向 string 追加上面 meet-or-slice 关键字表中 与 meet or slice 对应的关键字.
  7. 将被反映的 ‘preserveAspectRatio’ 属性设置为 string.

meetOrSlice IDL 属性 表示 ‘preserveAspectRatio’ 值中的对齐关键字部分. 获取时, 执行以下步骤:

  1. 令 value 为一个 ‘preserveAspectRatio’ 值, 它 反映基础值, 该值属于一个 ‘preserveAspectRatio’ 属性 value 是该属性当前的非动画值.
  2. 如果 value 中不存在 meet-or-slice 值, 则返回 SVG_MEETORSLICE_MEET.
  3. 否则, meet-or-slice 值存在. 返回上述 meet-or-slice 常量表中 为 value 中的 meet-or-slice 关键字指定的常量值.

设置 meetOrSlice 时, 执行以下步骤:

  1. 如果 SVGPreserveAspectRatio 为只读, 则抛出 NoModificationAllowedError.
  2. 如果 value 是 SVG_MEETORSLICE_UNKNOWN 或在上面的 meet-or-slice 关键字表中没有对应条目, 则抛出 TypeError.
  3. 令 align 为从此 SVGPreserveAspectRatio 上的 align 成员返回的值 .
  4. 令 string 为上面对齐关键字表中 与 align 对应的关键字.
  5. 向 string 追加一个 U+0020 SPACE 字符.
  6. 向 string 追加上面 meet-or-slice 关键字表中 与 value 对应的关键字.
  7. 将被反映的 ‘preserveAspectRatio’ 属性设置为 string.

8.14.5. 接口 SVGAnimatedPreserveAspectRatio

一个 SVGAnimatedPreserveAspectRatio 对象 用于反映 ‘preserveAspectRatio’ 属性.

[Exposed=Window]
interface SVGAnimatedPreserveAspectRatio {
  [SameObject] readonly attribute SVGPreserveAspectRatio baseVal;
  [SameObject] readonly attribute SVGPreserveAspectRatio animVal;
};

baseVal 和 animVal IDL 属性表示被反映的 ‘preserveAspectRatio’ 属性当前的非动画值. 获取 baseVal 或 animVal 时, 返回一个 SVGPreserveAspectRatio 对象, 该对象 反映从具有此反映 IDL 属性的对象所属 SVG 元素上的 ‘preserveAspectRatio’ 属性的基值 , 该反映 IDL 属性的类型为 SVGAnimatedPreserveAspectRatio.


第 9 章: 路径

9.1. 介绍

路径表示可以被填充或 描边的形状轮廓. 路径也可以用作裁剪路径, 用于描述 动画, 或定位文本. 路径可以同时用于 这些功能中的多个功能. (参见 填充, 描边和绘制服务器, 裁剪和遮罩, 动画 ('animateMotion'), 和路径上的文本.)

路径使用当前点的概念来描述. 类比 在纸上绘图, 当前点可以 被视为画笔的位置. 画笔的位置 可以改变, 并且可以通过沿直线或 曲线拖动画笔来描绘形状的轮廓 (开放或闭合) .

路径表示对象轮廓的几何形状, 使用 moveto (设置新的当前点), lineto (绘制直线), curveto (使用 三次 Bézier 绘制曲线), arc (椭圆 或圆弧)和 closepath (通过连接到最后一个 moveto 来闭合当前 形状)命令定义. 复合路径 (即, 具有多个子路径的路径) 可以实现对象中的 "donut holes" 等效果.

本章描述 SVG 路径的语法, 行为和 DOM 接口. SVG 路径的各种实现说明可在‘path’ 元素实现 说明中找到.

SVG 中使用 ‘path’ 元素定义路径.

所有基本形状都根据其 等效路径来描述, 即 它们作为路径时的形状. (‘path’ 元素的等效路径就是 路径本身.)

9.2. ‘path’ 元素

‘path’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
几何特性:
DOM 接口:

‘path’ 元素的形状轮廓使用 d 特性指定. 参见下面的路径数据.

9.3. 路径数据

9.3.1. 路径数据的一般信息

路径通过包含一个 ‘path’ 元素来定义, 其 d 特性指定 路径数据. 路径数据包含 moveto, lineto, curveto (包括三次和 二次 Bézier), arc 和 closepath 指令.

示例 triangle01 指定一个三角形形状的路径. ( M 表示 moveto, L 表示 lineto, 而 z 表示 closepath).

<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>示例 triangle01- 'path' 的简单示例</title>
  <desc>绘制三角形的路径</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>
示例 triangle01 — 'path' 的简单示例

示例 triangle01

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

路径数据可以包含换行字符, 因而可以 拆分为多行以提高可读性. 标记中的属性内部的换行在解析时会被规范化为空格 字符.

路径数据的语法非常简洁, 以便实现 最小文件大小和高效下载, 因为许多 SVG 文件 将主要由其路径数据构成. SVG 尝试最小化路径数据大小的一些方式如下:

路径数据语法是一种前缀表示法 (即, 命令 后跟参数). 唯一允许的小数点是 Unicode U+002E FULL STOP (".") 字符 (在 Unicode 中也称为 PERIOD, dot 和 decimal point), 不允许其他分隔 字符 [UNICODE]. (例如, 以下是路径数据流中的 无效数值: "13,000.56". 应改为: "13000.56".)

对于命令的相对版本, 所有坐标 值都相对于命令开始时的当前点 .

在下面的表格中, 使用以下表示法 描述给定路径命令的语法:

在路径命令的描述中, cpx 和 cpy 表示当前点的坐标.

9.3.2. 指定路径数据: ‘d’ 特性

名称: d
值: none | <string>
初始值: none
适用于: ‘path’
继承: 否
百分比: 不适用
媒体: 视觉
计算值: 如指定值
动画类型: 见正文

d 特性用于指定 ‘path’ 元素的形状.

值 none 表示该元素没有 路径数据. 对于 ‘path’ 元素, 这意味着该 元素不会渲染, 也不会贡献给 祖先 容器元素的边界框.

路径由多个线段组成, 除 moveto 或 closepath 外, 每个显式 或隐式命令 都定义一个路径段.

路径数据中指定的所有坐标和长度都必须被视为 当前用户坐标系统中的用户单位.

<string> 值 使用路径数据字符串指定形状. <string> 值的内容必须匹配下面定义的 svg-path EBNF 语法, 并且字符串中的错误按照 路径数据错误处理一节中的规则 处理. 如果路径数据字符串不包含有效命令, 则其行为 与 none 值相同.

对于动画, 只有当路径数据字符串具有 相同结构时, 两个 d 特性值才能平滑插值 , (即路径数据 命令的数量和类型完全相同且顺序相同). 如果指定了动画 而路径数据命令列表的结构不同, 则这些值必须 使用 离散 动画类型进行插值 .

对于 from/by 动画 或累加动画, 如果 指定的动画值 不兼容 (即路径数据命令列表没有相同的 结构), 则动画不得产生效果值. 在动画持续期间以及动画结束后, 元素必须使用基值 渲染. 特别是, 当指定 ‘fill’='freeze' 时, 冻结值必须是基值.

by 动画根据定义是累加的, 因此当基值的 路径数据命令列表与 by 值不兼容时, 累加 合成未定义; 参见 SMIL Animation: from, to, by 和累加行为.

如果路径数据命令列表具有相同结构, 则每个路径数据命令的每个 参数必须 单独插值 为 实数. 标志和布尔值必须作为 零和一之间的分数进行插值, 任何非零值都被视为 一/true 的值.

在 London 编辑会议上决议 "d 将成为呈现属性 (名称 不变), 其值为路径数据字符串".

以下各节列出了可在 路径数据字符串中使用的命令. 绘制直线段的命令包括lineto 命令 (L, l, H, h, V 和 v) 和close path 命令 (Z 和 z). 以下三组命令绘制曲线:

9.3.3. "moveto" 命令

"moveto" 命令 (M 或 m)必须建立一个新的初始点 和新的当前点. 其效果就像提起 "画笔" 并将其移动到 新位置. 路径数据段 (如果存在)必须以 "moveto" 命令开始. 后续 "moveto" 命令 (即, 当 "moveto" 不是第一个命令时)表示新 子路径的开始:

命令 名称 参数 描述
M (绝对)
m (相对)
moveto (x y)+ 在给定的 (x,y) 坐标处开始新的子路径. M (大写)表示后面是绝对 坐标; m (小写) 表示后面是相对坐标. 如果 moveto 后面 跟有多对坐标, 后续坐标对 被视为隐式 lineto 命令. 因此, 如果 moveto 是相对的, 隐式 lineto 命令也将是相对的, 如果 moveto 是绝对的, 则隐式 lineto 命令也是绝对的. 如果相对 moveto (m)作为路径的第一个元素出现, 则将其视为一对绝对坐标. 在这种 情况下, 后续坐标对被视为相对 坐标, 即使初始 moveto 被解释为绝对 moveto.

使用相对 m 命令时, 移动到的位置为 (cpx + x, cpy + y).

9.3.4. "closepath" 命令

"closepath" (Z 或 z) 通过将当前子路径连接回其初始点来结束该子路径. 会自动 从当前点绘制一条直线到当前子路径的初始点 . 此路径段的长度可以为零 .

如果 "closepath" 后立即跟随 "moveto", 则 "moveto" 标识下一个子路径的起点. 如果 "closepath" 后立即跟随任何其他命令, 则 下一个子路径从与当前 子路径相同的初始点开始.

当子路径以 "closepath" 结束时, 它的行为 与通过 "lineto" 命令 "手动" 闭合子路径时在 ‘stroke-linejoin’ 和 ‘stroke-linecap’ 的实现方式上有所不同 . 使用 "closepath" 时, 子路径最后线段的终点 与初始 线段的起点使用 ‘stroke-linejoin’ 的当前值 "连接". 如果改为通过 "lineto" 命令 "手动" 闭合子路径, 则第一线段的起点和最后 线段的终点不会连接, 而是各自使用 ‘stroke-linecap’ 的当前值封端. 命令结束时, 新的当前点被设置为 当前子路径的初始点.

命令 名称 参数 描述
Z 或
z
closepath (无) 通过连接回当前 子路径的初始点来闭合当前子路径 (参见上文). 由于 Z 和 z 命令不接受参数, 它们具有相同效果.

闭合子路径必须使用 "closepath" 命令闭合, 这会 "连接" 第一个和最后一个路径段. 任何其他路径都是开放子路径.

闭合子路径的 行为 不同于最终坐标为该子路径初始点的开放子路径 . 开放子路径的第一个和最后一个路径段不会 连接, 即使最后一个路径段的最终坐标是该子路径的 初始点. 这将导致第一个和最后一个 路径段使用 stroke-linecap 的当前值封端 , 而不是使用 stroke-linejoin 的当前值连接.

如果 "closepath" 后立即跟随 "moveto", 则 "moveto" 标识 下一个子路径的起点. 如果 "closepath" 后立即跟随任何 其他命令, 则下一个子路径必须从与当前子路径相同的初始 点 开始.

9.3.5. "lineto" 命令

各种 "lineto" 命令从 当前点向新点绘制直线:

命令 名称 参数 描述
L (绝对)
l (相对)
lineto (x y)+ 从当前点绘制一条直线到给定的 (x,y) 坐标, 该坐标成为新的当前点. L (大写)表示后面是绝对 坐标; l (小写) 表示后面是相对坐标. 可以指定多 对坐标来绘制折线. 命令结束时, 新的当前点被设置为 最后提供的一组坐标.
H (绝对)
h (相对)
水平 lineto x+ 从当前点绘制水平线. H (大写)表示 后面是绝对坐标; h (小写)表示后面是相对坐标 . 可以提供多个 x 值 (尽管通常 这没有意义). H 或 h 命令等同于 y 坐标指定为 0 的 L 或 l 命令. 命令结束时, 新的当前点 取自最后一个坐标值.
V (绝对)
v (相对)
垂直 lineto y+ 从当前点绘制垂直线. V (大写)表示 后面是绝对坐标; v (小写)表示后面是相对坐标 . 可以提供多个 y 值 (尽管通常 这没有意义). V 或 v 命令等同于 x 坐标指定为 0 的 L 或 l 命令. 命令结束时, 新的当前点 取自最后一个坐标值.

使用相对 l 命令时, 线的终点为 (cpx + x, cpy + y).

使用相对 h 命令时, 线的终点为 (cpx + x, cpy). 这意味着 h 命令使用正 x 值时, 会沿正 x 轴方向绘制水平线.

使用相对 v 命令时, 线的终点为 (cpx, cpy + y).

9.3.6. 三次 Bézier 曲线命令

三次 Bézier 命令如下:

命令 名称 参数 描述
C (绝对)
c (相对)
curveto (x1 y1 x2 y2 x y)+ 从当前 点到 (x,y) 绘制三次 Bézier 曲线, 使用 (x1,y1) 作为 曲线起点处的控制点, 使用 (x2,y2) 作为 曲线终点处的控制点. C (大写) 表示后面是绝对坐标; c (小写)表示后面是相对 坐标. 可以指定多组坐标 来绘制多段 Bézier 曲线. 命令结束时, 新的当前点变为多段 Bézier 曲线中使用的最后一个 (x,y) 坐标对.
S (绝对)
s (相对)
简写/平滑 curveto (x2 y2 x y)+ 从当前 点到 (x,y) 绘制三次 Bézier 曲线. 第一个控制点被假定为 上一命令的第二个控制点相对于当前点的 反射. (如果没有 上一个命令, 或上一个命令不是 C, c, S 或 s, 则假定第一个控制点与当前 点重合.) (x2,y2) 是第二个控制 点 (即, 曲线终点处的控制点). S (大写)表示后面是绝对 坐标; s (小写) 表示后面是相对坐标. 可以指定多 组坐标来绘制 多段 Bézier 曲线. 命令结束时, 新的 当前点变为多段 Bézier 曲线中使用的最后一个 (x,y) 坐标对 .

使用相对 c 或 s 命令时, 每个相对坐标对 都按照 m 命令中的方式计算. 例如, 两个命令的曲线最终控制点 都是 (cpx + x, cpy + y).

示例 cubic01 展示了路径中 三次 Bézier 命令的一些简单用法. 该示例使用内部 CSS 样式表来分配样式 特性. 请注意, "S" 命令的控制点 会自动计算为 上一个 "C" 命令的控制点相对于 "S" 命令起点的反射.

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>示例 cubic01- 路径数据中的三次 Bézier 命令</title>
  <desc>显示路径数据简单示例的图片
        同时使用 "C" 和 "S" 命令,
        并带有显示控制点
        和终点的注释</desc>
  <style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:1 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Verdana }
  ]]></style>

  <rect class="Border" x="1" y="1" width="498" height="398" />

  <polyline class="Connect" points="100,200 100,100" />
  <polyline class="Connect" points="250,100 250,200" />
  <polyline class="Connect" points="250,200 250,300" />
  <polyline class="Connect" points="400,300 400,200" />
  <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle class="EndPoint" cx="100" cy="200" r="10" />
  <circle class="EndPoint" cx="250" cy="200" r="10" />
  <circle class="EndPoint" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="250" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="300" r="10" />
  <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
  <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
  <text class="Label" x="325" y="350"
        style="text-anchor:middle">S400,300 400,200</text>
</svg>
示例 cubic01 — 路径数据中的三次 Bézier 命令

示例 cubic01

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

下图展示了三次 Bézier 曲线如何根据 控制点的位置改变形状. 前五个示例说明一个 三次 Bézier 路径段. 右 下方的示例展示一个 "C" 命令后跟一个 "S" 命令.

示例 cubic02 - 路径数据中的三次 Bézier 命令

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

9.3.7. 二次 Bézier 曲线命令

二次 Bézier 命令如下:

命令 名称 参数 描述
Q (绝对)
q (相对)
二次 Bézier curveto (x1 y1 x y)+ 从当前 点到 (x,y) 绘制二次 Bézier 曲线, 使用 (x1,y1) 作为控制点. Q (大写)表示后面是绝对 坐标; q (小写) 表示后面是相对坐标. 可以指定多 组坐标来绘制 多段 Bézier 曲线. 命令结束时, 新的 当前点变为多段 Bézier 曲线中使用的最后一个 (x,y) 坐标对 .
T (绝对)
t (相对)
简写/平滑二次 Bézier curveto (x y)+ 从当前 点到 (x,y) 绘制二次 Bézier 曲线. 控制点被假定为 上一个命令中的控制点相对于当前点的 反射. (如果没有上一个 命令, 或上一个命令不是 Q, q, T 或 t, 则假定控制点与当前 点重合.) T (大写)表示 后面是绝对坐标; t (小写)表示后面是相对坐标 . 命令结束时, 新的当前点 变为 多段 Bézier 曲线中使用的最后一个 (x,y) 坐标对.

使用相对 q 或 t 命令时, 每个相对坐标对 都按照 m 命令中的方式计算. 例如, 两个命令的曲线最终控制点 都是 (cpx + x, cpy + y).

示例 quad01 展示了路径中 二次 Bézier 命令的一些简单用法. 请注意, "T" 命令的控制点会 自动计算为 上一个 "Q" 命令的控制点相对于 "T" 命令起点的反射.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>示例 quad01 - 路径数据中的二次 Bézier 命令</title>
  <desc>显示一个 "Q" 和一个 "T" 命令的图片,
        并带有显示控制点
        和终点的注释</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- 终点 -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- 控制点以及从终点到控制点的线 -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>
示例 quad01 — 路径数据中的二次 Bézier 命令

示例 quad01

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

9.3.8. 椭圆弧曲线命令

SVG 2 要求: 使 SVG 路径语法中的弧线绘制更简单.
决议: 使路径中的弧线更易于绘制.
目的: 使作者更容易手动编写包含弧线的路径数据.
负责人: Cameron (ACTION-3151)

椭圆弧命令如下:

命令 名称 参数 描述
A (绝对)
a (相对)
椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ 从当前点到 (x, y) 绘制椭圆弧. 椭圆的大小和 方向由两个半径 (rx, ry)和 x-axis-rotation 定义, 后者表示整个 椭圆相对于当前 坐标系统旋转的角度, 单位为度. 椭圆的中心 (cx, cy)会自动计算 以满足其他 参数施加的约束. large-arc-flag 和 sweep-flag 参与自动 计算并帮助确定弧线如何绘制.

使用相对 a 命令时, 弧线的终点 为 (cpx + x, cpy + y).

示例 arcs01 展示了路径中 弧命令的一些简单用法.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>示例 arcs01 - 路径数据中的弧命令</title>
  <desc>带有两个扇形区的饼图
        和一条带弧形凸起的线的图片</desc>
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />
</svg>
示例 arcs01 — 路径数据中的弧命令

示例 arcs01

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

椭圆弧命令绘制椭圆的一段, 必须满足以下约束:

在大多数情况下, 实际上存在四种不同的弧线 (两个不同的椭圆, 每个都有两个不同的弧线扫掠) 满足这些约束. large-arc-flag 和 sweep-flag 指示绘制四种弧线中的哪一种 , 如下:

下面说明 large-arc-flag 和 sweep-flag 的四种组合, 以及根据这些标志的值 将绘制的四种不同弧线. 对于每种情况, 使用了以下路径数据 命令:

<path d="M 125,75 a100,50 0 ?,? 100,50"
      style="fill:none; stroke:red; stroke-width:6"/>

其中 "?,?" 分别替换为 "0,0" "0,1" "1,0" 和 "1,1", 以 生成四种可能情况.

弧命令中标志的说明

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

有关路径数据椭圆弧命令的详细实现说明, 请参阅超出范围的椭圆弧参数一节 .

实现说明附录 提供了相关公式, 供需要将 SVG 弧表示法转换为使用中心点和弧线扫掠的格式的软件使用.

9.3.9. 路径数据的语法

SVG 路径数据匹配以下 EBNF 语法.

svg_path::= wsp* (moveto (wsp* drawto_command)*)? wsp*

drawto_command::=
    moveto
    | closepath
    | lineto
    | horizontal_lineto
    | vertical_lineto
    | curveto
    | smooth_curveto
    | quadratic_bezier_curveto
    | smooth_quadratic_bezier_curveto
    | elliptical_arc

moveto::=
    ( "M" | "m" ) wsp* coordinate_pair_sequence

closepath::=
    ("Z" | "z")

lineto::=
    ("L"|"l") wsp* coordinate_pair_sequence

horizontal_lineto::=
    ("H"|"h") wsp* coordinate_sequence

vertical_lineto::=
    ("V"|"v") wsp* coordinate_sequence

curveto::=
    ("C"|"c") wsp* curveto_coordinate_sequence

curveto_coordinate_sequence::=
    coordinate_pair_triplet
    | (coordinate_pair_triplet comma_wsp? curveto_coordinate_sequence)

smooth_curveto::=
    ("S"|"s") wsp* smooth_curveto_coordinate_sequence

smooth_curveto_coordinate_sequence::=
    coordinate_pair_double
    | (coordinate_pair_double comma_wsp? smooth_curveto_coordinate_sequence)

quadratic_bezier_curveto::=
    ("Q"|"q") wsp* quadratic_bezier_curveto_coordinate_sequence

quadratic_bezier_curveto_coordinate_sequence::=
    coordinate_pair_double
    | (coordinate_pair_double comma_wsp? quadratic_bezier_curveto_coordinate_sequence)

smooth_quadratic_bezier_curveto::=
    ("T"|"t") wsp* coordinate_pair_sequence

elliptical_arc::=
    ( "A" | "a" ) wsp* elliptical_arc_argument_sequence

elliptical_arc_argument_sequence::=
    elliptical_arc_argument
    | (elliptical_arc_argument comma_wsp? elliptical_arc_argument_sequence)

elliptical_arc_argument::=
    number comma_wsp? number comma_wsp? number comma_wsp
    flag comma_wsp? flag comma_wsp? coordinate_pair

coordinate_pair_double::=
    coordinate_pair comma_wsp? coordinate_pair

coordinate_pair_triplet::=
    coordinate_pair comma_wsp? coordinate_pair comma_wsp? coordinate_pair

coordinate_pair_sequence::=
    coordinate_pair | (coordinate_pair comma_wsp? coordinate_pair_sequence)

coordinate_sequence::=
    coordinate | (coordinate comma_wsp? coordinate_sequence)

coordinate_pair::= coordinate comma_wsp? coordinate

coordinate::= sign? number

sign::= "+"|"-"

exponent::= ("e" | "E") sign? digit+

fractional-constant::= (digit* "." digit+) | digit+

number::= fractional-constant exponent?

flag::= ("0" | "1")

comma_wsp::= (wsp+ ","? wsp*) | ("," wsp*)

wsp::= (#x9 | #x20 | #xA | #xC | #xD)

digit::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

EBNF 的处理必须尽可能多地消费给定 EBNF 产生式, 并在遇到 不再满足 产生式的字符时停止. 因此, 在字符串 "M 100-200" 中, "moveto" 的第一个 坐标消费字符 "100", 并在 遇到减号时停止, 因为在 "coordinate" 的产生式中减号 不能跟在数字后面. 结果是第一个坐标为 "100", 而 第二个坐标为 "-200".

类似地, 对于字符串 "M 0.6.5", "moveto" 的第一个坐标 消费字符 "0.6", 并在 遇到第二个小数点时停止, 因为 "coordinate" 的产生式只允许一个小数点. 结果是 第一个坐标为 "0.6", 第二个 坐标为 ".5".

以前规范的 语法允许数字具有末尾小数点而 不带任何小数位 (例如 23.). SVG 2 将数字解析 与 CSS [css-syntax-3] 保持一致, 不再允许这种宽松的数字语法. 但是, 用户代理在解析无歧义时可以继续 接受带末尾小数点的数字. 作者和创作工具不得使用这种不允许的数字格式.

EBNF 允许 d 特性中的路径数据字符串为空. 空路径数据字符串 会禁用路径的渲染. 当 d 特性 的值为 none 时, 也会禁用渲染.

如果遇到不匹配语法的路径数据, 则路径数据存在错误 (参见错误处理).

9.4. 路径方向性

某些功能, 例如标记的方向 和线帽的形状, 根据 路径上给定距离处或单个线段 开始或结束处的路径方向定义.

路径上指定 距离处的路径方向定义如下:

路径段起点 处的方向定义如下:

路径 段终点处的方向定义如下:

9.5. 实现说明

符合规范的 SVG 用户代理必须按照 以下细节实现使用路径数据的功能:

9.5.1. 超出范围的椭圆弧参数

所有椭圆弧参数 (布尔标志除外)都允许任意数值, 但用户代理在渲染曲线或计算其几何形状时 必须对无效值进行以下调整:

这种宽容但一致的超出范围 值处理确保:

9.5.2. 反射的控制点

S/s 和 T/t 命令表示 给定三次 Bézier 线段的第一个控制点通过 将上一路径段的最终控制点 相对于当前点反射来计算. 精确数学关系 如下.

如果当前点为 (curx, cury), 上一个路径段的 最终控制点为 (oldx2, oldy2), 则反射点 (即, (newx1, newy1), 当前路径段的第一个控制点) 为:

(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
               = (2*curx - oldx2, 2*cury - oldy2)

9.5.3. 零长度路径段

零长度的路径段并非无效, 并且会在以下情况下影响渲染:

9.5.4. 路径数据中的错误处理

路径数据流中无法识别的内容 (即, 不属于路径数据语法的内容)是 错误. 在这种情况下, 必须使用以下错误处理规则:

9.6. 沿路径的距离

各种操作, 包括路径上的文本和运动动画 以及各种描边 操作, 都要求用户代理计算 沿图形元素几何形状的距离, 例如 ‘path’.

存在用于计算沿路径距离的精确数学方法, 但公式高度复杂且需要大量 计算. 建议创作产品和用户 代理采用可产生尽可能精确结果的算法 ; 但是, 为了适应实现差异 并帮助距离计算产生近似作者意图的结果, 可以使用 ‘pathLength’ 属性 提供作者计算的 路径总长度, 以便用户代理可以按照 ‘pathLength’ 与用户代理自身 计算的总路径长度值之比来缩放沿路径距离 计算.

‘path’ 元素中的 "moveto" 操作被定义为 零长度. 只有各种 "lineto", "curveto" 和 "arcto" 命令对路径长度计算有贡献.

9.6.1. ‘pathLength’ 属性

名称 值 初始值 可动画
pathLength <number> (none) 是

作者计算的 路径总长度, 以用户单位表示. 此值用于校准 用户代理自身的沿路径距离 计算与作者的计算. 用户代理会 按照 ‘pathLength’ 与用户 代理自身计算的总路径长度值之比缩放所有沿路径距离计算. ‘pathLength’ 可能影响 路径上的文本, 运动动画 和 各种描边操作的计算.

零值有效, 并且必须被视为无穷大的缩放因子. 无限缩放后的零值必须保持为零, 而任何大于零的非百分比值 必须变为 +Infinity.

负值是错误 (参见错误处理).

‘pathLength’ 对百分比 沿路径距离计算没有影响.

9.6.2. ‘path-length’ 特性

名称: path-length
值: none | <length> [0,∞]
初始值: none
适用于: ‘path’, ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’
继承: 否
百分比: 不适用
媒体: 视觉
计算值: 关键字 none, 或绝对长度
动画类型: 按计算值

path-length 特性提供作者 计算的 路径总长度. 此值用于校准用户代理自身的 沿路径距离 计算与作者的计算.

值 none 表示未指定 作者路径长度, 并使用用户代理自身计算的 路径长度.

<length> 值必须为零或更大. 零值有效, 并且必须被视为 无穷大的缩放因子. 无限缩放后的零值必须保持为零, 而任何 大于零的值必须变为 +Infinity.

SVG ‘pathLength’ 属性作为 呈现属性映射到 path-length CSS 特性. 该属性的无单位数值被解释为 px 单位的 <length> 值. 当 ‘pathLength’ 属性值不存在并且 path-length 特性计算为 none 时, 不应用作者缩放.

path-length 特性影响:

path-length 对百分比 沿路径距离 计算没有影响.

CSS 工作组决议添加 path-length 作为 CSS 特性, 并使 ‘pathLength’ 映射到它 (会议记录, 2020 年 1 月 22 日).

9.7. DOM 接口

9.7.1. 接口 SVGPathElement

SVGPathElement 对象表示 DOM 中的 ‘path’.

[Exposed=Window]
interface SVGPathElement : SVGGeometryElement {
};

第 10 章: 基本形状

10.1. 介绍和定义

基本 形状
形状
形状元素
由直线和曲线的某种组合 定义的图形元素. 具体而言: ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’ 和 ‘rect’.

SVG 包含以下基本形状元素集合:

从数学上讲, 这些形状元素等同于 构造相同形状的 ‘path’ 元素 . 基本 形状可以描边, 填充并用作裁剪路径. ‘path’ 元素可用的所有特性也适用于基本 形状.

每种形状的等效路径和计算描边的算法 在下面的形状 各节中定义.

下面 ‘rect’, ‘circle’ 和 ‘ellipse’ 的等效路径 都以绘制一条零长度线的 closepath 结束, 因为它之前的命令已经在初始点结束. 零长度线不会改变形状的填充或描边方式. 它会影响顶点标记的位置, 但这些元素上的标记按照 顶点标记中的规则放置, 而不是通过计算为每种形状列出的命令数量.

10.2. ‘rect’ 元素

‘rect’ 元素定义一个 与当前用户坐标 系统轴对齐的矩形. 可以通过为 rx 和 ry 几何特性设置 非零值来实现圆角矩形.

‘rect’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
几何特性:
DOM 接口:

x 和 y 坐标指矩形的左边缘和上边缘, 位于当前用户坐标系统中.

width 和 height 特性定义矩形的整体宽度和高度. 任一特性的负值都是无效的, 并且必须被忽略. 任一尺寸的计算值为零都会禁用元素的渲染.

对于圆角矩形, rx 和 ry 特性的计算值定义 用于圆化矩形角的椭圆弧的 x 轴和 y 轴半径. 弧线始终沿水平轴和垂直轴对称; 要创建角部圆角不均匀的矩形 , 请使用 ‘path’ 显式定义形状. 任一特性的负值都是无效的, 并且必须被忽略. 任一尺寸的计算值为零, 或两个尺寸的计算值都为 auto, 都会产生没有圆角的矩形.

x 轴和 y 轴圆角半径的使用值 可以从另一个尺寸隐式确定 (使用 auto 值), 并且还会受到钳制, 使矩形 直线段的长度永远不会为负. rx 和 ry 的使用值 通过按顺序执行以下步骤从计算值确定:

  1. 如果 rx 和 ry 的计算值均为 auto (由于 auto 是两个特性的初始值, 因此如果作者均未 指定它们或作者提供的所有值都无效, 也会发生这种情况), 则 rx 和 ry 的使用值均为 0. (这将产生方角.)
  2. 否则, 按如下方式将指定值转换为绝对值:
    1. 如果 rx 设置为长度值或 百分比, 但 ry 为 auto, 则计算 rx 的等效绝对长度, 百分比相对于矩形的使用 width 解析; ry 的绝对值与其相同.
    2. 如果 ry 设置为长度值或 百分比, 但 rx 为 auto, 则计算 ry 的等效绝对长度, 百分比相对于矩形的使用 height 解析; rx 的绝对值与其相同.
    3. 如果 rx 和 ry 都设置为长度或百分比, 则分别生成绝对值, rx 的百分比相对于使用 width 解析, 而 ry 的百分比相对于 使用 height 解析.
  3. 最后, 应用钳制以生成使用值:
    1. 如果绝对 rx (经过上述步骤后) 大于使用 width 的一半, 则 rx 的使用值为 使用 width 的一半.
    2. 如果绝对 ry (经过上述步骤后) 大于使用 height 的一半, 则 ry 的使用值为 使用 height 的一半.
    3. 否则, rx 和 ry 的使用值为之前计算的绝对值 .

从数学上讲, ‘rect’ 元素按照 如下方式映射为等效的 ‘path’ 元素 , 在生成绝对使用值 x, y, width, height, rx, 和 rx 并以用户坐标系统的用户单位表示之后, 对每个等效几何特性 遵循上述规则以及单位中指定的规则:

  1. 执行绝对moveto 操作到 位置 (x+rx,y);
  2. 执行绝对水平lineto , 参数为 x+width-rx;
  3. 如果 rx 和 ry 均大于零, 则执行绝对椭圆弧 操作到坐标 (x+width,y+ry), 其中 rx 和 ry 用作 椭圆弧命令的等效参数, x-axis-rotation 和 large-arc-flag 设置为零, sweep-flag 设置为一;
  4. 执行绝对垂直lineto , 参数为 y+height-ry;
  5. 如果 rx 和 ry 均大于零, 则执行绝对椭圆弧 操作到坐标 (x+width-rx,y+height), 使用与之前相同的参数;
  6. 执行绝对水平lineto , 参数为 x+rx;
  7. 如果 rx 和 ry 均大于零, 则执行绝对椭圆弧 操作到坐标 (x,y+height-ry), 使用与之前相同的参数;
  8. 执行绝对垂直lineto , 参数为 y+ry
  9. 如果 rx 和 ry 均大于零, 则执行绝对椭圆弧 操作到坐标 (x+rx,y), 使用与之前相同的参数;
  10. 执行一个closepath 命令.

路径分解在电话会议期间解决于 2013 年 6 月 3 日.

示例 rect01 展示一个 具有尖角的矩形. ‘rect’ 元素使用黄色填充 并使用海军蓝描边.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 rect01 - 具有尖角的矩形</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  />
</svg>
示例 rect01 — 具有尖角的矩形

示例 rect01

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

示例 rect02 展示 两个圆角矩形. rx 指定如何圆化 矩形的角. 请注意, 由于没有为 ry 属性指定值, 使用值将从 rx 属性派生.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 rect02 - 圆角矩形</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="100" y="100" width="400" height="200" rx="50"
        fill="green" />

  <g transform="translate(700 210) rotate(-30)">
    <rect x="0" y="0" width="400" height="200" rx="50"
          fill="none" stroke="purple" stroke-width="30" />
  </g>
</svg>
示例 rect02 — 以用户坐标表示的圆角矩形

示例 rect02

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

10.3. ‘circle’ 元素

‘circle’ 元素 根据中心点和 半径定义圆.

‘circle’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
几何特性:
DOM 接口:

cx 和 cy 属性定义圆心的坐标.

r 属性定义圆的半径. 负值是无效的, 并且必须被忽略. 计算值为零会禁用元素的渲染.

从数学上讲, ‘circle’ 元素被映射为一个 等效的 ‘path’ 元素 , 该元素由四个 椭圆 弧线段组成, 每个覆盖圆的四分之一. 路径 从半径上的 "3 点钟" 位置开始, 并沿 顺时针方向前进 (在任何变换之前). 弧命令的 rx 和 ry 参数 都等于 r 特性的使用值, 在 转换为局部用户单位后, 而 x-axis-rotation 和 large-arc-flag 设置为零, sweep-flag 设置为一. 坐标按如下方式计算, 其中 cx, cy, 和 r 是等效特性的使用值, 转换为用户单位:

  1. 一个 move-to 命令到点 cx+r,cy;
  2. 弧到 cx,cy+r;
  3. 弧到 cx-r,cy;
  4. 弧到 cx,cy-r;
  5. 弧到 cx+r,cy;
  6. 一个 closepath 命令.

路径分解在电话会议期间解决于 2013 年 6 月 3 日.

示例 circle01 包含一个 ‘circle’ 元素, 使用红色填充 并使用蓝色描边.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 circle01 - 使用红色填充并使用蓝色描边的圆</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>
示例 circle01 — 使用红色填充并使用蓝色描边的圆

示例 circle01

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

10.4. ‘ellipse’ 元素

‘ellipse’ 元素 根据中心点和两个半径定义一个 与当前用户坐标 系统轴对齐的椭圆.

‘ellipse’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
几何特性:
DOM 接口:

cx 和 cy 坐标定义椭圆的中心.

rx 和 ry 特性定义椭圆的 x 轴和 y 轴半径 . 任一特性的负值都是无效的, 并且必须被忽略. 任一尺寸的计算值为零, 或两个尺寸的计算值都为 auto, 都会禁用元素的渲染.

rx 或 ry 中任一个的 auto 值 都会按照上面为矩形给出的规则转换为使用值 (但不根据 width 或 height 进行任何钳制). 实际上, auto 值会创建一个圆形 , 其半径由仅以一个维度表示的值定义; 这允许创建半径根据以下任一项定义的圆:

SVG 2 中新增. 为 rx 和 ry 添加 auto 值, 以允许 对椭圆和矩形的这些特性进行一致解析. 以前, 如果 rx 或 ry 中任一个未指定, 则椭圆不会渲染.

从数学上讲, ‘ellipse’ 元素被映射为一个 等效的 ‘path’ 元素 , 该元素由四个 椭圆 弧线段组成, 每个覆盖椭圆的四分之一. 路径 从半径上的 "3 点钟" 位置开始, 并沿 顺时针方向前进 (在任何变换之前). 弧命令的 rx 和 ry 参数 是等效特性转换为局部用户单位后的使用值, 而 x-axis-rotation 和 large-arc-flag 设置为零, sweep-flag 设置为一. 坐标按如下方式计算, 其中 cx, cy, rx, 和 ry 是等效特性的使用值, 转换为用户单位:

  1. 一个 move-to 命令到点 cx+rx,cy;
  2. 弧到 cx,cy+ry;
  3. 弧到 cx-rx,cy;
  4. 弧到 cx,cy-ry;
  5. 弧到 cx+rx,cy;
  6. 一个 closepath 命令.

路径分解在电话会议期间解决于 2013 年 6 月 3 日.

下面的示例 ellipse01 指定 两个椭圆在用户坐标系统中的坐标 , 该系统由 ‘viewBox’ 属性在 ‘svg’ 元素上以及 transform 特性在 ‘g’ 和 ‘ellipse’ 元素上建立. 两个 椭圆都对 cx 和 cy 属性使用默认值零 (椭圆的 中心). 第二个椭圆被旋转.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 ellipse01 - 椭圆示例</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g transform="translate(300 200)">
    <ellipse rx="250" ry="100"
          fill="red"  />
  </g>

  <ellipse transform="translate(900 200) rotate(-30)" 
        rx="250" ry="100"
        fill="none" stroke="blue" stroke-width="20"  />

</svg>
示例 ellipse01 — 以用户坐标表示的椭圆

示例 ellipse01

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

10.5. ‘line’ 元素

‘line’ 元素定义一条 从一个点开始 并在另一个点结束的线段.

‘line’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
DOM 接口:

属性定义:

名称 值 初始值 可动画
x1, y1 <length-percentage> | <number> 0 是
线起点的 x 轴和 y 轴坐标.
名称 值 初始值 可动画
x2, y2 <length-percentage> | <number> 0 是
线终点的 x 轴和 y 轴坐标.

未来的规范可能会将 ‘x1’, ‘y1’, ‘x2’, 和 ‘y2’ 属性转换为几何 特性. 目前, 它们只能通过元素属性指定, 而不能通过 CSS 指定.

从数学上讲, ‘line’ 元素可以按照 如下方式映射为等效的 ‘path’ 元素 , 在根据 单位将坐标转换为用户坐标系统的用户单位 以生成值 x1, y1, x2, 和 y2 之后:

因为 ‘line’ 元素是 单条线, 因而在几何上是 一维的, 它们没有内部; 因此, ‘line’ 元素永远不会 被填充 (参见 fill 特性).

下面的示例 line01 指定了由 ‘viewBox’ 属性在 ‘svg’ 元素上建立的用户坐标系统 中五条线的坐标. 这些 线具有不同的粗细.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 line01 - 以用户坐标表示的线</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g stroke="green" >
    <line x1="100" y1="300" x2="300" y2="100"
            stroke-width="5"  />
    <line x1="300" y1="300" x2="500" y2="100"
            stroke-width="10"  />
    <line x1="500" y1="300" x2="700" y2="100"
            stroke-width="15"  />
    <line x1="700" y1="300" x2="900" y2="100"
            stroke-width="20"  />
    <line x1="900" y1="300" x2="1100" y2="100"
            stroke-width="25"  />
  </g>
</svg>
示例 line01 — 以用户坐标表示的线

示例 line01

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

10.6. ‘polyline’ 元素

‘polyline’ 元素 定义一组相连的直 线段. 通常, ‘polyline’ 元素定义开放 形状.

‘polyline’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
DOM 接口:

属性定义:

名称 值 初始值 可动画
points <points> (none) 是

其中:

<points> =
[ <number>+ ]#

构成折线的点. 所有坐标 值均位于用户坐标系统中.

如果提供奇数个坐标, 则元素处于 错误状态, 用户代理行为与错误 指定的 ‘path’ 元素相同. 在这种错误情况下, 用户代理会丢弃 最后一个奇数坐标, 并以其他方式渲染形状.

初始值, (none), 表示折线元素 有效但不会渲染.

未来的规范可能会将 ‘points’ 属性转换为 几何特性. 目前, 它只能通过元素属性指定, 而不能通过 CSS 指定.

从数学上讲, ‘polyline’ 元素可以按照 如下方式映射为等效的 ‘path’ 元素 :

下面的示例 polyline01 指定了由 ‘viewBox’ 属性在 ‘svg’ 元素上建立的用户坐标系统中的折线.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 polyline01 - 逐渐变大的条形</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polyline fill="none" stroke="blue" stroke-width="10" 
            points="50,375
                    150,375 150,325 250,325 250,375
                    350,375 350,250 450,250 450,375
                    550,375 550,175 650,175 650,375
                    750,375 750,100 850,100 850,375
                    950,375 950,25 1050,25 1050,375
                    1150,375" />
</svg>
示例 polyline01 — 逐渐变大的条形

示例 polyline01

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

10.7. ‘polygon’ 元素

‘polygon’ 元素 定义一个由一组相连直线段 组成的闭合形状.

‘polygon’
类别:
图形元素, 可渲染元素, 形状元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, marker, mask, script, style
属性:
DOM 接口:

属性定义:

名称 值 初始值 可动画
points <points> (none) 是

构成多边形的点. 所有坐标 值均位于用户坐标系统中.

如果提供奇数个坐标, 则元素处于 错误状态, 用户代理行为与错误 指定的 ‘path’ 元素相同.

初始值, (none), 表示多边形元素 有效, 但不会渲染.

未来的规范可能会将 ‘points’ 属性转换为 几何特性. 目前, 它只能通过元素属性指定, 而不能通过 CSS 指定.

从数学上讲, ‘polygon’ 元素可以按照 如下方式映射为等效的 ‘path’ 元素 :

下面的示例 polygon01 指定了两个多边形 (一个星形和一个六边形), 位于 由 ‘viewBox’ 属性 在 ‘svg’ 元素上建立的用户坐标系统中.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 polygon01 - 星形和六边形</desc>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
  <polygon fill="lime" stroke="blue" stroke-width="10" 
            points="850,75  958,137.5 958,262.5
                    850,325 742,262.6 742,137.5" />
</svg>
示例 polygon01 — 星形和六边形

示例 polygon01

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

10.8. DOM 接口

10.8.1. 接口 SVGRectElement

SVGRectElement 对象表示 DOM 中的 ‘rect’ 元素 .

[Exposed=Window]
interface SVGRectElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGAnimatedLength rx;
  [SameObject] readonly attribute SVGAnimatedLength ry;
};

x, y, width, height, rx 和 ry IDL 属性 分别反映 x, y, width, height, rx 和 ry 特性的计算值及其对应的呈现属性 .

10.8.2. 接口 SVGCircleElement

SVGCircleElement 对象 表示 DOM 中的 ‘circle’ 元素.

[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength cx;
  [SameObject] readonly attribute SVGAnimatedLength cy;
  [SameObject] readonly attribute SVGAnimatedLength r;
};

cx, cy 和 r IDL 属性 分别反映 cx, cy 和 r 特性的计算值及其对应的呈现 属性 .

10.8.3. 接口 SVGEllipseElement

SVGEllipseElement 对象 表示 DOM 中的 ‘ellipse’ 元素.

[Exposed=Window]
interface SVGEllipseElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength cx;
  [SameObject] readonly attribute SVGAnimatedLength cy;
  [SameObject] readonly attribute SVGAnimatedLength rx;
  [SameObject] readonly attribute SVGAnimatedLength ry;
};

cx, cy, rx 和 ry IDL 属性反映 cx, cy, rx 和 ry 特性的计算值 及其对应的呈现属性 .

10.8.4. 接口 SVGLineElement

SVGLineElement 接口对应 ‘line’ 元素.
[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength x1;
  [SameObject] readonly attribute SVGAnimatedLength y1;
  [SameObject] readonly attribute SVGAnimatedLength x2;
  [SameObject] readonly attribute SVGAnimatedLength y2;
};

x1, y1, x2 和 y2 IDL 属性 分别反映 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 内容属性

10.8.5. 混入 SVGAnimatedPoints

SVGAnimatedPoints 接口 用于反映 ‘polygon’ 或 ‘polyline’ 元素上的 ‘points’ 属性. 它被混入 SVGPolygonElement 和 SVGPolylineElement 接口.

interface mixin SVGAnimatedPoints {
  [SameObject] readonly attribute SVGPointList points;
  [SameObject] readonly attribute SVGPointList animatedPoints;
};

points IDL 属性 表示被反映属性当前的非动画值. 获取 points 时, 返回一个 SVGPointList 对象, 它 反映被反映属性的基 值.

animatedPoints IDL 属性 表示被反映属性当前的非动画值. 获取 animatedPoints 时, 返回一个 SVGPointList 对象, 它 反映被反映属性的动画 值.

从 points 和 animatedPoints 返回的对象必须不同, 即使 当前没有动画影响该属性.

10.8.6. 接口 SVGPointList

SVGPointList 接口是一个列表接口, 其 元素为 SVGPoint 对象. SVGPointList 对象表示点列表.

[Exposed=Window]
interface SVGPointList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGPoint initialize(SVGPoint newItem);
  getter SVGPoint getItem(unsigned long index);
  SVGPoint insertItemBefore(SVGPoint newItem, unsigned long index);
  SVGPoint replaceItem(SVGPoint newItem, unsigned long index);
  SVGPoint removeItem(unsigned long index);
  SVGPoint appendItem(SVGPoint newItem);
  setter undefined (unsigned long index, SVGPoint newItem);
};

SVGPointList 的所有接口成员的行为 定义于列表接口.

本规范对 SVGPoint 对象的行为施加了超出 Geometry Interfaces 规范所述的额外要求, 以便它们可用于反映 ‘points’ 属性.

每个 SVGPoint 对象都以四种 模式之一运行. 它 可以:

  1. 反映一个被反映的可动画 属性基值的元素 (通过 SVGAnimatedPoints 的 points 成员上的方法公开),
  2. 反映一个被反映的可动画 属性动画值的元素 (通过 SVGAnimatedPoints 的 animatedPoints 成员上的方法公开),
  3. 表示给定 ‘svg’ 元素的当前平移 (通过 SVGSVGElement 上的 currentTranslate 成员公开), 或者
  4. 处于分离状态, 这是使用构造函数或 createSVGPoint 创建的 SVGPoint 对象的情况.

SVGPoint 对象可以与特定元素关联 . 关联元素用于 确定如果对象反映一个属性时应更新哪个元素的内容属性 . 除非另有说明, SVGPoint 对象不 与任何元素关联.

SVGPoint 对象可以被指定为 只读, 这意味着尝试修改该对象将导致抛出异常 . 当向只读 SVGPoint 的 x, y, w 或 z IDL 属性赋值时, 必须 抛出 NoModificationAllowedError 而不是更新内部 坐标值.

请注意, 根据 svgwg#706 (2019-10 WG 决议), SVG 2 恢复 SVG 1.1 的惯例: 不存在 单独的只读变体接口. SVGPoint 可以通过内部标志指定为 只读; 写入操作会在同一接口上抛出 NoModificationAllowedError .

向可写 SVGPoint 的 x, y, w 或 z IDL 属性赋值时, 在更新 内部坐标值后执行以下步骤:

  1. 如果 SVGPoint 反映一个 基值元素, 该基值属于一个被反映的属性, 则重新序列化 被反映的属性, 使用反映 该属性基值的 SVGPointList.
  2. 否则, 如果 SVGPoint 表示 当前平移, 该平移属于一个 ‘svg’ 元素, 并且该 元素是最外层 svg 元素, 则:
    1. 令 [a b c d e f] 为表示文档缩放和平移 变换的 2x3 矩阵.
    2. 令 x 和 y 分别为 SVGPoint 对象的 x 和 y 坐标 .
    3. 将文档的缩放和平移变换设置为 [a 0 0 d x y].

10.8.7. 接口 SVGPolylineElement

SVGPolylineElement 对象 表示 DOM 中的 ‘polyline’ 元素.

[Exposed=Window]
interface SVGPolylineElement : SVGGeometryElement {
};

SVGPolylineElement includes SVGAnimatedPoints;

10.8.8. 接口 SVGPolygonElement

SVGPolygonElement 对象 表示 DOM 中的 ‘polygon’ 元素.

[Exposed=Window]
interface SVGPolygonElement : SVGGeometryElement {
};

SVGPolygonElement includes SVGAnimatedPoints;

第 11 章: 文本

11.1. 介绍

要作为 SVG 文档片段的一部分渲染的文本 使用 ‘text’ 元素指定. ‘text’ 元素中的文本可以 渲染为:

文本布局一节对 文本布局作了介绍. 随后各节涵盖 内容区域以及 在内容区域内 布局文本的算法. 然后分别在各节中讨论与 预格式化, 自动换行, 和 路径上的文本 相对应的专门布局规则.

SVG 1.1 中的文本布局规则大多定义在 SVG 1.1 规范中. 这些规则在很大程度上与 CSS 中的规则相对应. 在 SVG 2 中, 对 CSS 的依赖更加明确. 在 实际上产生的布局是相同的. 直接 依赖 CSS 规范的变化简化了 SVG 规范 , 同时更明显地表明渲染代理可以使用 相同代码来渲染 HTML 和 SVG 中的文本. 特别是, SVG 2 自动换行文本基于 CSS 文本布局.

SVG 的 ‘text’ 元素 像其他图形 元素一样渲染. 因此, 坐标系统 变换, 绘制, 裁剪和 遮罩功能以与应用于 形状, 例如 路径和矩形相同的 方式应用于 ‘text’ 元素.

SVG 文本支持高级排版功能, 包括:

SVG 文本支持国际文本处理需求, 例如:

通过 根据用户首选语言替换不同 文本字符串, 可以实现多语言 SVG 内容.

要绘制的字符表示为 ‘text’ 元素内的字符数据 ([xml], 第 2.4 节). 因此:

出于无障碍原因, 建议文档中包含的文本 具有适当的语义标记, 以 指示其功能. 例如, 为图表某部分提供可见标签的 text 元素 应具有一个 ‘id’, 该 id 被 相关组或路径元素上的 ‘aria-labelledby’ 属性引用. 有关更多信息, 请参阅SVG 无障碍指南.

11.1.1. 定义

字符
字符是 XML 中定义的文本原子单位 [XML].

本质上, 是一个 Unicode 码点. 字符可以是控制指令 (例如制表符, 回车符或换行符), 可渲染标记 (字母, 数字, 标点或其他符号), 或修饰符 (例如组合重音符号).

可寻址字符
可由文本定位 属性和 SVG DOM 文本方法寻址的字符. 布局期间被丢弃的字符, 例如 折叠的 空白字符不可寻址, 位于 display 特性值为 none 的元素 中的字符也不可寻址. 可寻址字符通过索引寻址. 索引在应用任何 text-transform 转换之前确定, 如 SVGTextContentElement 接口中的方法所述. 有两种方法将索引映射到字符; 使用 哪一种取决于用途:
  1. 为了映射文本定位属性, 索引以 Unicode 码点为单位度量 (因此一个 'u' 后跟组合分音符 ' ̈' 计为两个 字符, 而预组合字符 'ü' 计为 一个字符).
  2. 对于 SVG DOM 文本方法, 索引 以 UTF-16 代码单元为单位度量 (因此 U+FFFF 以上的单个 Unicode 码 点将映射为两个可寻址字符, 因为 UTF-16 代码单元由 16 位组成).

不同方法与 SVG 1.1 向后兼容. SVG DOM 文本方法使用 UTF-16 代码单元是 DOM 2 规范中 DOMString 定义所要求的.

SVG 工作组希望获得实现者对 使用 Unicode Standard Annex #29 定义的字素簇 替代 Unicode 码点来 映射文本定位属性的可行性的反馈. 请注意, 使用 CSS 排版字符并不合适, 因为 字符的构成可能取决于上下文 (断行, 断词等).

如果将来引入对 CSS 生成内容文本的支持, 它将包含在可寻址字符数组中.

排版字符
书写系统的一个单位—例如拉丁字母 (包括其附加符号), 韩文音节, 中文表意 字符, 缅甸文音节簇—对于 特定排版操作 (断行, 首字母效果, 字距调整, 对齐, 垂直 排列等)不可再分. 有关规范性定义以及 它与 Unicode 字素簇之间的关系, 请参阅 CSS Text Module Level 3, ([css-text-3]).
字体
字体表示一个有组织的字形集合, 其中各种字形表示共享特定的 外观或样式.
字形
字形表示 字体中渲染内容的一个单位. 通常, 要绘制的字符和相应字形之间存在一一对应 关系 (例如, 通常 字符 "A" 使用单个字形渲染), 但有时 会使用多个字形来渲染单个字符 (例如带重音符号的字符), 或者可以使用单个字形渲染 多个字符 (例如连字). 通常, 字形由 一个或多个形状定义, 例如 路径, 可能还带有其他 信息, 例如帮助字体引擎 在小尺寸下生成清晰文本的渲染提示.
文本内容元素
文本内容元素是使文本 字符串渲染到画布上的 SVG 元素. SVG 文本内容 元素包括: ‘text’, ‘textPath’ 和 ‘tspan’.
文本内容子元素
文本内容子元素是允许作为另一个文本内容 元素后代的文本内容元素. 在 SVG 中, 文本内容子元素包括: ‘textPath’ 和 ‘tspan’.
文本内容块元素
文本内容块元素是一个文本内容元素, 它作为文本单元的独立元素, 并且 可以选择包含某些子文本内容 元素 (例如 ‘tspan’). SVG 2 定义一个文本内容块元素: ‘text’.
内容区域
布局文本的区域. 这等同于 CSS 内容区域.
换行区域
布局文本的区域. 这与内容区域相同 .
行框
包含用于布局单行文本的所有内容的矩形区域. 这与 CSS 行框相同.

虽然各种 CSS 3 文本布局规范都使用该术语, 但目前没有任何一个给出正式定义. 因此该链接指向 CSS 2.1, 并且已向 CSS WG 提交 issue.

行内基方向
内容在一行 或文本行的一部分中排序的主要方向. 它定义一行或文本行一部分的 start 和 end 边 (例如与 text-anchor 特性如何 应用有关). 它由 direction 特性确定. (注意: 文本行中字符的顺序主要 由 Unicode 双向算法控制, 而不是行内基 方向.)
块流方向
行框堆叠的方向. 它 由 writing-mode 特性确定.
对齐点
排版字符上应与 当前文本位置对齐的点. 它由字形 单元格度量确定, 并且可能取决于文字系统和 行内基方向.
当前文本位置
当前用户空间中的一个点, 下一个要渲染的排版字符的对齐点 应放置在该点.
文本块
一个独立的文本块, 其中所有字符 一起定位. 每次新的绝对定位调整 (由于 ‘x’ 或 ‘y’ 属性, 或 强制换行)都会创建一个新的文本块. 连字 替换和双向重排序仅在一个文本块内发生. 文本块仅与预格式化 文本相关.
空白字符
以下字符被视为空白字符: U+0009 CHARACTER TABULATION, U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+000A LINE FEED (LF) 和 U+0020 SPACE.

11.1.2. 字体和字形

字体由字形集合以及使用这些 字形在某种视觉媒介上呈现字符所必需的其他 信息 (统称字体表)组成. 字形集合和字体表的 组合 称为字体数据.

字体可以提供替换和定位表, 格式化器 (文本塑形器)可以使用这些表来重新排序, 组合并 定位字形序列, 形成一个或多个复合 字形. 组合可以像连字一样简单, 也可以像 印度文字音节一样复杂, 后者通常通过某些 重排序组合多个辅音和元音字形. 这些表可能 依赖语言, 从而允许使用适合相应语言的 字母形式.

当一个简单或复合字形为了排版目的表示一个不可分割的单位时 , 它称为排版 字符.

连字是高级文本布局的重要功能. 某些 连字是可选的, 而其他连字 (例如阿拉伯语中)是 必需的. 以下明确规则适用于连字 形成:

SVG 2 要求: 明确支持 Web Open Font Format (WOFF).
决议: 我们将在 SVG 2 中要求支持 WOFF.
目的: 允许访问用于国际化和高级排版的完整 OpenType 功能.
负责人: Chris (无 action)
状态: 完成

正确的文本渲染可能依赖于使用与 创作期间所用字体相同的字体. 因此 SVG 要求支持 CSS Fonts Module 的 Font Resources 一节中定义的可下载字体. 特别是, 必须支持 Web Open Font Format [WOFF].

SVG 2 中新增, WOFF 允许作者提供正确 渲染其内容所需的字体. 这包括确保 字体具有适当的 OpenType 表来支持复杂文字, 任意连字, 花体, 旧式数字等 . WOFF 还允许字体被压缩, 子集化, 并 包含许可信息.

11.1.3. 字形度量和布局

字形选择和定位通常按照 CSS 的规则处理. 但是在某些情况下, SVG 中的最终文本布局 需要知道各个字形的几何特性 .

几何字体特征以基于 EM 框的坐标 系统表示. (EM 是字体中字形高度的相对度量 .) 高 1 EM 且宽 1 EM 的框 称为设计空间. 通过将 EM 细分为若干 每 em 单位, 赋予此空间 几何坐标.

每 em 单位是字体特征. 每 em 单位的典型值 为 1000 或 2048.

EM 框的坐标空间称为设计空间 坐标系统. 对于可缩放字体, 用于绘制字形的曲线和直线 使用此 坐标系统表示.

通常, 此坐标系统中的 (0,0) 点 位于 EM 框的左边缘, 但不在左下 角. 罗马大写 字母底部的 Y 坐标通常为零. 小写罗马 字母的下伸部具有负坐标值.

EM 框内的 'M', 显示坐标系统, 基线,
	      上升部和下降部.

Em 框 (蓝色方框)内的 'M'. 'M' 位于 基线 (蓝线)上. 坐标系统的原点由 小黑圆表示.

SVG 假定字体表至少提供三种字体 特征: 上升部, 下降部和一组 基线表. 上升部是从字体 (0,0) 点到 EM 框顶部的距离; 下降部是从字体 (0.0) 点 到 EM 框底部的距离. 基线表在下文解释.

在 OpenType 字体 ([OPENTYPE])中, 对于水平书写模式, 上升部和下降部由 OS/2 表中的 sTypoAscender 和 sTypoDescender 项给出. 对于垂直书写模式, 下降部 (在这种情况下是从 (0,0) 点到 字形左边缘的距离)通常为零, 因为 (0,0) 点位于 左边缘. 垂直书写模式的上升部为 1 em, 或 由 OpenType Base 表中垂直书写模式的 ideographic top baseline 值指定.

字形相对于每个字形上的特定点定位, 该点称为对齐点. 对于水平 书写模式, 字形的对齐点垂直 对齐, 而对于垂直书写模式, 它们水平 对齐. 对齐点的位置取决于 文字系统. 例如, 西方字形在 大写字母底部对齐, 北部印度字形在 字形顶部附近的水平笔画顶部对齐, 而远东 字形在字形底部或中心对齐.

在一个文字系统内以及具有单一 字体大小的一行文本中, 对齐点序列在 行内基方向上定义一条称为 基线的几何线. 西方和大多数其他 字母及 音节字形与 "alphabetic" 基线对齐, 北部印度字形与 "hanging" 基线对齐, 而 远东字形与 "ideographic" 基线对齐.

三种不同文字系统中的基线示例.

三种不同文字系统中的示例基线 (红线). 从 左到右: alphabetic, hanging, ideographic. 对于 ideographic 文字系统, EM 框以蓝色显示.

当字形沿基线依次放置时, 字形的对齐点通常定位在 当前文本位置 (某些特性, 如 vertical-align 可能 改变定位). 每个 字形放置后, 当前文本位置按 字形的前进值推进 (通常水平文本为宽度 , 垂直文本为高度), 并加上字偶距或其他间距调整的任何修正 以及预格式化或自动换行文本中新行的修正 . 初始和最终 当前文本位置用于对齐 (例如当 text-anchor 值为 'middle' 或 'end' 时). 字形 前进值在沿路径放置文本时需要使用.

三种不同文字系统中的基线示例.

字体度量示例. 蓝色框显示三个字形的几何 框. 带标签的小圆显示字形放置前的 当前文本位置. 小 方块显示放置最后一个字形后的最终当前文本位置 . 请注意, 由于字偶距, 'a' 字形框的左侧与 'V' 字形框的右侧并不对齐.

如果字形没有提供与当前字形方向相对应的显式前进值 , 则应使用适当的 近似值. 对于垂直文本, 建议的 近似值是 em 大小.

初始当前文本位置由 预格式化文本的 ‘text’ 元素或第一个 渲染的 ‘tspan’ 元素上的 ‘x’ 和 ‘y’ 属性建立, 对于 内容区域由 inline-size 特性确定的 自动换行文本也是如此. 对于 其他自动换行文本, 初始当前文本位置 由应用 CSS 换行算法后 第一个渲染字形的位置确定.

如果没有 ‘x’ (‘y’) 属性 建立 初始当前文本位置, 则其 X (Y) 坐标在当前用户坐标 系统中为 0.

基线表指定 设计空间坐标系统中一个或多个 基线的位置. 基线表的功能是方便 不同文字系统在同一 文本行中混合时彼此对齐. 因为所需的相对对齐可能取决于 一行 (或块)中哪个文字系统占主导, 所以每种文字系统可能有 不同的基线表. 此外, 水平和垂直书写 模式需要不同的对齐位置. 因此, 字体可能具有一组基线表: 通常, 水平书写模式有一个或多个, 垂直书写模式有零个或 多个.

某些字体可能没有基线表的值. 当给定字体不提供基线表时, CSS Inline Layout Module Level 3 [css-inline-3] 建议了近似基线表的启发式方法.

当在一段文本中间指定不同字体 (或字体大小发生变化)时, 主导 基线 决定用于将新字体 (新 大小)中的字形与先前字体中的字形对齐的基线. dominant-baseline 特性用于设置 主导 基线.

对象相对于其父级的对齐由 对齐基线确定. 它 通常与主导基线相同, 但通过使用简写 vertical-align 特性 (首选)或完整形式 alignment-baseline, 可以选择另一个基线 .

可以通过使用简写 vertical-align 特性 (首选)或完整形式 baseline-shift 特性临时移动主导基线 (如 上标或下标所需). 请注意, 位移可以 嵌套, 每个位移添加到上一个位移上.

使用 'vertical-align' 特性的示例. 左侧显示 '[[z]]', 其中内括号较小. 右侧显示 'x2', 其中 '2' 是上标.

使用 'vertical-align' 特性的示例. 左侧: 'vertical-align:mathematical' ('alignment-baseline:mathematical') 应用于包含 '[z]' 的 ‘tspan’. 浅蓝色线显示 mathematical 基线的位置. 右侧: 'vertical-align:super' ('baseline-shift:super') 应用于包含 '2' 的 ‘tspan’. 浅蓝色线 表示基线的位移.

SVG 进一步假定, 对于字体数据中的每个字形, 有两个宽度值, 两个对齐基线和两个 对齐点, 分别用于水平书写模式和 垂直书写模式. (即使它被指定为 宽度, 对于垂直书写模式, 宽度也用于 垂直方向.) 对齐点在行内基方向 上的位置位于字形的起始边缘.

有关基线的更多信息可在 CSS Inline Layout Module Level 3 规范中找到. [css-inline-3] (另请参阅: CSS Writing Modes Level 3 规范. [css-writing-modes-3])

SVG 2 要求: 支持文本与不同基线对齐.
决议: SVG 2 将支持字形 与不同基线对齐, 可能通过使用现有或改进的 CSS 特性.
目的: 允许水平文本中的字形具有不同的垂直对齐方式以实现样式效果.
负责人: Chris (无 action)
状态: 完成

单行文本布局在一个行框内. 多行文本通过堆叠这些框生成. 行框的高度通过找出 应用 line-height 特性的效果后 一行文本中所有字形的最大上升部和 最大下降部确定. 行框的 宽度通常是包含 文本块的宽度. 在 SVG 中, 当包含文本块没有 固定几何形状 (如预格式化文本)时, 行框 紧密包围框内的字形框.

句子 'A big word.', 其中 'big' 使用更大的字体.

确定行框高度的示例. 首先, 每个字形框 (浅蓝色小框)根据 line-height 特性在垂直方向向上和向下扩展. 在此情况下, line-height 特性 为 125%. 较大的字形具有 96px 的 font-size, 因此 它们的额外高度为 24px (96px 的 25%). 额外高度 平均分配到上方和下方, 形成红色框. (为了 清晰起见, 同一行内元素中的所有字形已分组 在一起). 然后使用红色框在基线上方和下方的最大范围 找到最终的行框 (浅蓝色大框) .

为支持各种国际书写系统, 行框可以 采用水平或垂直方向. 垂直行框内的文本从上到下流动. 水平行框内的文本可以从左到右 (例如现代拉丁文字), 从右到左 (例如希伯来语或 阿拉伯语), 或混合从左到右和从右到左 (双向文本).

双向文本的处理模型如下:

虽然字偶距或连字处理可能 特定于字体, 首选模型是在字符 重新排序之后, 在字符或字形组合之间进行字偶距和连字 处理.

行框的方向以及它们 堆叠的方向 (块流方向)由 writing-mode 特性确定. 对于水平文本 (writing-mode 值 horizontal-tb), 行框 从上到下堆叠. 对于垂直文本, 行框 从右到左 (writing-mode 值 vertical-rl)或从左到右 (writing-mode 值 vertical-lr)堆叠.

11.2. ‘text’ 和 ‘tspan’ 元素

‘text’ 元素定义一个 由文本组成的 图形元素. 位于 ‘text’ 或另一个 ‘tspan’ 元素内的 ‘tspan’ 元素 允许切换样式和/或 调整 ‘tspan’ 元素内已渲染文本相对于父元素的位置.

‘text’ 和 ‘tspan’ 元素内的字符数据, 连同相关属性和特性, 以及字体自身内部的字符到字形映射表, 定义 要渲染的字形. ‘text’ 和 ‘tspan’ 元素上的属性和特性指示诸如 书写方向, 字体指定和绘制 属性之类的信息, 这些信息描述究竟如何渲染 字符. 本章后续各节描述 相关的文本专用属性和特性.

由于 ‘text’ 和 ‘tspan’ 元素使用 与其他图形元素相同的渲染方法渲染, 因此适用于 形状, 例如 路径和 矩形的所有相同 绘制功能也适用于 ‘text’ 和 ‘tspan’ 元素, 标记除外. 此外, 坐标系统变换, 裁剪, 和 遮罩可以作为整体应用于 ‘text’ 元素 .

用 CSS 术语来说, ‘text’ 元素作为块 元素. ‘tspan’, ‘textPath’, 和 ‘a’ 元素在作为文本内容元素后代时, 作为 行内元素.

可以对文本应用渐变, 图案, 裁剪路径, 遮罩 或滤镜. 当这些功能之一应用于文本 并使用关键字 'objectBoundingBox' (参见 对象边界框 单位)来指定相对于 "object bounding box" 的图形效果时, 对象边界框单位 在所有情况下都相对于整个 ‘text’ 元素计算, 即使 对同一 ‘text’ 元素内不同的 ‘tspan’ 或 ‘textPath’ 元素应用不同效果.

‘text’ 元素在初始当前文本位置 渲染其第一个字形 (在 双向 重排序之后) (可能由于 text-anchor 特性或 text-align 特性的值而调整). 对于预格式化文本以及 内容区域由 inline-size 特性确定的自动换行文本, 初始当前文本位置由 包含第一个渲染字符的 ‘text’ 或 ‘tspan’ 元素的 ‘x’ 和 ‘y’ 值确定. 对于形状中的自动换行文本或路径上的文本, 请分别参阅 自动换行文本或 路径上的文本各节, 以确定初始当前文本位置. 与给定字符对应的字形渲染后, 当前文本位置会为下一个 字符更新. 在最简单情况下, 新的当前文本位置为 先前的当前文本位置加上字形的前进值 (水平或垂直). 有关 字形放置和字形前进的说明, 请参阅 文本布局.

文本字符串 Hello, out there! 使用 Verdana 字体族渲染到 画布上, 字形使用 蓝色填充.

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <text x="250" y="180"
        font-family="Verdana" font-size="64" fill="blue" >
    你好, 外面的世界!
  </text>

</svg>
显示蓝色文本的图像.

使用 ‘tspan’ 来 更改单词 not 的样式.

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <g font-family="Verdana" font-size="64" >
    <text x="160" y="180" fill="blue" >
      你
      <tspan font-weight="bold" fill="red" >不</tspan>
      是香蕉.
    </text>
  </g>

</svg>
蓝色文本, 但单词 'not' 为红色.

两个 ‘tspan’ 元素 使用 ‘x’ 和 ‘y’ 属性在水平和 垂直方向重新定位. 因为所有文本都位于单个 ‘text’ 元素内, 在支持文本选择和 剪贴板操作的用户代理中, 用户 将能够选择所有 文本并将其复制到系统剪贴板.

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <g font-family="Verdana" font-size="64" >
    <text x="100" y="180" fill="blue" >
      但你
      <tspan dx="2em" dy="-50" font-weight="bold" fill="red" >
        是
      </tspan>
      <tspan dy="100">
        一个桃子!
      </tspan>
    </text>
  </g>

</svg>
包含多个移位单词的句子.
‘text’
类别:
图形元素, 可渲染元素, 文本内容元素
内容模型:
以下任意数量的元素或字符数据, 顺序不限:a, clipPath, marker, mask, script, style
属性:
DOM 接口:
SVG 2 要求: 允许在 ‘tspan’ 上使用变换.
决议: SVG 2 将允许在 ‘tspan’ 上使用变换.
目的: 与已经允许变换的其他元素保持一致, 例如 ‘a’.
负责人: Cameron (无 action)
状态: 完成

此决定已被撤销. 参见 GitHub Issue 210. CSS/HTML 不允许对行内元素应用变换 , 并且没有渲染器支持在行内时对 ‘a’ 元素 应用变换 (无论 SVG 还是 HTML).

‘tspan’
类别:
图形元素, 可渲染元素, 文本内容元素, 文本内容子元素
内容模型:
以下任意数量的元素或字符数据, 顺序不限:a, animate, script, set, style, tspan
属性:
DOM 接口:

11.2.1. 属性

名称 值 初始值 可动画
x, y [ [ <length-percentage> | <number> ]+ ]# (none) 是

如果提供单个 <length>, 则该值表示用于渲染 此元素或其任何后代内第一个字符所对应字形的 当前文本位置的新绝对 X (Y) 坐标.

如果提供由逗号或空格分隔的 n 个 <length>, 则这些值表示 用于渲染此元素或其任何 后代内前 n 个可寻址字符所对应字形的当前文本 位置的新绝对 X (Y) 坐标 .

如果提供的 <length> 数量多于 字符数量, 则额外的 <length> 对 字形定位没有影响.

如果字符数量多于 <length>, 或未指定该属性, 则对于每个额外字符:

  1. 如果祖先 ‘text’ 或 ‘tspan’ 元素 通过 ‘x’ (‘y’) 属性 为给定字符指定绝对 X (Y) 坐标 (最近的祖先优先), 则使用该 绝对 X (Y) 坐标作为该字符的起始 X (Y) 坐标, 否则
  2. 用于渲染给定字符所对应字形的 起始 X (Y) 坐标是当前 ‘text’ 元素最近渲染字形产生的当前文本位置的 X (Y) 坐标 , 或者如果该 元素尚未渲染任何字形, 则为初始当前文本 位置的 X (Y) 坐标.

在 SVG 2 中, ‘text’ 和 ‘tspan’ 的 ‘x’ 和 ‘y’ 属性不是呈现属性 , 不能通过 CSS 设置. 这可能在未来版本的 SVG 中发生变化.

名称 值 初始值 可动画
dx, dy [ [ <length-percentage> | <number> ]+ ]# (none) 是

如果提供单个 <length>, 此 值 表示用于渲染 此元素或其任何 后代内第一个字符所对应字形的当前 文本位置的新相对 X (Y) 坐标. 在第一个字符的 字形 渲染之前, 当前文本位置沿 当前用户坐标系统的 x 轴 (y 轴) 移动 <length>.

如果提供由逗号或空格分隔的 n 个 <length>, 则这些值 表示在渲染此 元素或其任何后代内前 n 个可寻址 字符所对应字形之前, 对当前文本位置沿 x 轴 (y 轴)的 增量位移. 因此, 在渲染 与每个字符对应的字形之前, 当前 ‘text’ 元素内绘制前一个字符字形 所产生的当前文本 位置沿当前用户 坐标系统的 x 轴 (y 轴)移动 <length>.

如果提供的 <length> 数量多于 字符数量, 则任何额外的 <length> 对 字形定位没有影响.

如果字符数量多于 <length>, 或未指定该属性, 则对于每个额外字符:

  1. 如果祖先 ‘text’ 或 ‘tspan’ 元素 通过 ‘dx’ (‘dy’) 属性 为给定字符指定相对 X (Y) 坐标 (最近祖先优先), 则 当前文本位置沿当前用户坐标系统的 x 轴 (y 轴)移动该量, 否则
  2. 不发生沿 x 轴 (y 轴)的额外位移.
名称 值 初始值 可动画
rotate [ <number>+ ]# (none) 是 (非累加).

围绕当前 文本位置以度为单位的附加旋转, 将应用于 与此元素内每个字符对应的所有字形 .

如果提供由逗号或空格分隔的 <number> 列表, 则第一个 <number> 表示 此元素或其任何后代内第一个字符所对应字形的 附加旋转, 第二个 <number> 表示 与第二个 字符对应的字形的附加 旋转, 依此类推.

如果提供的 <number> 数量多于 字符数量, 则额外的 <number> 将被 忽略.

如果提供的字符数量多于 <number>, 则对于每个这些额外字符, 必须使用 最后一个数字指定的旋转值.

如果未指定该属性, 并且 ‘tspan’ 元素的祖先 通过 ‘rotate’ 属性 为给定字符指定附加旋转 (最近祖先优先), 则 给定附加旋转应用于给定字符. 如果字符数量多于 祖先的 ‘rotate’ 属性中指定的 <number> 数量, 则对于 每个这些 额外字符, 必须使用最后一个 数字指定的旋转值.

此附加旋转对 随着字形渲染而修改当前文本位置的规则没有影响, 并且它是对 路径上的文本导致的任何旋转以及 text-orientation, glyph-orientation-horizontal, 或 glyph-orientation-vertical 的附加旋转.

名称 值 初始值 可动画
textLength <length-percentage> | <number> 见下文 是

作者计算的此 元素内字符数据对应的所有 前进值总和, 包括字形上的前进值 (水平 或垂直), 特性 letter-spacing 和 word-spacing 的效果以及 此 ‘text’ 或 ‘tspan’ 元素或 任何后代上的属性 ‘dx’ 和 ‘dy’ 导致的调整. 此值 用于校准用户代理自身的计算与 作者的计算.

此属性的目的是允许作者 对与此元素对应的第一个和最后一个渲染字形 在任何双向 重排序之后按视觉渲染顺序实现精确对齐; 因此, 对于最后一个渲染 字符 (在任何双向 重排序后的视觉渲染顺序中), 当 用户代理确定适当的量来 扩展/压缩文本字符串以适配 ‘textLength’ 长度时, 超出正常字形前进值的任何附加字符间间距 (在大多数情况下)都将被忽略.

如果在给定 元素上指定了属性 ‘textLength’, 并且还在祖先上指定, 则此元素内所有字符数据的调整完全由此 元素上的 ‘textLength’ 值控制, 可能带来的副作用是此元素内容的调整比率 可能不同于共享同一 祖先的其他内容所使用的调整比率. 用户代理必须假定 该祖先内其他内容的总前进 值是该祖先的前进值与 此元素前进值之间的差.

此属性并非用于获得 缩小或扩大文本之类的效果.

负值是错误 (参见错误 处理).

仅当换行区域不是由 inline-size 特性定义时, 才应用 ‘textLength’ 属性. 对于 任何具有强制换行 (由于 white-space 值为 pre 或 pre-line)的 ‘text’ 或 ‘tspan’ 元素, 也不应用该属性 .

如果在一个 ‘text’ 元素中的任何位置都未指定该属性, 则效果就像作者的 计算恰好与用户代理计算的值相匹配 ; 因此不会进行前进值调整. 为了在 DOM 中反映该属性, 初始值是当前用户代理计算的长度, 以隐式用户单位表示.

名称 值 初始值 可动画
lengthAdjust spacing | spacingAndGlyphs spacing 是
spacing
表示只调整前进值. 字形本身不会被拉伸或压缩.
spacingAndGlyphs
表示调整前进值, 并且 字形本身沿一个轴拉伸或压缩 (即, 与行内基方向平行的方向).

要求用户代理实现文本字符串正确的起始和结束 位置, 但中间字形的位置不可预测, 因为用户代理 可能采用高级算法来拉伸或压缩文本 字符串, 以在正确的起止定位 与最佳排版之间取得平衡.

请注意, 对于包含 n 个 字符的文本字符串, 对前进值的调整通常 只发生在 n−1 个字符上 (参见 属性 ‘textLength’ 的说明), 而 字形的拉伸或 压缩将应用于全部 n 个字符.

11.2.2. 关于 'x', 'y', 'dx', 'dy' 和 'rotate' 的说明

‘text’ 和 ‘tspan’ 元素上的 ‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 对于 需要精确放置各个字形的高端排版场景很有用 . 这些属性适用于字符之间的细微定位 调整或较大的定位 调整, 例如将一段文本移动到新位置以 实现新文本行的视觉效果 (与 SVG 1.1 兼容). 请注意, ‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 属性 对自动换行文本会被 忽略 (除非内容区域由 inline-size 特性指定, 此时初始当前文本 位置除外).

2015 Sydney F2F 决定, 对自动换行文本忽略 'dx', 'dy', 和 'rotate' . (从技术上讲, 应用它们并不 困难, 但认为它们并没有真正的用处.)

在高级排版控制需要微观级定位调整的情况下 , SVG 内容 设计者需要确保所有文档查看者都能够获得所需字体 (例如, 将所需 字体数据以 SVG 字体或替代 WebFont 格式打包, 并存储在与 SVG 内容相同的网站上) , 并确保查看软件将以 预期方式处理字体 (能力, 特征和字体布局 机制在不同系统之间差异很大). 如果 SVG 内容 包含旨在对应于 由特定查看软件集处理的特定字体的 ‘x’, ‘y’, ‘dx’, 或 ‘dy’ 属性值 , 而这两个要求中任一个未满足, 则文本可能 以较差质量显示.

当属性 ‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 包含数字列表时, 还适用以下附加规则:

示例 tspan04 使用 ‘tspan’ 元素上的 ‘rotate’ 属性来旋转 要渲染的字形. 此示例显示 ‘tspan’ 元素中的单个文本字符串, 其包含的 字符多于 ‘rotate’ 属性中指定的值数量. 在 这种情况下, ‘tspan’ 的 ‘rotate’ 属性中指定的最后一个值必须 应用于字符串中剩余 字符.

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>
    示例 tspan04 - rotate 值的数量少于
    字符串中的字符数量.
  </desc>
  <text font-family="Verdana" font-size="55" fill="blue" >
    <tspan x="250" y="150" rotate="-30,0,30">
      你好, 外面的世界
    </tspan>
  </text>
  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="998" height="298"
  fill="none" stroke="blue" stroke-width="2" />
</svg>
示例 tspan04 — tspan 元素中字符的简单旋转

示例 tspan04

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

示例 tspan05 在 ‘text’ 元素和除一个之外的所有子 ‘tspan’ 元素上指定 ‘rotate’ 属性, 以旋转要渲染的字形 . 该示例演示 ‘rotate’ 属性的传播.

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 500 120"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>
    示例 tspan05 - 旋转值向嵌套 tspan 元素传播.
  </desc>
  <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
    rotate="5,15,25,35,45,55">
    并非

    <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
      所有字符

      <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
        在
        
        <tspan id="child3">
          此
        </tspan>
      </tspan>

      <tspan id="child4" fill="orange" x="40" y="90">
        文本
      </tspan>

      都有
    </tspan>

    <tspan id="child5" rotate="-10" fill="blue">
      指定的
    </tspan>

    旋转
  </text>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="498" height="118" fill="none"
        stroke="blue" stroke-width="2" />
</svg>
示例 tspan05 — 旋转值向嵌套 tspan 元素传播

示例 tspan05

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

‘text’ 元素内红色文本的旋转:

"child1" ‘tspan’ 元素内橙色文本的旋转:

"child2" ‘tspan’ 元素内黄色文本的旋转:

"child5" ‘tspan’ 元素内蓝色文本的旋转:

下图说明旋转值如何传播到 嵌套在 ‘text’ 元素中的 ‘tspan’ 元素:

显示旋转值传播的图像

11.3. 文本布局 – 介绍

SVG 2 要求: 包含 SVG Tiny 1.2 中的文本布局改进.
决议: SVG 2 将包含 SVG Tiny 1.2 中改进的 字符和字形, 文本布局, 文本选择, 文本 搜索内容.
目的: 包含更清晰的文本布局说明; 无功能变化.
负责人: Tav (ACTION-3236)
SVG 2 要求: 支持形状中的文本.
决议: SVG 2 将要求与 CSS 兼容的自动文本 换行.
目的: 流程图等中的文本.
负责人: Tav (无 action)

本节简要概述 SVG 文本布局. 随后 各节将更详细地涵盖文本布局的不同方面 .

SVG 中的文本布局是一个多阶段过程, 它接收 一个 ‘text’ 元素子树及其特性值作为输入 , 并生成要渲染的字形序列及其在 每个文本内容元素坐标系统中的位置.

首先, 一个 ‘text’ 元素及其后代 按照 CSS 布局在内容区域或换行 区域内, 就像 ‘text’ 是 块元素, 而任何 ‘tspan’, ‘textPath’, 和 ‘a’ 后代是 行内元素. 此布局会考虑本章中描述的所有段落 级和字体相关 CSS 特性.

可以通过设置 inline-size 特性显式声明内容区域. 如果未声明内容区域, 则 默认为宽度和高度无限的矩形.

其次, ‘x’, ‘y’, ‘dx’ 和 ‘dy’ 属性给出的任何定位都 应用于 CSS 布局过程产生的 字形位置. 允许哪些变换的规则取决于 内容区域是否被显式声明. 如果未 显式声明, 这些规则定义 预格式化文本的布局. 如果声明, 这些规则定义 自动换行文本的布局.

第三, 如果需要, 应用 text-anchor 特性的效果 .

最后, 对任何 ‘textPath’ 元素执行字形布局 , 将预格式化文本 转换为路径上的文本.

不同文本布局类型的示例:

预格式化:
用于短文本字符串 (例如标签), 或需要精确 放置字形的情况 (例如手动调整字偶距的标题).

多行预格式化文本的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

     <text x="20" y="45" style="font: 24px sans-serif;">
       多行,
       <tspan x="20" y="75">预格式化文本示例.</tspan>
     </text>

</svg>
显示两行预格式化文本的图像.

使用 ‘tspan’ 元素 创建多行文本的预格式化文本.

换行文本:
用于需要自动文本换行的长文本字符串 .

自动换行文本的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="20" y="45" style="font: 24px sans-serif; inline-size: 250px;">
    自动换行文本示例.</text>

</svg>
显示自动换行为两行的文本图像.

自动换行文本. inline-size 特性定义一个高度无限的矩形内容区域 (以浅蓝色显示).

路径上的文本:
用于沿指定路径的文本.

路径上的文本示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <path id="MyPath" stroke="lightblue" fill="none"
	d="M 50,50 C 100,0 200,100 250,50"/>

  <text style="font: 24px sans-serif;">
    <textPath href="#MyPath">路径上的文本.</textPath>
  </text>

</svg>
显示沿路径文本的图像.

路径上的文本. ‘textPath’ 元素引用一个 ‘path’ 元素 (以浅 蓝色显示).

SVG 2 引入通过指定内容区域在 矩形或其他形状内自动换行文本的能力. SVG 换行文本的设计动机是希望 SVG 文本换行尽可能与 CSS 中的文本换行兼容, 以便支持 CSS 文本换行的渲染器能够 轻松实现 SVG 文本换行 (但不要求非 HTML 兼容的 SVG 渲染器实现 HTML). SVG 和 CSS 文本换行之间存在若干 差异. 最重要的是 在 SVG 中必须显式提供内容区域 , 因为 SVG 没有自动的有限 (或半有限) 内容区域 (CSS 中由盒模型提供). 另一个 差异是 SVG 没有创建换行的 <p></p> 和 <br/> 元素. 相反, SVG 依赖 white-space 的 pre 和 pre-line 值来提供 换行. SVG 换行文本还 允许内容创作工具为 不支持换行文本的 SVG 1.1 渲染器提供自然回退 (通过在 ‘text’ 和 ‘tspan’ 元素中使用 ‘x’ 和 ‘y’ 属性, 这些属性会 被 SVG 2 渲染器对 自动换行文本忽略).

SVG 的文本布局选项设计用于涵盖大多数一般使用 场景. 如果需要更复杂的布局 (项目符号列表, 表格, 等), 可以在另一个 XML 命名空间中渲染文本, 例如嵌入 ‘foreignObject’ 元素内联的 XHTML [HTML].

11.4. 文本布局 – 内容区域

内容区域通过在 ‘text’ 元素中指定 inline-size 特性来定义. 如果未提供内容区域, 则内容区域默认为宽度和高度 无限的矩形 (参见 预格式化文本一节).

换行文本布局在换行区域中. 换行区域与内容区域相同.

一旦定义换行区域, 文本就会根据 CSS 规则布局在换行区域内 (遵守本节给出的任何特殊规则).

11.4.1. ‘inline-size’ 特性

'extent' 根据 2015 年 2 月 12 日的决议添加. 'extent' 替代根据 2013 年 6 月 27 日决议 添加的 'width' 和 'height' 属性. 根据 Linkoping F2F, 2015 年 6 月 11 日的决议, 替换为 'inline-size' 呈现属性.

inline-size 特性允许将 换行区域设置为矩形形状. 该特性的计算值 设置水平文本矩形的宽度 和垂直文本矩形的高度. 另一个 尺寸 (水平文本的高度, 垂直文本的宽度)为 无限长度. 零值会禁用 换行区域的创建.

初始当前文本位置取自 ‘text’ 元素的 ‘x’ 和 ‘y’ 属性 (或者如果 ‘text’ 元素上未给出属性, 则取第一个 子 ‘tspan’ 元素). 对于从左到右文本, 初始当前文本位置 位于矩形左侧. 对于从右到左文本, 它位于 矩形右侧. 对于垂直文本, 初始当前文本位置位于 矩形顶部.

然后矩形 (换行区域)根据 text-anchor 特性锚定, 使用 换行区域的边缘确定起始, 中间和结束 位置.

使用 inline-size 特性换行文本的方法是 预格式化 SVG 文本的扩展, 作者只需给出 文本块宽度或高度的限制; 因此使用 ‘x’ 和 ‘y’ 属性, 连同 direction 和 text-anchor 特性来 定位第一行文本.

名称: inline-size
值: auto | <length-percentage>
初始值: auto
适用于: ‘text’ 元素
继承: 否
百分比: 相对于当前 SVG 视口的宽度 (对于水平文本)或高度 (对于垂直文本) (参见单位)
媒体: 视觉
计算值: 绝对长度或百分比
动画类型: 按计算值

使用 inline-size 对水平文本进行换行的示例 .

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px">
    此文本在 200 像素处换行.
  </text>

</svg>
显示换行为两行的英文文本图像.

水平文本换行. 浅蓝色线表示 内容区域的边界. 请注意, 内容 区域的高度是无限的. 红点显示初始 当前文本位置.

使用 inline-size 对 从右到左的水平文本进行换行的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="250" y="30"
	style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
    هذا النص يلتف في 200 بكسل.</text>

</svg>
显示换行为两行的阿拉伯语文本图像.

从右到左文本的水平文本换行. 浅蓝色线表示 内容区域的边界. 请注意, 内容 区域的高度是无限的. 红点显示初始 当前文本位置.

某些浏览器可能无法正确渲染此 SVG 1.1 图像. Batik 和 Firefox 似乎能够正确渲染. 已针对 Chrome 提交 bug.

使用 inline-size 对垂直文本进行换行的示例 .

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="300" viewBox="0 0 100 300">

  <text x="62.5" y="25" inline-size="200"
	style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
    テキストは10文字後に折り返されます。</text>

</svg>
显示换行为两列的垂直日文文本图像.

垂直文本换行. 浅蓝色线表示 内容区域的边界. 请注意, 内容 区域的宽度是无限的. 红点显示初始 当前文本位置.

此 SVG 1.1 图像在 Firefox 中无法工作, 即使 nightly 版本也是如此. Firefox 不支持呈现 属性 'writing-mode'. 已针对 Firefox 提交 bug.

使用 inline-size 对 锚定在中间的水平文本进行换行的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px; text-anchor: middle">
    此文本在 200 像素处换行.
  </text>

</svg>
显示换行为两行并居中锚定的英文文本图像.

水平文本换行. 浅蓝色线表示 内容区域的边界. 文本锚定在 中间. 红点显示初始 当前文本位置.

11.5. 文本布局 – 算法

文本布局开始时, 将 ‘text’ 元素的内容传递给基于 CSS 的文本渲染器, 其中包括文本数据 以及样式信息和一个或多个 要填充形状的说明. ‘text’ 元素被视为 块元素, 其后代 ‘tspan’, ‘textPath’ 和 ‘a’ 元素被 视为行内元素. CSS 渲染器返回一组排版字符及其 位置, 这些位置是将文本作为绝对定位文本布局的结果 .

一个排版字符可能包含多个 字形. 此处假定 一个排版字符内部字形的相对定位 封装在该排版字符中, 并且 用户无法控制.

一旦定义了内容区域, 使用以下 算法确定给定 ‘text’ 元素的排版 字符 及其位置:

许多 CSS 特性对 SVG 文本 布局没有影响或影响有限:

各种 SVG 属性和特性可能根据内容区域的定义方式重新定位 排版字符:

以下 SVG 文本布局算法返回 ‘text’ 元素子树中 DOM 中每个字符的输出信息 . 该信息包括:

SVG 属性 ‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 中给出的数组以可寻址字符为索引. 但是, 重新定位应用于 排版字符. 如果一个排版字符 对应多个字符 (例如连字), 只使用 与第一个字符对应的数组值来 定位该排版字符. 与 排版 字符中其他字符对应的数组值 会被跳过 (对于 ‘x’ 和 ‘y’), 会被 累积并应用到下一个排版 字符 (对于 ‘dx’ 和 ‘dy’), 或者如果它 是数组中的最后一个 值, 则应用于后续排版 字符 (对于 ‘rotate’). 这确保, 例如, 无论字体是否具有特定连字, 属性值都应用于相同字符.

SVG 特定的文本布局算法如下:

  1. 设置
    1. 令 root 为生成 ‘text’ 元素及其子树的排版字符位置的结果, 就像它 是绝对定位元素一样布局.

      除非 white-space 特性导致换行, 否则这将是一行文本.

    2. 令 count 为 ‘text’ 元素子树中 DOM 字符 的数量.
    3. 令 result 为长度为 count 的数组, 其条目包含上述每字符信息 . 每个条目初始化如下:
      • 其全局索引号等于其在数组中的位置,
      • 其 "x" 坐标设置为 "unspecified",
      • 其 "y" 坐标设置为 "unspecified",
      • 其 "rotate" 坐标设置为 "unspecified",
      • 其 "hidden" 标志为 false,
      • 其 "addressable" 标志为 true,
      • 其 "middle" 标志为 false,
      • 其 "anchored chunk" 标志为 false.
      如果 result 为空, 则返回 result.
    4. 令 CSS_positions 为长度为 count 的数组, 其条目将填入 root 中相应排版字符的 x 和 y 位置. 数组 条目初始化为 (0, 0).
    5. 令 "horizontal" 为一个标志, 如果 ‘text’ 的书写模式为水平则为 true, 否则为 false.
  2. 设置标志并分配初始位置

    对 result 中索引为 i 的每个数组元素:

    1. 如果索引 i 处的字符是以下情况, 将 addressable 设置为 false:

      由于以下 ‘text’ 元素中存在不能由字形 定位属性寻址的可折叠空白 (使用标准字体), "B" 字形将被放置在 x=300.

      <text x="100 200 300">
      	      A
      	      B
      	      </text>

      这是因为 "A" 前的空白以及 "A" 和 "B" 之间除一个空白 字符之外的所有空白都被折叠或修剪掉.

    2. 如果索引 i 处的字符是对应于一个排版字符的第二个或后续字符, 则将 middle 设置为 true.
    3. 如果索引 i 处的字符对应于一行开头的排版字符, 则将 result[i] 的 "anchored chunk" 标志设置为 true.

      这确保由 text-anchor 移动的块不会 跨越多行.

    4. 如果 addressable 为 true 且 middle 为 false, 则 将 CSS_positions[i] 设置为 CSS 渲染器确定的相应排版字符位置. 否则, 如果 i > 0, 则设置 CSS_positions[i] = CSS_positions[i − 1]
  3. 解析字符定位

    节点指定的定位调整 (例如 ‘x’ 属性中的值) 应用于该节点中的所有字符, 包括 节点后代中的字符. 但是, 后代节点中指定的调整会覆盖祖先 节点的调整. 本节解析哪些调整应用于 哪些字符. 它还直接设置 result 的 rotate 坐标 .

    1. 设置:
      1. 令 resolve_x, resolve_y, resolve_dx, 和 resolve_dy 为长度 为 count 的数组, 其所有条目初始化 为 "unspecified".
      2. 将 "in_text_path" 标志设置为 false.

        此标志将允许水平 (垂直) ‘textPath’ 元素内文本的 ‘y’ (‘x’) 属性值被忽略.

      3. 使用 ‘text’ 元素节点调用以下过程.
    2. 过程: 解析字符 定位:

      一个递归过程, 输入一个 node, 其步骤如下:

      1. 如果 node 是 ‘text’ 或 ‘tspan’ 节点:
        1. 令 index 等于该节点中 第一个字符的 "global index number".
        2. 令 x, y, dx, dy 和 rotate 为 node 上 对应属性的值列表, 如果对应属性未指定 或无效, 则为空 列表.
        3. 如果 "in_text_path" 标志为 false:
          • 令 new_chunk_count = max(x 的长度, y 的长度).
          否则:
          • 如果 "horizontal" 标志为 true:
            • 令 new_chunk_count = x 的长度.
          • 否则:
            • 令 new_chunk_count = y 的长度.
        4. 令 length 为以 node 为根的 子树中的 DOM 字符数.
        5. 令 i = 0 且 j = 0.

          i 是节点中可寻址字符的索引; j 是节点中所有字符的索引.

        6. 当 j < length 时, 执行:

          此循环将 ‘x’, ‘y’, ‘dx’, ‘dy’ 和 ‘rotate’ 属性应用于 node 内的内容.

          1. 如果 result[index + j] 的 "addressable" 标志为 true, 则:
            1. 如果 i < new_check_count, 则 将 result[index + j] 的 "anchored chunk" 标志设置为 true. 否则将该标志设置为 false.

              将标志设置为 false 可确保 ‘x’ 和 ‘y’ 属性在 ‘text’ 元素中设置时, 不会在不应创建锚定块的情况下 在 ‘textPath’ 元素中创建锚定块.

            2. 如果 i < x 的长度, 则将 resolve_x[index + j] 设置为 x[i].
            3. 如果 "in_text_path" 标志为 true 且 "horizontal" 标志为 false, 则取消设置 resolve_x[index].

              对于路径上的垂直文本, ‘x’ 属性会被忽略.

            4. 如果 i < y 的长度, 则将 resolve_y[index + j] 设置为 y[i].
            5. 如果 "in_text_path" 标志为 true 且 "horizontal" 标志为 true, 则取消设置 resolve_y[index].

              对于路径上的水平文本, ‘y’ 属性会被忽略.

            6. 如果 i < dx 的长度, 则将 resolve_dx[index + j] 设置为 dy[i].
            7. 如果 i < dy 的长度, 则将 resolve_dy[index + j] 设置为 dy[i].
            8. 如果 i < rotate 的长度, 则将 result[index + j] 的角度值设置为 rotate[i]. 否则, 如果 rotate 不为空, 则 将 result[index + j] 设置为 result[index + j − 1].
            9. 设置 i = i + 1.
          2. 设置 j = j + 1.
      2. 如果 node 是 ‘textPath’ 节点:
        1. 令 index 等于该节点 (包括后代节点)中 第一个字符的全局索引号.
        2. 将 result[index] 的 "anchored chunk" 标志 设置为 true.

          ‘textPath’ 元素总是创建锚定块.

        3. 将 in_text_path 标志设置为 true.
      3. 对于 node 的每个子节点 child:
        1. 解析 child 的字形 定位.
      4. 如果 node 是 ‘textPath’ 节点:
        1. 将 "in_text_path" 标志设置为 false.
  4. 调整位置: dx, dy

    ‘dx’ 和 ‘dy’ 调整在 ‘textLength’ 属性导致的调整之前应用, 而 ‘x’, ‘y’ 和 ‘rotate’ 调整在之后应用.

    1. 令 shift 为由于 ‘dx’ 和 ‘dy’ 属性导致的累积 x 和 y 位移, 初始化为 (0,0).
    2. 对 result 中索引为 i 的每个数组元素:
      1. 如果 resolve_dx[i] 未指定, 将其设置为 0. 如果 resolve_dy[i] 未指定, 将其设置为 0.
      2. 令 shift.x = shift.x + resolve_dx[i] 且 shift.y = shift.y + resolve_dy[i].
      3. 令 result[i].x = CSS_positions[i].x + shift.x 且 result[i].y = CSS_positions[i].y + shift.y.
  5. 应用 ‘textLength’ 属性
    1. 设置:
      1. 将已解析后代节点定义为 node 的一个后代, 它具有有效的 ‘textLength’ 属性, 并且自身不是另一个具有有效 ‘textLength’ 属性的后代节点的后代.
      2. 使用 ‘text’ 元素 节点调用以下过程.
    2. 过程: 解析文本长度:

      一个递归过程, 输入 node, 其步骤如下:

      1. 对 node 的每个子节点 child:
        1. 解析 child 的文本长度.

          子节点先于父节点调整.

      2. 如果 node 是 ‘text’ 或 ‘tspan’ 节点, 并且该节点具有有效的 ‘textLength’ 属性值:
        1. 令 a = +∞ 且 b = −∞.
        2. 令 i 和 j 分别为 node 中第一个字符和最后一个字符 的全局索引.
        3. 对范围 [i, j] 中 result[k] 的 "addressable" 标志 为 true 的每个索引 k:

          此循环查找节点内排版字符最左 (最上) 和最右 (最下)的范围, 并检查 强制换行.

          1. 如果 k 处的字符是换行符 或回车符, 则返回. 对具有 强制换行的节点不进行由 ‘textLength’ 引起的调整.
          2. 如果 "horizontal" 标志为 true, 令 pos = result[k] 中位置的 x 坐标 , 否则为 y 坐标.
          3. 令 advance = 与字符 k 对应的 排版 字符的前进值 . [注意: 对于 RTL 水平文本, 此前进值将为 负.]
          4. 设置 a = min(a, pos, pos + advance).
          5. 设置 b = max(b, pos, pos + advance).
        4. 如果 a ≠ +∞, 则:
          1. 求距离 delta = ‘textLength’ 计算值 − (b − a).

            要求用户代理将节点中最后一个 排版 字符移动 delta, 当 "horizontal" 标志为 true 且 direction 为 lrt 时沿正 x 方向, 当 "horizontal" 标志 为 true 且 direction 为 rtl 时沿负 x 方向, 否则沿 正 y 方向. 用户代理 可以自由调整中间 排版 字符以获得最佳 排版. 接下来的步骤说明一种 在 ‘lengthAdjust’ 值为 spacing 时调整排版 字符的方法.

          2. 求 n, 此节点中 排版 字符的总数, 包括任何不是已解析后代节点或不在已解析后代 节点内的后代节点.
          3. 令 n = n + 已解析后代节点数 − 1.

            在此上下文中, 每个已解析后代节点都被视为 单个 排版 字符.

          4. 求每字符调整量 δ = delta/n.
          5. 令 shift = 0.
          6. 对范围 [i,j] 中的每个索引 k:
            1. 如果 "horizontal" 标志为 true, 将 shift 加到 result[k] 中位置的 x 坐标, 否则加到 y 坐标.
            2. 如果 result[k] 的 "middle" 标志 不为 true, 且 k 不是 已解析后代节点中除第一个 字符以外的字符, 则 shift = shift + δ.
  6. 调整位置: x, y

    此循环应用 ‘x’ 和 ‘y’ 值, 并确保 text-anchor 块不会在 排版字符中间开始.

    1. 令 shift 为由于 ‘x’ 和 ‘y’ 属性导致的当前调整, 初始化为 (0,0).
    2. 设置 index = 1.
    3. 当 index < count 时:
      1. 如果 resolved_x[index] 已设置, 则令 shift.x = resolved_x[index] − result.x[index].
      2. 如果 resolved_y[index] 已设置, 则令 shift.y = resolved_y[index] − result.y[index].
      3. 令 result.x[index] = result.x[index] + shift.x 且 result.y[index] = result.y[index] + shift.y.
      4. 如果 result[index] 的 "middle" 和 "anchored chunk" 标志 都为 true, 则:
        1. 将 result[index] 的 "anchored chunk" 标志 设置为 false.
        2. 如果 index + 1 < count, 则将 result[index + 1] 的 "anchored chunk" 标志 设置为 true.
      5. 将 index 设置为 index + 1.
  7. 应用锚定
    1. 对每个切片 result[i..j] (包括 i 和 j), 其中:
      • result[i] 的 "anchored chunk" 标志 为 true,
      • result[k] 的 "anchored chunk" 标志 在 i < k ≤ j 时为 false, 且
      • j = count − 1 或 result[j + 1] 的 "anchored chunk" 标志为 true;
      执行:

      此循环遍历每个锚定块.

      1. 令 a = +∞ 且 b = −∞.
      2. 对范围 [i, j] 中 result[k] 的 "addressable" 标志 为 true 的每个索引 k:

        此循环查找锚定块内 排版字符最左 (最上) 和最右 (最下)的范围.

        1. 如果 "horizontal" 标志为 true, 令 pos = result[k] 中位置的 x 坐标 , 否则为 y 坐标.
        2. 令 advance = 与 字符 k 对应的排版字符 的前进值. [注意: 对于 RTL 水平文本, 此前进值将为 负.]
        3. 设置 a = min(a, pos, pos + advance).
        4. 设置 b = max(b, pos, pos + advance).
      3. 如果 a ≠ +∞, 则:

        此处执行文本锚定.

        1. 如果 "horizontal" 标志为 true, 令 shift 为 result[i] 的 x 坐标, 否则为 y 坐标.
        2. 根据索引 i 处字符所在元素的 text-anchor 和 direction 的值 调整 shift:
          (start, ltr) 或 (end, rtl)
          设置 shift = shift − a.
          (start, rtl) 或 (end, ltr)
          设置 shift = shift − b.
          (middle, ltr) 或 (middle, rtl)
          设置 shift = shift − (a + b) / 2.
        3. 对范围 [i, j] 中的每个索引 k:
          1. 如果 "horizontal" 标志为 true, 将 shift 加到 result[k] 中位置的 x 坐标, 否则加到 y 坐标.
  8. 在路径上定位
    1. 设置 index = 0.
    2. 将 "in path" 标志设置为 false.
    3. 将 "after path" 标志设置为 false.
    4. 令 path_end 为位于 ‘textPath’ 元素之后字符的偏移量. 将 path_end 设置为 (0,0).
    5. 当 index < count 时:
      1. 如果索引 i 处的字符位于 ‘textPath’ 元素内, 并且 对应于一个排版 字符, 则:
        1. 将 "in path" 标志设置为 true.
        2. 如果 result[index] 的 "middle" 标志为 false, 则:

          此处应用 ‘textPath’ 定位.

          1. 令 path 为 ‘textPath’ 元素引用的基本形状元素的等效路径, 如果引用无效, 则为空路径 .
          2. 如果 ‘textPath’ 元素的 ‘side’ 属性为 'right', 则 反转 path.
          3. 令 length 为 path 的长度.
          4. 令 offset 为 ‘textPath’ 元素的 ‘startOffset’ 属性的值, 并根据 被引用元素上的任何 ‘pathLength’ 属性进行调整.
          5. 令 advance = 与 字符 k 对应的排版 字符的前进值. [注意: 对于 RTL 水平文本, 此前进值 将为负.]
          6. 令 (x, y) 和 angle 为 result[index] 中的 位置和角度.
          7. 根据 "horizontal" 标志的值, 令 mid 为一个坐标值 :
            true
            mid 为 x + advance / 2 + offset
            false
            mid 为 y + advance / 2 + offset

            用户代理可以自由对 mid 作任何额外调整, 以确保由于 ‘spacing’ 值为 'auto' 或 ‘method’ 值为 'stretch' 时具有高质量排版 .

          8. 如果 path 不是闭合子路径, 且 mid < 0 或 mid > length, 则将 result[index] 的 "hidden" 标志设置为 true.
          9. 如果 path 是闭合 子路径, 则根据 索引 index 处字符所在元素的 text-anchor 和 direction 的值:

            这实现了单个 闭合子路径的特殊换行条件.

            (start, ltr) 或 (end, rtl)
            如果 mid−offset < 0 或 mid−offset > length, 则将 result[index] 的 "hidden" 标志 设置为 true.
            (middle, ltr) 或 (middle, rtl)
            如果 mid−offset < −length/2 或 mid−offset > length/2, 则将 result[index] 的 "hidden" 标志 设置为 true.
            (start, rtl) 或 (end, ltr)
            如果 mid−offset < −length 或 mid−offset > 0, 则将 result[index] 的 "hidden" 标志 设置为 true.

            设置 mid = mid mod length.

          10. 如果 hidden 标志为 false:
            1. 令 point 为沿 path 距离 mid 处点的位置, 并令 t 为该点的单位切向量 .
            2. 如果 "horizontal" 标志为
              true
              1. 令 n 为方向为 t + 90° 的法向单位向量.
              2. 令 o 为从 字形垂直中心线到 对齐点的水平距离.
              3. 然后将 result[index] 中的位置设置为 point - o×t + y×n.
              4. 令 r 为从 正 x 轴到切线的角度.
              5. 将 result[index] 中的角度值 设置为 angle + r.
              false
              1. 令 n 为方向为 t - 90° 的法向单位向量.
              2. 令 o 为从 字形水平中心线到 对齐点的垂直距离.
              3. 然后将 result[index] 中的位置设置为 point - o×t + x×n.
              4. 令 r 为从 正 y 轴到切线的角度.
              5. 将 result[index] 中的角度值 设置为 angle + r.
        3. 否则, result[index] 的 "middle" 标志为 true:
          1. 将 result[index] 的位置和角度值 设置为 result[index − 1] 中的值.
      2. 如果索引 i 处的字符不在 ‘textPath’ 元素内, 并且 对应于一个排版 字符, 则:

        这会将出现在 ‘textPath’ 元素 之后的任何字符的起始点设置为路径末端.

        1. 如果 "in path" 标志为 true:
          1. 将 "in path" 标志设置为 false.
          2. 将 "after path" 标志设置为 true.
          3. 将 path_end 设置为 ‘textPath’ 引用路径的终点 − result[index] 的位置.
        2. 如果 "after path" 为 true.
          1. 如果 result[index] 的 anchored chunk 为 true, 将 "after path" 标志设置为 false.
          2. 否则, 令 result.x[index] = result.x[index] + path_end.x 且 result.y[index] = result.y[index] + path_end.y.
      3. 设置 index = index + 1.
  9. 返回 result

SVG 2 要求: 文本布局功能与 CSS 保持一致.
决议: SVG 2 将对非 SVG 特有的文本布局 (空白, bidi 等)使用 CSS3 定义.
目的: 促进 HTML 和 SVG 中文本布局规范和实现的共享.
负责人: Cameron 和 Chris (ACTION-3004, ACTION-3005)

11.6. 预格式化文本

此选项对应基本的 SVG 1.1 文本布局.

这是默认的文本布局方法, 在没有 显式定义的内容区域时使用. 它还用作 布局路径上的文本的第一步 (规则略有 修改). 在这种布局方法中, 不进行自动断行 或自动换行. 通常, 文本渲染为 宽度和高度无限的矩形内容区域内的单 行. 可以通过预先计算换行并 使用以下方法之一获得多行文本:

以下特性不适用于预格式化文本: text-align, text-align-last, line-break, word-break, hyphens, word-wrap, 和 overflow-wrap.

11.6.1. 通过 'white-space' 实现多行文本

可以通过使用 white-space 值 pre 或 pre-line 创建多行预格式化文本. 在这些情况下, 换行符或回车符会保留为强制 换行, 从而创建新的行框. 行 框按照 CSS 规则堆叠.

11.6.2. 重新定位字形

按照基本 CSS 文本布局 规则布局文本后, 可以使用 SVG 特定规则重新定位排版字符. 可以通过在 ‘x’ 和 ‘y’ 属性中给出绝对坐标 或通过强制换行来规定绝对重新定位. 绝对 重新定位可能受 text-anchor 特性的影响. 可以通过在 ‘dx’ 和 ‘dy’ 属性中给出 相对坐标来规定相对重新定位. 可以通过在 ‘rotate’ 属性中给出值列表任意旋转 排版字符. 绝对 重新定位 (包括由 text-anchor 特性导致的任何调整)在相对 重新定位和旋转之前进行.

11.7. 自动换行文本

当在 ‘text’ 元素中指定内容区域时, 文本会自动换行. 内容区域 定义用于文本换行的最外层容器. 换行区域与内容区域相同.

当内容区域由 inline-size 特性定义时, 与第一个渲染的 排版字符对应的 ‘x’ 和 ‘y’ 属性 定义初始当前文本位置.

除用于确定初始当前文本位置时外, 自动换行文本中的 ‘text’ 和 ‘tspan’ 元素上的所有 ‘x’ 和 ‘y’ 值 都会被忽略.

‘x’ 和 ‘y’ 属性可以为换行文本的 SVG1.1 渲染器提供 自然的回退机制. 内容生成者可能希望通过将 各行拆分为具有 ‘x’ 和 ‘y’ 属性的 ‘tspan’ 元素来预布局文本. 然后, 例如, 如果使用回退字体 渲染文本, SVG2 渲染器将忽略 ‘x’ 和 ‘y’ 属性, 并使用 回退字体的字体度量重新排版 文本. SVG1.1 渲染器将在渲染文本时使用 ‘x’ 和 ‘y’ 属性, 即使渲染结果与形状不匹配, 通常也会得到 可读文本. 本节中的许多文本换行示例依赖此 机制, 以便在尚未实现 文本换行的浏览器中渲染文本.

11.7.1. 关于文本换行的说明

以下示例说明在形状中布局 文本时的一些问题.

11.7.1.1. 第一行定位

对于任意形状的换行区域, 第一个 行框可能无法紧贴顶部 (对于 垂直文本则是侧边). 在这种情况下, 第一个行框会移动 直到能够放入.

在 CSS 中, 形状的边缘被视为一系列 1 像素 × 1 像素的浮动区域.

未来的 CSS 规范可能会定义可用于 控制第一行文本位置的行网格, 从而允许不同换行区域 之间的文本对齐.

显示两行文本的图像, 第一行是 'The', 而
              下一行是 'first line'.

顶部行框 (浅蓝色小矩形), 由 最小可能的文本块组成, 向下移动直到 行框适合换行 区域 (浅蓝色 路径). 请注意, 行框包含 line-height 特性的效果, 此处设置为 1.25. 红色 矩形紧密包围每个行框中的字形.

这似乎与 SVG 1.2 草案不同, 后者中 换行区域的顶部用作行网格的原点. 第一行按行高向下移动, 直到适合 形状内部.

11.7.1.2. 断行

对于任意形状的换行区域, 单行 文本可能被分成多个部分. 在这种情况下, 会为每个部分创建一个行框. 单行文本中的所有 行框必须具有相同高度 (确保所有部分具有相同基线). 此高度 通过查看该行文本中的所有字形计算.

此默认行为在 2016 年 Sydney 的 CSS/SVG 联合工作 组会议上达成一致.

未来的 CSS 规范可能允许控制 被分成不同部分的形状中哪些部分被填充 (例如, 仅填充 最右侧部分, 仅填充最左侧部分等).

显示布局在 'V' 形状内部的文本图像.

顶行被分成两个行框 (浅蓝色 矩形), 每个行框中的文本在 框内居中 (由于 'text-align:center').

11.8. 路径上的文本

SVG 可以沿由 ‘path’ 元素或基本形状的等效路径定义的路径放置文本. 这是 通过将文本放在 ‘textPath’ 元素中指定的, 该元素具有一个 ‘href’ 属性, 其中的URL 引用指向 ‘path’ 元素或基本形状, 或者通过为 ‘path’ 属性指定一个 直接 指定路径数据的值.

沿基本形状放置文本的功能是 SVG 2 中新增的.

沿基本形状放置文本在 Sydney (2015) 会议上达成决议.

直接使用 'd' 属性指定路径的功能添加到了 SVG 2 中. 在 London (2016) 编辑会议上, 在将 'd' 提升 为呈现属性的同时, 决定将 'd' 属性重命名为 'path'.

从概念上讲, 路径上的文本类似于一行 预格式化文本, 随后 将其变换为沿路径排列. 除另有说明外, 所有 适用于预格式化文本的特性也适用于路径上的 文本.

11.8.1. ‘textPath’ 元素

‘textPath’
类别:
图形元素, 可渲染元素, 文本内容元素, 文本内容子元素
内容模型:
以下任意数量的元素或字符数据, 顺序不限:a, animate, clipPath, marker, mask, script, set, style, tspan
属性:
DOM 接口:
SVG 2 要求: 对文本路径拉伸方法提供更精确的说明.
决议: 我们将阐明 method="stretch" 在 >'textPath' 元素上的行为.
目的: 改进该功能的互操作性.
负责人: Cameron (无 action)

‘path’ 属性和 ‘href’ 属性 都指定排版字符 将沿其渲染的路径.

如果在 ‘textPath’ 元素上同时指定两个属性, 则使用的路径必须遵循以下 优先顺序:

  1. ‘path’ 属性
  2. ‘href’ 属性
  3. ‘xlink:href’ 属性

如果指定了 ‘path’ 属性, 但 路径数据 未产生有效路径段 (例如, 值为空 字符串, 或路径数据中的错误发生在生成任何 有效路径段之前), 则必须改用 ‘href’ 属性. 如果 ‘path’ 属性在第一个错误之前包含有效路径段 , 则按照 路径数据中的错误处理规则使用错误之前的路径 , 并且 ‘href’ 属性不会用作回退.

11.8.2. 属性

startOffset

初始当前 文本位置相对于路径起点的偏移量, 使用用户代理的 沿路径 距离算法计算, 在将路径转换为 ‘textPath’ 元素的坐标系统之后.

如果给定的 <length> 不是百分比, 则 ‘startOffset’ 表示沿路径的距离, 以 ‘textPath’ 元素的当前用户坐标系统度量.

如果给定 百分比, 则 ‘startOffset’ 表示 整条路径的百分比距离. 因此, startOffset="0%" 表示 路径的起点, 而 startOffset="100%" 表示 路径的终点.

允许负值以及大于路径长度的值 (例如 150%).

将值限制在 0%-100% 范围内会妨碍轻松创建 文本沿路径移动之类的效果.

中点不在路径上的任何排版字符 都不会渲染.

具有不同 'startOffset' 值的三条路径, 显示当字形位于路径区域之外时的裁剪
		  .

‘startOffset’ 属性不同值的渲染. 从上到下: 默认值, 50%, -50%.

底部路径应仅在路径左侧显示 "path." . Chrome 和 Safari 都无法处理 0% 到 100% 范围之外的偏移量. Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=476554

对于由单个闭合子路径 组成的路径 (包括基本形状的等效路径), 排版字符沿 路径的一整圈渲染. 文本按照 text-anchor 特性确定的方式, 对齐到沿 路径 由 ‘startOffset’ 属性设置的位置. 对于 start (end) 值, 文本从行的起点 (终点) 渲染, 直到再次到达沿路径的初始 位置. 对于 middle, 文本从 中点向两个方向渲染, 直到到达路径上与初始 位置在两个方向距离相等的点 .

具有不同
		  'startOffset' 值的两条圆形路径, 显示所有字形都会渲染.

路径上的文本引用一个 ‘circle’ 时, 使用不同 ‘startOffset’ 属性值的渲染. 左: 0. 右: 75% 或 -25%. 红色圆标记路径的起点 (在 将圆规范分解为路径之后).

具有不同
		  'text-anchor' 值的三条圆形路径, 显示字形如何渲染.

路径上的文本引用一个 ‘circle’ 时, 使用不同 text-anchor 属性值的渲染. 左: 'start'. 中: 'middle'. 右: 'end'. 红色圆标记路径的起点 (在 将圆规范分解为路径之后). 蓝色方块标记渲染的参考起点 (通过 ‘startOffset’ 值 75% 从路径起点移动). 灰色箭头 显示排版字符 放置的方向和排版 字符 放置停止的位置. 如果 direction 特性的值为 rtl, 箭头方向将反转.

在 Sydney (2015) 会议上同意基本形状渲染所有字形 (但会议记录中缺失). 将换行限制为具有单个闭合子路径的路径以及一 圈, 并由 'startOffset' 属性实现, 于 London (2016) 编辑会议上达成一致.

值
<length-percentage> | <number>
初始值
0
可动画
是
method

指示文本应沿路径渲染的 方法.

值 align 表示 排版字符应使用简单的 2×3 矩阵变换进行渲染, 从而不会 拉伸/扭曲排版字符. 通常, 会对每个要渲染的排版字符执行附加旋转, 缩放和 平移变换. 因此, 使用 align 时, 在 排版字符设计为相互连接的字体 (例如草书字体)中, 当文本沿路径渲染时连接处可能无法 正确对齐.

值 stretch 表示 排版字符轮廓将 转换为路径, 随后所有端点和控制 点都会调整到路径的垂直向量上 , 从而拉伸并可能扭曲 字形. 使用这种方法, 连续的排版 字符, 例如草书文字中的字符, 将保持 它们的连接. (非垂直直线路径段应 转换为 Bézier 曲线, 使水平 直线路径与 排版字符所沿路径保持 (近似)恒定偏移 .)

弧线上的英文和阿拉伯文文本.

不同 ‘method’ 值的路径上文本渲染: 左: 'align'. 右: 'stretch'.

值
align | stretch
初始值
align
可动画
是
spacing

指示用户代理应如何确定 沿路径渲染的排版字符之间的间距 .

值 exact 表示 排版字符应严格按照 路径上的文本布局 规则中指定的间距规则进行渲染.

值 auto 表示 用户代理应使用路径上文本布局算法 调整排版字符之间的间距, 以获得视觉上美观的结果.

值
auto | exact
初始值
exact
可动画
是
side

确定文本放置在路径的哪一侧 (相对于路径方向). 指定值 right 实际上会反转 路径.

具有不同 'side'
		  值的两条圆形路径, 显示 'left' 时字形渲染在圆外部,
		  'right' 时渲染在圆内部.

路径上的文本引用一个 ‘circle’ 时, 使用不同 ‘side’ 属性值的渲染. 左: left. 右: right.

SVG 2 中新增, 以允许文本位于 闭合子路径和基本形状 (例如矩形, 圆和椭圆)的内部或外部.

添加 'side' 的决议在 Sydney (2015) 会议上通过.

值
left | right
初始值
left
可动画
是
path

描述排版 字符 将渲染到其上的路径的路径数据 字符串. 如果未指定该属性, 或 路径数据 未产生有效路径段 (例如, 值为空 字符串, 或在任何有效路径段之前发生错误), 则改用 ‘href’ 指定的路径. 如果路径数据包含错误, 但在错误之前至少产生一个有效 路径段, 则按照 路径数据中的错误处理规则使用路径的有效部分 .

值
路径数据
初始值
(none)
可动画
是
href

如果未提供 ‘path’ 属性, 则这是一个指向 将在其上渲染字形的 ‘path’ 元素 或基本形状元素的URL 引用 . 如果使用该属性, 且 <url> 是无效 引用 (例如, 不存在这样的元素, 或被引用的 元素既不是 ‘path’ 元素也不是基本形状), 则 ‘textPath’ 元素处于错误状态, 且用户代理不得渲染其任何 内容.

请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.

值
URL [URL]
初始值
见上文.
可动画
是

被引用 ‘path’ 元素或基本形状 元素中的路径数据坐标被假定与 当前 ‘text’ 元素处于相同坐标系统, 而不是 ‘path’ 元素 定义所在的坐标系统. 被引用 ‘path’ 元素或基本形状 元素上的 transform 属性表示相对于当前 ‘text’ 元素当前用户坐标系统的 附加变换, 包括 由于当前 ‘text’ 元素上可能存在的 transform 特性而对当前用户坐标系统进行的任何调整 . 例如, 以下 SVG 内容片段:

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(25,25)">
    <defs>
      <path id="path1" transform="scale(2)" d="M0,10 L40,20 80,10" fill="none" stroke="red"/>
    </defs>
  </g>
  <text transform="rotate(45)">
    <textPath href="#path1">路径上的文本</textPath>
  </text>
</svg>
  

应具有与以下内容相同的效果:

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="rotate(45)">
    <defs>
      <path id="path1" transform="scale(2)" d="M0,10 L40,20 80,10" fill="none" stroke="red"/>
    </defs>
    <text>
      <textPath href="#path1">路径上的文本</textPath>
    </text>
  </g>
</svg>
  

并等效于:

<svg xmlns="http://www.w3.org/2000/svg">
  <text transform="rotate(45)">
    <textPath path="M0,20 L80,40 160,20"
            >路径上的文本</textPath>
  </text>
</svg>
  

请注意, transform="translate(25,25)" 对 ‘textPath’ 元素没有影响, 而 transform="rotate(45)" 同时应用于 ‘text’ 以及将 ‘path’ 元素用作路径上文本的 被引用形状. 还请注意, transform="scale(2)" 会缩放路径 (对于简单线性路径, 等效于将每个坐标乘以 2), 但不会缩放沿路径放置的文本.

示例 toap01 提供一个 简单的路径上文本示例:

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>示例 toap01 - 路径上的简单文本</desc>

  <use href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath href="#MyPath">
      我们向上, 然后向下, 再次向上
    </textPath>
  </text>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
示例 toap01 — 路径上的简单文本

示例 toap01

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

示例 toap02 展示 如何将 ‘tspan’ 元素 包含在 ‘textPath’ 元素中以调整样式属性并 在渲染特定 字形之前调整当前文本位置. 单词 "up" 第一次出现时使用 红色填充. 属性 ‘dy’ 用于将单词 "up" 从基线上抬起.

‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 属性 只能 在 ‘text’ 和 ‘tspan’ 元素上指定 (但可能影响路径上文本中字形的渲染 — 参见路径上的文本布局 规则).

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>示例 toap02 - textPath 内的 tspan</desc>

  <use href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath href="#MyPath">
      我们 
      <tspan dy="-30" fill="red" >
        向上
      </tspan>
      <tspan dy="30">
        ,
      </tspan>
      然后向下, 再次向上
    </textPath>
  </text>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
示例 toap02 — textPath 内的 tspan

示例 toap02

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

示例 toap03 演示 在 ‘textPath’ 元素上使用 ‘startOffset’ 属性, 将文本字符串的起始位置指定为 路径上的特定位置. 请注意, 超出 路径末端的字形不会渲染 (参见路径上的文本布局 规则).

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <desc>示例 toap03 - 具有 startOffset 属性的路径上文本</desc>

  <use href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath href="#MyPath" startOffset="80%">
      我们向上, 然后向下, 再次向上
    </textPath>
  </text>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
示例 toap03 — 具有 startOffset 属性的路径上文本

示例 toap03

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

11.8.3. 路径上的文本布局规则

从概念上讲, 对于路径上的文本, 目标路径会被拉直 为水平或垂直直线段. 对于 水平文本布局流, 路径被拉直为 假想的水平线段, 使路径起点 映射到线段左侧. 对于垂直文本 布局流, 路径被拉直为假想的 垂直线段, 使路径起点映射到 线段顶部. 标准 文本布局规则应用于 假想直线段, 并将结果 映射回目标路径. 垂直和 双向文本布局规则 也适用于路径上的文本.

沿路径的每个字形的方向分别确定. 对于水平文本布局流, 给定字形的默认方向 (up 方向)沿一个向量, 该向量起始于字形所附着的 路径交点, 并指向从该交点处曲线角度 逆时针旋转 90 度的 方向. 对于垂直文本布局流, 给定字形的默认方向沿一个向量, 该向量起始于字形所附着的路径 交点, 并指向 从该交点处曲线角度旋转 180 度的方向 .

左侧, 路径上带字符 'A' 的水平文本.
	      右侧, 路径上带字符 '字' 的垂直文本.

沿路径的默认字形方向. 左侧, 水平文本. 右侧: 垂直文本.

示例 toap04 将用于 说明路径上文本的特定布局规则 , 这些规则补充了直线水平或垂直 文本的基本文本 布局规则.

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath"
          d="M 100 125 
             C 150 125 250 175 300 175
             C 350 175 450 125 500 125
             C 550 125 650 175 700 175
             C 750 175 850 125 900 125" />
  </defs>
  <desc>示例 toap04 - 路径上文本布局规则</desc>

  <use href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2" >
    <textPath href="#MyPath">
      选择耻辱或获得战争 
    </textPath>
  </text>

  <!-- 使用 'rect' 元素显示视口轮廓 -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
示例 toap04 — 路径上文本布局规则

示例 toap04

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

下图首先放大 ‘text’ 元素中的第一个字形 .

显示路径上文本的图像

上方的小点显示字形附着到 路径的位置. 字形周围的框显示字形被旋转, 使其水平轴平行于 字形附着到路径处曲线的切线. 该框还显示字形的 字符宽度 (即, 使用水平文本 布局绘制字形时当前文本位置在水平方向前进的量 ).

下一张图进一步放大以演示详细的 布局规则.

显示路径上文本的图像

对于沿路径的从左到右水平文本布局 (即, 当字形方向垂直于 行内基方向时), 布局规则如下:

对于沿路径从上到下的垂直文本 布局使用类似规则 (即, 当字形方向 与行内基方向平行时, 布局规则如下:

在上述计算中, 如果路径上起点或 路径上终点中的任一个超出路径末端, 则在路径端点之外 用一条与路径端点处切线 平行的直线延伸 路径, 使路径上的中点仍可计算.

当行内基方向 为水平时, ‘text’ 或 ‘tspan’ 元素上的任何 ‘x’ 属性表示沿 路径的新绝对偏移量, 从而为 路径上起点提供显式新值. ‘text’ 或 ‘tspan’ 元素上的任何 ‘y’ 属性都会被忽略. 当行内基方向 为垂直时, ‘text’ 或 ‘tspan’ 元素上的任何 ‘y’ 属性表示沿 路径的新绝对偏移量, 从而为 路径上起点提供显式新值. ‘text’ 或 ‘tspan’ 元素上的任何 ‘x’ 属性都会被忽略.

在 ‘textPath’ 内定位所有字符之后, 当前文本位置设置为路径的终点, 对于作为单个闭合环路的 路径, 还要针对 ‘startOffset’ 进行调整 . 换句话说, 跟在 ‘textPath’ 元素之后 (但仍位于 ‘text’ 元素内)且 没有显式定位 信息 (‘x’ 和 ‘y’ 属性)的文本 从路径终点开始定位.

路径上的文本, 显示在 <textPath> 元素之后
	      渲染文本的起点.

没有显式定位信息时, ‘textPath’ 元素之后文本的起点 位于路径末端 (红点).

选择路径末端而不是 最后一个字符的位置, 是因为前者对作者而言更可预测 (不依赖字体等). 此决定在 London (2016) 编辑会议上作出. 另见 GitHub Issue 84.

11.9. 文本渲染顺序

‘text’ 元素以 一个或多个块渲染. 每个块 (由文本布局算法生成) 按文档顺序依次渲染. 每个 已渲染块由一个或多个字形组成, 像单个路径一样进行填充和描边.

这意味着块中的所有字形应先填充, 然后所有字形一起描边, 或根据 paint-order 特性的值采用相反顺序.

为了绘制, ‘text’ 有零个, 一个或多个 等效路径, 每个块对应一个. 每个等效路径 由该块内每个字形的一个子路径组成.

由于 fill-rule 特性不 适用于 SVG 文本元素, 因此等效路径内 子路径的具体顺序并不重要.

每个子路径起点的具体位置以及路径 围绕字形形状行进的方向未定义. 但是, 对于给定字体和字形, 用户代理应保持一致.

这意味着文本上的虚线描边在不同实现中 可能不会将虚线图案放置在相同位置.

11.10. 特性和伪元素

CSS 提供大量用于设置文本样式的特性. 一般来说 , 只有两组特性适用于 SVG: 确定 要渲染哪些字形的特性 (font-family, font-style 等)以及 在段落级应用的特性 (direction, writing-mode, line-height, letter-spacing, 等).

SVG 文本 元素必须支持的 CSS 特性列表可以在 样式一章中找到.

此外, 必须支持 @font-face 规则用于 字体选择, 并且 ‘text’ 元素必须支持 ::first-line 和 ::first-letter 伪元素 . 在交互模式下, 还必须支持 ::selection 伪元素.

影响文本布局和渲染的其他 CSS 特性也 可以由 SVG 用户代理支持; 应将其效果 作为整个 SVG 文本布局过程中 CSS 文本布局步骤的一部分考虑.

例如, 虽然 SVG 2 不要求支持 text-combine-upright 特性, 但它在 SVG 上下文中的行为应当是显而易见的.

许多 CSS 特性不得对 SVG 文本元素产生任何影响:

此外, ::before 和 ::after 生成内容伪元素 不得应用于 SVG 文本元素.

未来规范可能会引入对 ::before 和 ::after 生成内容伪元素的支持; 作者不应依赖它们会被忽略.

11.10.1. SVG 特性

本节涵盖本规范其他地方未涵盖 且 SVG 特有的特性.

11.10.1.1. 文本对齐, ‘text-anchor’ 特性

text-anchor 特性用于相对于给定点对齐 (起始对齐, 居中对齐或结束对齐)一串预格式化文本 或换行区域 由 inline-size 特性确定的自动换行文本 . 它不适用于其他类型的 自动换行文本, 请改用 text-align. 对于 多行文本, 每一行分别进行对齐.

text-anchor 特性应用于给定 ‘text’ 元素内的每个单独 文本块. 每个文本 块都有一个初始当前文本位置, 该位置表示 由以下因素 (视上下文而定)应用后产生的用户坐标系统中的点: ‘text’ 元素上的 ‘x’ 和 ‘y’ 属性, ‘tspan’ 元素上明确分配给文本块中第一个渲染 字符的任何 ‘x’ 或 ‘y’ 属性值 , 或确定 ‘textPath’ 元素的初始当前 文本位置. 每个文本块 还有一个最终当前文本位置, 即在 文本块中放置最后一个字形之后的 当前文本位置. 这些位置在 应用 text-anchor 特性之前确定.

名称: text-anchor
值: start | middle | end
初始值: start
适用于: 文本内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

各值具有以下含义:

start
渲染字符的对齐方式使所得渲染文本的起点 位于初始当前文本位置. 对于 direction 特性值为 "ltr" 的元素 (大多数 欧洲语言的典型情况), 文本左侧渲染在 初始文本位置. 对于 direction 特性值为 "rtl" 的元素 (阿拉伯语和 希伯来语的典型情况), 文本右侧渲染在初始 文本位置. 对于主要文本方向为垂直的元素 (亚洲文本常见情况), 文本顶部 渲染在初始文本位置.
middle
渲染字符会移动, 使所得渲染文本的几何 中点 (由应用 text-anchor 特性之前的 初始和最终当前文本位置确定)位于初始 当前 文本位置.
end
渲染字符会移动, 使所得渲染文本的终点 (应用 text-anchor 特性之前的最终当前文本位置) 位于初始当前文本位置. 对于 direction 特性值为 "ltr" 的元素 (大多数 欧洲语言的典型情况), 文本右侧渲染在 初始文本位置. 对于 direction 特性值 为 "rtl" 的元素 (阿拉伯语和 希伯来语的典型情况), 文本左侧渲染在初始 文本位置. 对于主要文本方向为垂直的元素 (亚洲文本常见情况), 文本底部 渲染在初始文本位置.

在多行 文本上使用 text-anchor 的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="150" y="30" style="font: 20px sans-serif; white-space: pre-line;
                              text-anchor: middle;">
    此多行文本
    锚定在中间.</text>

</svg>
显示通过 text-anchor 居中的两行文本图像.

保留的换行符创建两个文本块, 每个 独立锚定.

另一个在 多行文本上使用 text-anchor 的示例.

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="150" viewBox="0 0 200 150">
  <path d="m 100,0 0,150" style="fill:none;stroke:#add8e6"/>
  <text x="100 100 100" y="50 95 140"
	style="font-size: 42px; text-anchor: middle">我❤SVG</text>
</svg>
显示分为 'I', '❤', 'SVG' 三行的文本图像.

文本分成三个文本块 (由于 ‘x’ 和 ‘y’ 属性中的三个坐标). 每个文本块独立锚定.

11.10.1.2. ‘glyph-orientation-horizontal’ 特性

此特性已在 SVG 2 中移除.

11.10.1.3. ‘glyph-orientation-vertical’ 特性

此特性仅适用于垂直文本. 它在 SVG 2 中已废弃, 并部分由 CSS Writing Modes Level 3 的 text-orientation 特性取代. 以下 SVG 1.1 值仍必须受支持, 方法是将此特性 作为 text-orientation 的简写进行别名处理, 如下:

任何其他值都必须视为无效.

11.10.1.4. ‘kerning’ 特性

‘kerning’ 特性已在 SVG 2 中移除.

SVG 1.1 使用 'kerning' 特性确定是否应使用字体 字偶距表来调整字形间 间距. 它还允许 <length> 值, 如果给出该值, 则会将其添加到字形之间的间距中 (作为 letter-spacing 特性产生的任何间距的补充). 在 SVG 2 中, 此特性由 CSS font-kerning 特性取代, 后者仅控制 是否启用字体字偶距表.

Chrome 的 UseCounter 数据显示 2014 年使用率为 0.01%. 参见 GitHub issue 80.

11.10.2. SVG 适配

本节涵盖本规范其他地方未涵盖的 CSS 特性, 这些特性要么具有 SVG 特定适配, 要么与 SVG 1.1 相比发生了显著 更改.

SVG 2 要求: 引用 CSS3 Fonts.
决议: SVG 2 将依赖 CSS3 Fonts.
目的: 在 Web 字体功能方面与 CSS 2.1 和 CSS3 保持一致, 并提供 对字体高级排版功能的访问.
负责人: Chris (ACTION-3123)

11.10.2.1. ‘font-variant’ 特性

本节非规范性

font-variant 特性由 CSS Font Module ([css-font-3])定义.

CSS Font Module 改变了 font-variant 特性在 CSS 2.1 中定义的含义. 它被重新用于 (并且 功能大幅扩展)作为从单个字体内选择字体 变体的简写.

SVG 2 支持所有 font-variant 完整形式特性 (例如 font-variant-ligatures).

11.10.2.2. ‘line-height’ 特性

SVG 使用 line-height 特性确定 多行文本中各行之间添加的 行距量 (水平和垂直文本都适用). 它不适用于 路径上的文本.

除此处提供的附加信息外, line-height 特性的规范性 定义位于 CSS 2.1 规范中 ([CSS2]).

CSS Inline Module Level 3 可能会更新 'line-height' 的定义.

11.10.2.3. ‘writing-mode’ 特性

本节非规范性.

writing-mode 特性由 CSS Writing Modes Module ([css-writing-modes-3])定义.

此特性设置块流方向; 换句话说, 即文本行堆叠的方向. 因此它还 确定文本是水平还是垂直方向.

SVG 2 引用 CSS Writing Modes Level 3 来定义 'writing-mode' 特性. 该规范为此特性引入了新值. SVG 1.1 值已过时, 但仍必须通过 按以下方式将指定值转换为计算值来支持:

在 SVG 1.0 中, 此特性可以被解释为同时设置 行内基方向, 从而导致其相对于 direction 特性的作用产生混淆. SVG 1.1 对 direction 的作用更加 明确一些 (例如 direction 设置 text-anchor 特性的参考点), 但仍然存在 解释空间. SVG 1.0 和 SVG 1.1 都不允许 多行文本这一事实进一步增加了混淆.

11.10.2.4. ‘direction’ 特性

此特性指定 ‘text’ 或 ‘tspan’ 元素的 行内基方向. 它定义文本行的 start 和 end 点, 供 text-anchor 和 inline-size 特性使用. 如果 unicode-bidi 特性的值为 embed 或 bidi-override, 它 还可能影响字符定位的方向.

direction 特性仅适用于 方向垂直于行内基方向的字形, 其中包括通常的水平方向拉丁或 阿拉伯文本, 以及窄单元格拉丁或阿拉伯字符 相对于从上到下的 行内基方向顺时针旋转 90 度的情况.

审阅者, 请特别注意确保这与 CSS3 Writing modes 一致.

除此处提供的附加信息外, direction 特性的规范性 定义位于 CSS Writing Modes Level 3 ([css-writing-modes-3]).

在许多情况下, Unicode [UNICODE] 的双向算法会自动产生所需 结果, 在这种情况下作者不需要 使用这些特性. 在其他情况下, 例如使用 从右到左语言时, 可能只需将 direction 特性添加到最外层 svg 元素, 并让该方向继承到所有文本元素, 如 以下示例所示 (可用作模板):

<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="100%" viewBox="0 0 600 72"
     direction="rtl" xml:lang="fa">

  <title direction="ltr" xml:lang="en">从右到左文本</title>
  <desc direction="ltr" xml:lang="en">
    在主要使用从右到左语言的文档中
    使用 'direction' 特性的简单示例.
  </desc>

  <text x="300" y="50" text-anchor="middle" font-size="36">داستان SVG 1.1 SE طولا ني است.</text>

</svg>
示例

示例

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

下面是另一个示例, 其中隐式 bidi 重排序不足:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="100%" viewBox="0 0 600 72"
     direction="rtl" xml:lang="he">

  <title direction="ltr" xml:lang="en">从右到左文本</title>
  <desc direction="ltr" xml:lang="en">
    在主要使用从右到左语言的文档中使用 'direction' 和 'unicode-bidi' 特性的
    示例.
  </desc>

  <text x="300" y="50" text-anchor="middle" font-size="36"> כתובת MAC:&#x200F;
    <tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan> 
  </text>

</svg>
示例

示例

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

11.10.2.5. ‘dominant-baseline’ 特性

此特性在 CSS Line Layout Module 3 规范中定义. 参见 'dominant-baseline'. [css-inline-3]

SVG 2 对此特性的定义引入了一些更改. 特别是:

SVG 使用 dominant-baseline 特性的值 相对于 ‘x’ 和 ‘y’ 属性对齐字形. 对于 text-orientation 值 sideways, dominant-baseline 的 auto 值为 alphabetic; 但是, 为了向后 兼容, 字形应使用 central 值与 ‘x’ 和 ‘y’ 属性对齐.

我们希望了解任何实际使用中有人更倾向旧行为的情况.

11.10.2.6. ‘alignment-baseline’ 特性

此特性在 CSS Line Layout Module 3 规范中定义. 参见 'alignment-baseline'. [css-inline-3]

新内容中应优先使用 vertical-align 特性简写 .

SVG 2 对此特性的定义引入了一些更改. 特别是: 值 'auto', 'before-edge', 和 'after-edge' 已被移除. 为了向后兼容, 'text-before-edge' 应映射到 'text-top', 'text-after-edge' 应 映射到 'text-bottom'. 'text-before-edge' 和 'text-after-edge' 都不应与 vertical-align 特性一起使用.

11.10.2.7. ‘baseline-shift’ 特性

此特性在 CSS Line Layout Module 3 规范中定义. 参见 'baseline-shift'. [css-inline-3]

新内容中应优先使用 vertical-align 特性简写 .

在将 'vertical-align' 转换为 'alignment-baseline' 和 'baseline-shift' 的简写时移除了 'baseline' 值, 因为它也是 'alignment-baseline' 的一个值 , 并且与长度值 '0' 重复.

SVG 2 要求: 在基线对齐功能方面与 CSS 保持一致.
决议: SVG 2 将弃用 ‘baseline-shift’ 并改用 ‘vertical-align’.
目的: 与 CSS 保持一致.
负责人: Cameron (ACTION-3281)

'baseline-shift' 对对齐下标和上标很重要 (Inkscape 为此目的依赖它). 它仍保留在 CSS Inline Layout Module Level 3 中. 'vertical-align' 是一次更改多个特性的简写, 包括 'baseline-shift'.

11.10.2.8. ‘letter-spacing’ 特性

除另有说明外, 有关 letter-spacing 的定义参见 CSS Text Level 3.([css-text-3]).

SVG 1.1 允许 letter-spacing 特性使用百分比值. 基于 SVG 视口的百分比 值被认为没有 用处, 因此在 SVG 2 中移除. 这使 'letter-spacing' 的定义与 CSS 保持一致.

11.10.2.9. ‘word-spacing’ 特性

除另有说明外, 有关 word-spacing 的定义参见 CSS Text Level 3.([css-text-3]).

SVG 2 更改了 word-spacing 特性百分比值的含义. 在 SVG 1.1 中, 百分比将 额外间距定义为SVG 视口 大小的百分比. 基于 SVG 视口的百分比值被认为没有 用处. 在 SVG 2 中, 按照 CSS Text Level 3, 百分比将 额外间距定义为受影响字符 宽度的百分比. 这使 'word-spacing' 的定义与 CSS 保持一致.

11.10.2.10. ‘text-overflow’ 特性

SVG 2 要求: 添加 text-overflow 功能.
决议: 我们将在 SVG 2 中添加 text-overflow.
目的: 与 CSS 保持一致, 允许指示并非所有文本都显示.
负责人: Erik (ACTION-3003)

SVG 2 中新增. 添加此功能是为了让用户代理以更有用的方式处理 溢出预定义换行区域的文本字符串. 使 SVG 和 HTML/CSS 文本处理保持一致.

有关 'text-overflow' 的定义, 参见 CSS3 Overflow 规范. [css-overflow-3]

SVG 使用 text-overflow 特性控制 当文本溢出行框时文本内容块元素如何渲染, 例如 当 white-space 特性的值 为 nowrap 时可能发生这种情况. 此特性不 适用于预格式化文本或路径上的文本.

在 SVG 中, 如果存在有效 指定的换行区域, 则无论文本内容块元素上的 overflow 特性的计算值为何, text-overflow 都会生效 .

如果 text-overflow 特性的值为 ellipsis, 那么如果要 渲染的文本溢出换行区域, 将渲染一个省略号, 使其适合给定区域. 为了 渲染, 省略号被视为替换了 插入位置处的字符.

如果 text-overflow 特性的值为 clip, 则任何 溢出换行区域的文本都会被裁剪. 字符可能部分渲染.

text-overflow 的任何其他值都视为 未 指定.

请注意, text-overflow 的效果纯粹是 视觉上的, 省略号本身不会成为 DOM 的一部分. 对于所有 DOM 方法, 就像未应用 text-overflow , 并且 换行区域没有限制文本一样.

以下示例展示 text-overflow 的使用. 顶行显示文本正常渲染的样子 (文本 由于 white-space 值 pre 而溢出, 并且由于 overflow 值 visible 而显示). 中间一行显示 text-overflow 值为 clip 的文本, 而 底行显示 text-overflow 值为 ellipsis 的文本.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="150" viewBox="0 0 300 150">
  <style>
    text { font: 25px sans-serif; white-space: pre; }
    path { fill: none; stroke: #add8e6; }
  </style>

  <path d="m  50,0 0,150"/>
  <path d="m 200,0 0,150"/>

  <text x="50" y="35"  inline-size="100" style="overflow:visible">SVG 很棒</text>
  <text x="50" y="85"  inline-size="100" style="text-overflow:clip">SVG 很棒</text>
  <text x="50" y="135" inline-size="100" style="text-overflow:ellipsis">SVG 很棒</text>

</svg>
显示 text-overflow 特性使用方式的图像.

text-overflow 特性 用于 text 元素, 底行显示应用省略号的文本 .

有人认为此特性毫无用处. 如果与一种可以公开 隐藏文本的机制结合使用, 它会更有用 (悬停在省略号上时显示工具提示?). text-overflow 特性只处理从一行末端溢出的文本. 它 不处理从换行区域末端溢出的文本.

11.10.3. 空白

SVG 2 中新增. 添加 white-space 以提供一种更有用的 空白处理控制方式. 使 SVG 和 HTML/CSS 文本 处理保持一致. ‘xml:space’ 在新内容中已弃用, 保留 用于向后兼容.

11.10.3.1. SVG 2 首选的空白处理, ‘white-space’ 特性

SVG 2 中空白的渲染由 white-space 特性控制. 它指定两件事:

值及其含义定义于 CSS Text Module Level 3.[css-text-3]

使用 white-space 值 pre-line 的示例.

<svg xmlns="http://www.w3.org/2000/svg">
     width="200" height="200" viewBox="0 0 200 200">

     <text x="150" y="30" style="font: 20px IPAMincho; writing-mode: vertical-rl;
	                         white-space: pre-line;">
       千利奴流乎和加
       餘多連曽津祢那
       良牟有為能於久
       耶万計不己衣天
       阿佐伎喩女美之
       恵比毛勢須</text>
</svg>
显示传统上每七个假名换行的日文诗歌.

带换行的多行垂直文本示例. 文本 来自日本诗歌 Iroha. 各行在传统 位置断开.

11.10.3.2. 旧式空白处理, ‘xml:space’ 特性

为了兼容, SVG 2 还支持 XML 属性 ‘xml:space’, 用于指定 给定 ‘text’ 元素字符 数据中空白 字符的处理方式. 新内容不应使用 ‘xml:space’, 而应 使用 white-space 特性.

本节应简化, 以减少关于 xml:space 的讨论, 改为在用户代理样式表中使用 white-space 特性定义它. CSS Text 4 规范的 preserve-spaces 值用于 'white-space-collapse' 特性, 旨在匹配 xml:space=preserve. (fantasai 同意为 white-space 添加适当值, 以匹配 SVG 1.1 奇特的 xml:space="preserve" 行为.)

请注意, ‘text’ 元素的任何子元素也可以 具有 ‘xml:space’ 属性, 该属性将应用于该 子元素的文本内容. SVG 用户代理具有与此属性相关的特殊 处理规则, 如 下文所述. 这些行为发生在 XML 解析 [XML] 和任何 DOM 构造之后.

‘xml:space’ 是一个 可继承属性, 可以具有 两个值之一:

'default'
(这是 ‘xml:space’ 的初始/默认值.) 当 xml:space="default" 时, SVG 用户代理将使用原始 字符数据内容的副本执行以下操作. 首先, 它会删除所有换行 字符. 然后将所有制表符转换为空格 字符. 然后移除所有前导和尾随 空格字符. 然后合并所有连续空格字符 .
'preserve'
当 xml:space="preserve" 时, SVG 用户代理将使用 原始字符数据内容的副本执行以下操作. 它会将所有换行符和 制表符转换为空格字符. 然后绘制所有 空格字符, 包括前导, 尾随和多个 连续空格字符. 因此, 当使用 xml:space="preserve" 绘制时, 字符串 "a b" ("a" 和 "b" 之间有三个空格)将在 "a" 和 "b" 之间产生比 "a b" ("a" 和 "b" 之间有一个空格)更大的间距.

以下示例说明在使用 xml:space="default" 时行缩进可能很重要. 下面的片段 显示两对类似的 ‘text’ 元素, 其中 两个 ‘text’ 元素都使用 xml:space="default". 对于 这些示例, 任一行末尾都没有额外空白 (即, 换行紧接在最后一个 可见字符之后).

[01]  <text xml:space='default'>
[02]    WS 示例
[03]    缩进的行
[04]  </text>
[05]  <text xml:space='preserve'>WS 示例 缩进的行</text>
[06]
[07]  <text xml:space='default'>
[08]WS 示例
[09]未缩进的行
[10]  </text>
[11]  <text xml:space='preserve'>WS 示例未缩进的行</text>
  

上面的第一对 ‘text’ 元素显示 缩进字符数据的效果. 第一个 ‘text’ 元素中的属性 xml:space="default" 指示 用户代理:

上面的第二对 ‘text’ 元素显示 未缩进字符数据的效果. 第三个 ‘text’ 元素中的属性 xml:space="default" 指示 用户代理:

请注意, XML 解析器必须将换行指示符的标准 表示形式 (例如, 字面 双字符序列 "U+000D U+000A", CARRIAGE-RETURN LINE-FEED 或单独的字面 U+000D 或 U+000A)转换为单个 字符 U+000A, 然后再将字符数据传递给 应用程序. 因此, SVG 中的每个换行都将由 单个字符 U+000A 表示, 无论原始资源中 使用了哪种换行表示形式. (参见 XML 行尾处理.)

SVG 语言或 SVG DOM 中任何基于 字符位置编号的功能, 例如 ‘text’ 和 ‘tspan’ 元素上的 ‘x’, ‘y’, ‘dx’, ‘dy’ 和 ‘rotate’ 属性, 都基于 应用此处所述空白处理规则之后的 字符位置. 特别是, 如果 xml:space="default", 通常 空白字符会作为 处理的一部分被移除. 字符位置编号索引到 根据本节规则 移除空白字符后的文本字符串.

请注意, 对应于空白字符的字形应 仅显示为可见但空白的空间, 即使该字形 本身恰好并非空白. 参见不支持字符的 显示 [UNICODE].

‘xml:space’ 属性:

可动画: 否.

11.10.3.3. 重复的空白指令

较旧的 SVG 1.1 内容将使用 ‘xml:space’. 新内容, 以及正在重做的旧内容, 将使用 white-space 并移除 任何现有 ‘xml:space’. 但是, 用户代理可能遇到 在同一元素上同时使用两种方法的内容. 如果 在任何元素上设置了 white-space 特性, 则 ‘xml:space’ 的值 会被忽略.

11.11. 文本装饰

SVG 中的文本可以用下划线, 上划线 和/或删除线进行装饰. 装饰的位置和样式 分别由 text-decoration-line 和 text-decoration-style 特性确定, 或由 text-decoration 简写特性确定, 如 CSS Text Decoration Module Level 3 规范的 行 装饰一节所定义 [(css-text-decor-3)] .

文本装饰的填充和描边 由声明文本装饰位置处文本的填充和描边给出 (参见下方示例).

text-decoration-line 和 text-decoration-style 特性是 SVG 2 中新增的. SVG 1.1/CSS 2.1 text-decoration 特性 以向后兼容的方式转换 为这些特性的简写 .

文本和装饰的绘制顺序由 CSS Text Decoration Module Level 3 的 文本装饰的绘制 顺序一节定义. 文本 装饰自身 (填充/描边)的绘制顺序由声明文本 装饰位置处 paint-order 特性的值确定.

示例 textdecoration01 提供 text-decoration 的示例. 第一行 文本没有 text-decoration 的值, 因此使用 text-decoration:none 的初始 值. 第二行显示 text-decoration:line-through. 第三行显示 text-decoration:underline. 第四行说明这样一条规则: 装饰使用 与指定 text-decoration 的 元素上的填充和描边特性相同的值 渲染. 因为 text-decoration 指定在 ‘text’ 元素上, 所以 ‘text’ 元素中的所有文本 都使用与 ‘text’ 元素上 相同的填充和描边特性渲染下划线 (即, 蓝色填充, 红色描边), 即使不同单词具有不同的填充和描边 特性值. 但是, 单词 "different" 明确 指定了 text-decoration 的值; 因此, 它的 下划线使用包围单词 "different" 的 ‘tspan’ 元素的 填充和描边特性 渲染 (即, 黄色填充, 深绿色描边):

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>示例 textdecoration01 - 'text-decoration' 特性的行为</desc>
  <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" />
  <g font-size="60" fill="blue" stroke="red" stroke-width="1" >
    <text x="100" y="75">普通文本</text>
    <text x="100" y="165" text-decoration="line-through" >带删除线的文本</text>
    <text x="100" y="255" text-decoration="underline" >带下划线的文本</text>
    <text x="100" y="345" text-decoration="underline" >
      <tspan>一个 </tspan>
      <tspan fill="yellow" stroke="purple" >单词 </tspan>
      <tspan fill="yellow" stroke="black" >具有 </tspan>
      <tspan fill="yellow" stroke="darkgreen" text-decoration="underline" >不同的 </tspan>
      <tspan fill="yellow" stroke="blue" >下划线</tspan>
    </text>
  </g>
</svg>
示例 textdecoration01 — 'text-decoration' 特性的行为

示例 textdecoration01

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

11.12. 文本选择和剪贴板操作

在具有文本选择能力的系统上 (例如, 配备鼠标等指针设备的系统), 并且 具有用于复制/粘贴操作的系统剪贴板时, 符合要求的 SVG 查看器必须支持:

当以下所有情况发生时, 文本选择操作开始:

随着文本选择操作进行 (例如, 用户继续 按住给定鼠标按钮), 与其他 图形元素相关的所有事件都会被忽略 (即, 文本选择操作 是模态的), 并且 SVG 用户代理应通过应用 ::selection 伪类的样式 动态指示哪些字符被选中. 随着 指针在文本选择过程中移动, 文本选择操作的 结束字形是同一 ‘text’ 元素中 字形单元最接近 指针的字形. ‘text’ 元素内位置位于 选择起点和选择终点之间的所有字符都应高亮, 无论其在画布上的 位置如何, 也无论任何图形元素 是否位于选择终点之上.

文本选择操作结束后 (例如, 用户释放 给定鼠标按钮), 所选文本将保持高亮, 直到发生取消文本选择的事件, 例如 指针设备激活事件 (例如, 按下鼠标按钮).

有关确定文本选择操作期间应高亮哪些字符的详细规则 , 请参阅 文本 选择实现说明.

对于具有系统剪贴板的系统, SVG 用户代理 必须提供一个用户界面, 用于启动将当前 所选文本复制到系统剪贴板. SVG 用户代理 只需将所选文本字符串以系统适当的纯文本剪贴板格式 放入即可, 但 如果 SVG 用户代理还提供能够保留与给定文本字符串相关 各种字体特性的富文本 替代格式则更理想.

对于双向文本, 用户代理必须支持按逻辑顺序选择文本, 这会由于字符的双向重排序而导致字形 高亮不连续. 用户 代理可以提供另一种能力, 按视觉渲染顺序选择双向 文本 (即, 在应用双向 文本布局算法之后), 其结果可能是 所选字符数据在逻辑上不连续. 在这种 情况下, 如果用户请求将双向文本复制到 剪贴板, 则用户代理必须进行适当 调整, 仅将视觉上选中的字符复制到 剪贴板.

SVG 作者和SVG 生成器应 排列其文本字符串, 以便在 Web 浏览器等 SVG 查看应用程序中 实现正确顺序的文本 选择; 换句话说, 文本的 DOM 顺序应与 文本的自然阅读顺序一致.

11.12.1. 文本选择实现说明

以下实现说明描述 在文本选择 操作期间决定选择哪些字符的算法.

随着文本选择操作发生 (例如, 当用户 点击并拖动鼠标以确定选择范围时), 用户 代理确定一个选择起始位置和一个 选择结束位置, 每个都表示 文本字符串中两个字符之间的位置. 确定 选择起始位置和选择结束 位置后, 用户代理选择适当字符, 得到的文本选择由以下之一组成:

在具有指针设备的系统上, 为确定选择 起始位置, SVG 用户代理根据启动选择 操作事件发生时的当前指针位置, 确定与渲染字形对应的字符之间哪个边界 是最佳目标 (例如最接近) (例如, 鼠标按下事件). 然后用户代理 跟踪选择操作的完成过程 (例如, 鼠标拖动, 最终随后鼠标释放). 在 选择操作结束时, 用户代理确定 哪个字符之间的边界是选择结束位置的最佳目标 (例如最接近).

如果由于双向性没有发生字符重排序, 则选择由选择起始位置和选择结束 位置之间的所有字符组成. 例如, 如果一个 ‘text’ 元素包含 字符串 "abcdef", 且选择起始位置和选择结束 位置分别为 0 和 3 (假设 "a" 的左侧为位置零), 则选择将 由 "abc" 组成.

当用户代理实现 双向文本选择, 且选择在逻辑顺序不连续的字符之间开始 (或结束) 时, 可能有多个潜在的 字符组合可视为选择的一部分. 用于从潜在 选择选项组合中进行选择的算法应选择最 接近文本字符串视觉渲染顺序的选择选项.

当多个字符不可分割地映射到给定的一组 一个或多个字形时, 用户代理可以禁止 选择从字形组中间开始, 或者可以 尝试将字形组所占区域的一部分 分配给与字形对应的字符.

对于支持鼠标等指针设备的系统, 用户代理必须提供一种机制, 即使给定文本具有相关事件处理程序或 链接也能选择文本, 这些事件处理程序或 链接可能由于事件处理优先级规则阻止文本选择 (参见指针事件). 一种实现选项: 对于支持鼠标等指针 设备的平台, 用户代理可以在字符单元格周围提供一个很小的 附加区域, 该区域启动文本 选择操作, 但不启动事件处理程序或 链接.

11.13. DOM 接口

SVG 2 要求: 提供一个 DOM 方法, 将 ‘text’ 元素转换为轮廓路径数据.
决议: 我们将添加一个 DOM 方法, 将 ‘text’ 元素转换为轮廓路径数据, 可能将该 功能移至 FXTF.
目的: 允许将文本作为路径进行操作.
负责人: Cameron (ACTION-3076)
状态: 未来愿望清单

11.13.1. 接口 SVGTextContentElement

SVGTextContentElement 接口由 支持渲染子文本内容的元素实现.

对于此接口上引用字符索引 或字符数量的方法, 这些引用应 分别解释为 UTF-16 代码单元的索引或 UTF-16 代码单元的数量. 这是为了与 DOM Level 2 Core 保持一致, 其中 CharacterData 接口上的方法 使用 UTF-16 代码单元作为字符 数据中的索引和计数. 因此例如, 如果一个 ‘text’ 元素的文本内容是单个非 BMP 字符, 如 U+10000, 则 在该 元素上调用 getNumberOfChars 将返回 2, 因为有两个 UTF-16 代码单元 ( 代理对)用于表示该一个字符.

[Exposed=Window]
interface SVGTextContentElement : SVGGraphicsElement {

  // lengthAdjust 类型
  const unsigned short LENGTHADJUST_UNKNOWN = 0;
  const unsigned short LENGTHADJUST_SPACING = 1;
  const unsigned short LENGTHADJUST_SPACINGANDGLYPHS = 2;

  [SameObject] readonly attribute SVGAnimatedLength textLength;
  [SameObject] readonly attribute SVGAnimatedEnumeration lengthAdjust;

  long getNumberOfChars();
  float getComputedTextLength();
  float getSubStringLength(unsigned long charnum, unsigned long nchars);
  SVGPoint getStartPositionOfChar(unsigned long charnum);
  SVGPoint getEndPositionOfChar(unsigned long charnum);
  SVGRect getExtentOfChar(unsigned long charnum);
  float getRotationOfChar(unsigned long charnum);
  long getCharNumAtPosition(optional DOMPointInit point = {});
  undefined selectSubString(unsigned long charnum, unsigned long nchars);
};

SVGTextContentElement 上定义的数字长度调整类型常量 用于表示 ‘lengthAdjust’ 属性 可以采用的关键字值. 其含义如下:

常量 含义
LENGTHADJUST_SPACING spacing 关键字.
LENGTHADJUST_SPACINGANDGLYPHS spacingAndGlyphs 关键字.
LENGTHADJUST_UNKNOWN 其他某个值.

textLength IDL 属性 反映 ‘textLength’ 内容 属性.

‘textLength’ 内容 属性的初始值 定义为等于用户代理为该元素计算的长度. 换句话说, 当内容属性不存在时, IDL 特性以一个等于 同一元素上 getComputedTextLength 返回值的基长度初始化, 该长度以用户单位表示.

lengthAdjust IDL 属性 反映 ‘lengthAdjust’ 内容 属性. ‘lengthAdjust’ 的数字类型值 如上面的数字长度调整类型 常量表所述.

getNumberOfChars 方法返回当前元素内可用于 渲染的可寻址 字符总数, 无论它们是否实际渲染. 调用 getNumberOfChars() 时, 运行以下步骤:

  1. 令 node 为调用此方法的元素或节点
  2. 如果 node 是 DOM 文本节点, 则在根据其父元素上的 white-space 特性值规范化空白后, 返回 node 文本内容的长度.
  3. 如果 node 是 Element:
    • 如果该元素未渲染 (例如, 因为 display 特性的使用值为 none), 则返回 0;
    • 否则, 将 count 设置为 0, 并对 node 的每个子节点:
      • 递归调用此算法并将返回值加到 count.
      返回 count.
  4. 对于所有其他节点类型 (例如 DOM 注释), 返回 0.

getComputedTextLength 方法用于计算元素内文本的 "长度". 调用 getComputedTextLength() 时, 运行以下步骤:

  1. 令 count 为在此元素上调用 getNumberOfChars 方法时将返回的值.
  2. 令 length 为在此元素上调用 getSubStringLength 方法并传递 0 和 count 作为参数时将返回的值.
  3. 返回 length.

getSubStringLength 方法用于计算元素内文本子字符串的格式化文本前进距离 . 调用 getSubStringLength(charnum, nchars) 时, 运行以下步骤:

  1. 为此元素内 DOM 中的每个可寻址字符分配索引 , 第一个字符的索引为 0.
  2. 如果 charnum 大于分配给字符的最高索引 或 nchars 为负, 则抛出 IndexSizeError.
  3. 令 length 为以用户单位表示的长度, 初始化为 0.
  4. 对于此元素内 DOM 中 索引满足 charnum ≤ index < (charnum + nchars) 的每个可寻址字符:
    1. 如果该字符对应于排版 字符, 并且它是文档顺序中 第一个对应于该排版字符的字符, 则:
      1. 将排版 字符的前进值加到 length, 并针对生效的任何字体字偶距进行调整.
      2. 如果 letter-spacing 或 word-spacing 特性 在排版字符之后刚好贡献了间距, 则将 该间距 加到 length.

      这意味着, 例如, 如果一个连字 只部分包含在子字符串中, 那么 排版字符的前进值 以及任何后续 letter-spacing 或 word-spacing 间距将分配给第一个 字符的文本长度.

  5. 返回 length.

先前版本的 SVG 要求此方法 和 getComputedTextLength 还包括 由于子 元素上的 ‘dx’ 或 ‘dy’ 导致的行内方向定位调整, 使返回值等效于 用户代理对 ‘textLength’ 的计算. 但是, 这一定义不明确, 实现不佳, 且收益存疑, 因此已简化以匹配实现.

文本长度方法的更改在 2015 年 8 月 Paris 面对面会议上解决.

要查找 字符对应的排版 字符, 给定元素 element 内索引 index 处的 字符, 运行以下步骤:

  1. 为此元素内 DOM 中的每个可寻址字符分配索引 , 第一个字符的索引为 0.
  2. 令 last 为分配给字符的最高索引.
  3. 当 charnum < last 且 索引 charnum 处的字符不对应于 排版字符时:
    1. 将 charnum 设置为 charnum + 1.
  4. 如果 charnum 大于分配给字符的最高索引 或, 则返回 null.
  5. 否则, 返回与 charnum 对应的排版字符 .

getStartPositionOfChar 方法用于获取文本 布局完成后排版 字符的位置. 调用 getStartPositionOfChar(charnum) 时, 运行以下步骤:

  1. 令 cluster 为 在当前元素内索引 charnum 处 查找字符对应的排版 字符的结果 .
  2. 如果 cluster 为 null, 则抛出 IndexSizeError.
  3. 令 p 为 与索引 charnum 处字符对应的排版字符 的对齐点 , 位于当前元素的坐标系统中.
  4. 返回一个新创建的, 分离的 SVGPoint 对象, 表示点 p.

getEndPositionOfChar 方法用于获取文本 布局完成后排版字符的尾部位置. 调用 getEndPositionOfChar(charnum) 时, 运行以下步骤:

  1. 令 cluster 为 在当前元素内索引 charnum 处 查找字符对应的排版 字符的结果 .
  2. 如果 cluster 为 null, 则抛出 IndexSizeError.
  3. 令 p 为 cluster 的对齐点 , 它对应索引 charnum 处的字符, 位于当前元素的坐标系统中.
  4. 令 direction 为沿 cluster 前进方向的单位向量. 此方向考虑 所使用的书写模式, 字符方向, text-orientation, glyph-orientation-horizontal 和 glyph-orientation-vertical 特性, 应用于 cluster 的任何 ‘rotate’ 值, 以及由于 ‘textPath’ 而应用的任何旋转.
  5. 令 advance 为 cluster 的前进值.
  6. 将 p 设置为 p + advance · direction.
  7. 返回一个新创建的, 分离的 SVGPoint 对象, 表示点 p.

getExtentOfChar 方法用于计算与给定排版字符对应的字形单元的紧密边界框 . 调用 getExtentOfChar(charnum) 时, 运行以下步骤:

  1. 令 cluster 为 在当前元素内索引 charnum 处 查找字符对应的排版 字符的结果 .
  2. 如果 cluster 为 null, 则抛出 IndexSizeError.
  3. 令 quad 为当前元素坐标系统中 可能旋转的矩形, 它是 cluster 的字形单元.
  4. 令 rect 为在当前元素 坐标系统中形成围绕 quad 的最紧密 边界框的矩形.
  5. 返回一个新创建的 SVGRect 对象, 表示 矩形 rect.

getRotationOfChar 方法用于获取排版 字符的旋转. 调用 getRotationOfChar(charnum) 时, 运行以下步骤:

  1. 令 cluster 为 在当前元素内索引 charnum 处 查找字符对应的排版 字符的结果 .
  2. 如果 cluster 为 null, 则抛出 IndexSizeError.
  3. 令 direction 为以度为单位表示 cluster 前进方向的角度. 此方向考虑 所使用的书写模式, 字符方向, text-orientation, glyph-orientation-horizontal 和 glyph-orientation-vertical 特性, 应用于 cluster 的任何 ‘rotate’ 值, 以及由于 ‘textPath’ 而应用的任何旋转.
  4. 返回 direction.

getCharNumAtPosition 方法用于查找哪个字符导致文本字形 渲染在坐标系统中的给定位置. 因为字符和字形之间并非一一对应, 只返回相关排版 字符的第一个字符 调用 getCharNumAtPosition(point) 时, 运行以下步骤:

  1. 为此元素内 DOM 中的每个字符分配索引, 第一个字符的索引为 0.
  2. 令 last 为分配给字符的最高索引.
  3. 令 charnum 为 0.
  4. 令 result 为 -1.
  5. 当 charnum < last 时:
    1. 如果索引 charnum 处的字符对应于 排版字符, 且它是文档顺序中 第一个对应于该排版字符的字符, 并且此元素坐标系统中的 point 位于该排版 字符的字形单元内, 则 将 result 设置为 charnum.
  6. 返回 result.

selectSubString 方法用于选择元素内的文本. 调用 selectSubString(charnum, nchars) 时, 运行以下步骤:

选择此元素中文本的一个子字符串, 从字符 索引 charnum 开始, 向前延伸 nchars 个字符. 调用此方法时必须遵循以下步骤:

  1. 令 node 为此文本内容元素.
  2. 令 count 为此文本内容元素中的字符数.
  3. 令 end = charnum + nchars.
  4. 如果 charnum ≥ count 或 end ≥ count, 则抛出 IndexSizeError.
  5. 从文档的选择中移除所有范围 . [DOM][EDITING]
  6. 将选择的 方向设置为 forwards.
  7. 向选择中添加 一个新的范围, 其 起点为 边界点 元组 (node, charnum), 且终点 为边界点 元组 (node, end).

忽略参数检查和异常抛出, 这等效于 执行以下操作:

var selection = document.getSelection();
selection.removeAllRanges();
var range = new Range();
range.setStart(textContentElement, charnum);
range.setEnd(textContentElement, charnum + nchars);
selection.addRange(range);

此方法已弃用, 因为它重复了 Selection API 的功能.

11.13.2. 接口 SVGTextPositioningElement

SVGTextPositioningElement 接口由支持 定位单个文本字形属性的元素实现. 它由 SVGTextElement 和 SVGTSpanElement 继承.

[Exposed=Window]
interface SVGTextPositioningElement : SVGTextContentElement {
  [SameObject] readonly attribute SVGAnimatedLengthList x;
  [SameObject] readonly attribute SVGAnimatedLengthList y;
  [SameObject] readonly attribute SVGAnimatedLengthList dx;
  [SameObject] readonly attribute SVGAnimatedLengthList dy;
  [SameObject] readonly attribute SVGAnimatedNumberList rotate;
};

x, y, dx, dy 和 rotate IDL 属性 分别反映 ‘x’, ‘y’, ‘dx’, ‘dy’ 和 ‘rotate’ 内容属性.

11.13.3. 接口 SVGTextElement

SVGTextElement 对象表示 DOM 中的 ‘text’ 元素 .

[Exposed=Window]
interface SVGTextElement : SVGTextPositioningElement {
};

11.13.4. 接口 SVGTSpanElement

SVGTSpanElement 对象表示 DOM 中的 ‘tspan’ 元素 .

[Exposed=Window]
interface SVGTSpanElement : SVGTextPositioningElement {
};

11.13.5. 接口 SVGTextPathElement

SVGTextPathElement 对象 表示 DOM 中的 ‘textPath’ 元素.

[Exposed=Window]
interface SVGTextPathElement : SVGTextContentElement {

  // textPath Method 类型
  const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0;
  const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1;
  const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2;

  // textPath Spacing 类型
  const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0;
  const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1;
  const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2;

  [SameObject] readonly attribute SVGAnimatedLength startOffset;
  [SameObject] readonly attribute SVGAnimatedEnumeration method;
  [SameObject] readonly attribute SVGAnimatedEnumeration spacing;
};

SVGTextPathElement includes SVGURIReference;

SVGTextPathElement 上定义的数字 method 类型常量 用于表示 ‘method’ 属性可以采用的关键字值. 其含义如下:

常量 含义
TEXTPATH_METHODTYPE_ALIGN align 关键字.
TEXTPATH_METHODTYPE_STRETCH stretch 关键字.
TEXTPATH_METHODTYPE_UNKNOWN 其他某个值.

SVGTextPathElement 上定义的数字 spacing 类型常量 用于表示 ‘spacing’ 属性可以采用的关键字值. 其含义如下:

常量 含义
TEXTPATH_SPACINGTYPE_AUTO auto 关键字.
TEXTPATH_SPACINGTYPE_EXACT exact 关键字.
TEXTPATH_SPACINGTYPE_UNKNOWN 其他某个值.

startOffset IDL 属性 反映 ‘startOffset’ 内容 属性.

method IDL 属性 反映 ‘method’ 内容属性. ‘method’ 的 数字类型值如 上面的数字 method 类型常量表所述.

spacing IDL 属性 反映 ‘spacing’ 内容属性. ‘spacing’ 的 数字类型值如 上面的数字 spacing 类型常量表所述.


第 12 章: 嵌入内容

12.1. 概述

嵌入内容是将另一个资源导入文档的内容, 或者来自另一种 词汇表并插入文档的内容. 这与 HTML 对嵌入 内容的定义相同.

SVG 通过使用 ‘image’ 和 ‘foreignObject’ 元素支持嵌入内容.

使用 ‘image’ 嵌入的内容与用于优先下载外部 资源的 资源提示兼容.

12.2. 嵌入内容的放置

x, y, width, 和 height 几何特性指定嵌入内容定位到其中的矩形区域 ( 定位 矩形). 定位矩形用作 元素的边界框; 但是请注意, 图形可能溢出定位矩形, 具体取决于 overflow 特性的值.

当嵌入内容由单个被引用资源组成时 (例如, ‘image’), 在应用所有变换后的当前坐标系统中, 定位矩形的尺寸 定义嵌入对象的指定尺寸 . 必须使用 CSS 布局中为替换元素定义的默认尺寸算法 [css-images-3]为对象确定具体对象尺寸和最终 位置. object-fit 和 object-position 会影响对象的最终 位置和尺寸, 并可能使其延伸到定位 矩形之外. 在这种情况下, overflow 特性 决定是否应将 已渲染对象裁剪到其定位 矩形.

当嵌入内容由文档片段组成时 (例如, ‘foreignObject’), 定位矩形定义一个 包含块的边界, 用于使用 CSS 布局 子内容. 包含块的比例在当前坐标系统中定义, 包括所有显式和隐式 (例如, ‘viewBox’)变换. ‘foreignObject’, 或其他 使用 SVG 布局属性定位的元素, 为 CSS 布局目的隐式绝对定位 . 因此, 任何绝对定位的子元素 都相对于此包含块定位. 同样, overflow 特性决定 延伸到定位 矩形之外的内容是否会被隐藏.

width 或 height 任一值为零都会禁用元素及其嵌入内容的渲染.

width 或 height 的 'auto' 值用于根据被引用资源的固有 尺寸或固有宽高 比自动调整相应元素的尺寸. 自动调整尺寸值的计算遵循 CSS 布局中为替换元素定义的默认尺寸算法 [css-images-3]. 特别是, 当被引用资源没有固有尺寸时 (例如没有定义尺寸的图像类型), 假定其宽度为 300px, 高度为 150px.

CSS 定位特性 (例如 top 和 margin)在 SVG 坐标系统中定位嵌入内容元素时不起作用. 但是, 它们可以用于定位 ‘foreignObject’ 或 HTML 嵌入 元素的子元素.

12.3. ‘image’ 元素

‘image’
类别:
图形元素, 图形引用元素, 可渲染元素, 结构外部元素
内容模型:
以下任意数量的元素, 顺序不限:clipPath, mask, script, style
属性:
几何特性:
DOM 接口:

‘image’ 元素 表示要将完整文件的内容 渲染到当前用户 坐标系统中的给定矩形内. ‘image’ 元素可以引用 PNG 或 JPEG 等光栅 图像文件, 或 MIME 类型为 "image/svg+xml" 的文件. 符合要求的 SVG 查看器至少需要支持 PNG, JPEG 和 SVG 格式 文件. 如果当前文档支持动画, SVG 文件必须在安全动画模式 中处理, 如果当前文档是静态的, 则在安全静态模式中处理.

处理 ‘image’ 的结果始终是四通道 RGBA 结果. 当 ‘image’ 元素引用只有三个通道 (RGB)的图像 (例如许多 PNG 或 JPEG 文件)时, 其效果 就像对象被转换为四通道 RGBA 图像 , 并将 alpha 通道统一设置为 1. 对于单通道 (灰度) 光栅图像, 其效果就像对象被转换 为四通道 RGBA 图像, 其中被引用对象的单个通道 用于计算三个颜色通道 , 并将 alpha 通道统一设置为 1.

‘preserveAspectRatio’ 属性 确定如何缩放和定位被引用图像以适应 由 定位矩形以及 object-fit 和 object-position 特性确定的具体对象尺寸 . 应用此属性的结果定义一个用于实际图像渲染的图像渲染矩形 . 当被引用图像是 SVG 时, 图像渲染矩形定义 用于渲染该 SVG 的SVG 视口.

‘preserveAspectRatio’ 计算 在确定具体对象尺寸之后应用, 并且仅当该尺寸与嵌入图像的 固有宽高比不匹配时才有效 . 如果使用的 object-fit 值 可确保具体对象尺寸与固有宽高比匹配 (即, 除默认值 fill 之外的任何值), 则 ‘preserveAspectRatio’ 值将 不起作用; 图像渲染矩形将采用 使用 CSS 缩放和定位对象时确定的值. 因此可以安全地使用 ‘preserveAspectRatio’ 属性 作为 object-fit 和 object-position 大多数值的回退; 无论 object-fit 的值为何, 都必须将它显式设置为 none 才能关闭宽高比控制.

评估 ‘preserveAspectRatio’ 属性时 使用的宽高比 由被引用内容的固有宽高比 定义. 对于 SVG 文件, 宽高比定义 在SVG 内容的固有尺寸特性"中. 对于大多数光栅内容 (PNG, JPEG), 图像文件的像素宽度和高度 定义固有宽高比. 当嵌入图像没有固有宽高比 时 (例如既没有 ‘viewBox’ 属性, 也没有为 最外层 svg 元素指定显式尺寸的 SVG 文件), ‘preserveAspectRatio’ 属性 会被 忽略; 嵌入图像被绘制为填充由 ‘image’ 元素上的几何特性 定义的定位 矩形.

例如, 如果 image 元素引用 PNG 或 JPEG 且 preserveAspectRatio="xMinYMin meet", 则光栅图像的宽高比将 保持 (这意味着从图像 坐标到当前用户空间坐标的缩放因子对于 X 和 Y 都相同), 光栅图像会在确保整个光栅图像适合 视口的同时尽可能放大, 并且光栅图像的顶部/左侧将与 由 ‘image’ 元素上的属性 x, y, width 和 height 定义的视口顶部/左侧对齐. 如果 ‘preserveAspectRatio’ 的值为 'none' , 则图像的宽高比不会保持. 图像会适配, 使光栅图像的左上角 精确对齐坐标 (x, y), 而光栅图像的右下角 精确对齐坐标 (x+width, y+height).

对于嵌入 SVG 图像的 ‘image’ 元素 , 被引用 SVG 图像根 元素上的 ‘preserveAspectRatio’ 属性必须被忽略 , 并改为视为其值为 none. (有关 详细信息, 参见 ‘preserveAspectRatio’). 这确保引用 ‘image’ 上的 ‘preserveAspectRatio’ 属性 能够产生预期效果, 即使其值为 none.

当 ‘image’ 上的 ‘preserveAspectRatio’ 属性值 不是 none 时, 根据 ‘image’ 元素特性确定的图像渲染矩形 将与嵌入 SVG 的固有宽高比完全匹配. 因此忽略嵌入 SVG 中的 ‘preserveAspectRatio’ 属性 通常不会产生任何影响. 例外情况是该图像的宽高比 由 width 和 height 属性的绝对值确定 , 而这些值与其 ‘viewBox’ 宽高比不匹配. 这是一种不常见的情况, 出于多种原因建议作者避免.

用户代理样式表将 ‘image’ 元素上的 overflow 特性的值 设置为 hidden. 因此, 除非作者覆盖此值, 图像将被裁剪到 由几何特性定义的定位矩形 .

对于嵌入 SVG 图像的 ‘image’ 元素 , 会应用两个不同的 overflow 值. ‘image’ 元素上指定的值决定 是否将图像渲染矩形裁剪到 定位矩形. 被引用 SVG 的根元素上的值 决定是否将图形裁剪到图像渲染矩形.

SVG 2 中新增. 以前版本的 SVG 要求忽略嵌入 SVG 上的 overflow (以及 clip) 特性. 新规则确保溢出的 slice 布局 可以安全使用, 而不会破坏来自引用图像的溢出控制.

要链接到嵌入 SVG 图像的特定视图, 作者可以使用链接到 SVG 内容中定义的媒体片段. 要裁剪光栅图像的特定部分, 作者可以使用基本媒体片段标识符 [Media Fragments URI 1.0 (basic)]. 任一类型的片段都可能影响图像的固有尺寸和/或固有宽高比.

由 ‘image’ 元素引用的资源表示一个 单独的文档, 它生成自己的解析树和 文档对象模型 (如果资源是 XML). 因此, 特性不会继承到该图像中.

与 ‘use’ 不同, ‘image’ 元素不能 引用 SVG 文件中的元素.

SVG 2 要求: 支持自动调整尺寸的图像.
决议: 我们将在 SVG 2 中允许自动调整尺寸的图像.
目的: 允许光栅图像使用其自身尺寸, 而无需设置 width 和 height.
负责人: Cameron (ACTION-3340)
SVG 2 要求: 支持选择 ‘image’ 的一部分进行显示.
决议: 我们将为 ‘image’ 提供选择图像一部分进行显示的方法, 可能通过 允许其使用 ‘viewBox’.
目的: 允许选择图像的一部分, 而无需作者手动切割图像.
负责人: 无人
SVG 2 要求: 支持 css-images-3 中的 ‘object-fit’ 和 ‘object-position’ 特性.
决议: SVG 2 将依赖 CSS3 Image Values 和 CSS4 Image Values.
目的: 与 CSS 指定图像适配的方式保持一致, 该方式由 ‘preserveAspectRatio’ 提供.
负责人: Cameron 或 Erik (无 action)

属性定义:

名称 值 初始值 可动画
crossorigin [ anonymous | use-credentials ]? (参见 HTML 对该属性的定义) 是

crossorigin 属性是一个CORS 设置属性, 除非另有说明, 遵循与 HTML [HTML]中相同的处理规则.

名称 值 初始值 可动画
href URL [URL] (none) 是

一个用于标识要渲染图像的URL 引用 . 请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.

URL 会被处理并获取资源, 如链接一章中所述.

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>此图形链接到一个外部图像
  </desc>
  <image x="200" y="200" width="100px" height="100px"
         href="myimage.png">
    <title>我的图像</title>
  </image>
</svg>

由于图像引用始终引用完整文档, 仅含目标的 URL 被视为指向同一文件的链接, 该文件会再次作为独立的嵌入图像渲染. 由于嵌入图像在安全模式下处理, 它自身的嵌入引用不会被处理, 从而防止无限递归.

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 50 30" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>递归 SVG</title>
  <desc>一个包含两个对自身的递归图像引用的 SVG.
    一个引用使用文件名作为相对 URL, 
    另一个仅使用目标片段.
    在支持外部文件引用的处理模式中查看时,
    应渲染嵌入图像;
    但是, 嵌入图像必须在安全模式下处理,
    因此递归只发生一次.
    外观应为三个嵌套的红色圆, 呈靶心图案;
    最内层圆由于目标样式而具有实心填充.
  </desc>
  <style type="text/css">
    #target:target {
      fill: red;
    }
  </style>
  <circle id="target" 
          stroke="red" stroke-width="5" fill="none"
          cx="50%" cy="50%" r="12" />
  <image xlink:href="recursive-image.svg"
         x="25%" y="25%" width="50%" height="50%" />
  <image xlink:href="#target"
         x="45%" y="45%" width="10%" height="10%" />
</svg>
示例 recursive-image — 一个嵌入自身并创建靶心图案的 SVG

示例 recursive-image

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

12.4. ‘foreignObject’ 元素

‘foreignObject’
类别:
图形元素, 可渲染元素, 结构外部元素
内容模型:
任何元素或字符数据.
属性:
几何特性:
DOM 接口:

SVG 被设计为与其他 XML 语言兼容, 用于描述和渲染其他类型的内容. ‘foreignObject’ 元素允许包含非 SVG 命名空间中的元素, 这些元素使用其他用户代理处理过程在 SVG 图形的某一区域内渲染. 所包含的 外部图形内容受 SVG 变换, 滤镜, 裁剪, 遮罩和合成的影响. 示例包括 将 MathML 表达式插入 SVG 绘图 [MathML3], 或添加一块复杂的 CSS 格式化 HTML 文本或表单输入.

HTML 解析器将 ‘foreignObject’ 内的元素视为等同于 HTML 文档片段内的元素. 任何 svg 或 math 元素, 以及它们的后代, 将分别被解析为位于 SVG 或 MathML 命名空间中; 所有其他标签将被解析为位于 HTML 命名空间中.

‘foreignObject’ 内的 SVG 命名空间元素不会被渲染, 除非定义了正确的 SVG 片段, 包括一个根 ‘svg’ 元素作为 ‘foreignObject’ 的后代.

‘foreignObject’ 可以与 ‘switch’ 元素以及 ‘requiredExtensions’ 属性结合使用, 以 正确检查用户代理支持情况, 并在用户代理支持 不可用时提供替代 渲染.

本规范未定义应如何将 ‘requiredExtensions’ 值映射到对不同 XML 语言的支持; 未来的规范可能会定义.

不要求 SVG 用户代理支持 调用其他任意用户代理来处理嵌入 外部对象类型的能力; 但是, 所有符合要求的 SVG 用户代理 都需要支持 ‘switch’ 元素, 并且 当有效 SVG 元素作为 ‘switch’ 元素中的替代项之一出现时, 必须能够渲染它们.

预计商业 Web 浏览器将 支持 SVG 嵌入 CSS 格式化 HTML 以及 MathML 内容的能力, 并且渲染内容受 SVG 片段中定义的变换和合成影响. 目前, 此能力不是要求.

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/2000/svg'>
  <desc>此示例使用 'switch' 元素提供
        段落的回退图形表示, 如果
        XMHTML 不受支持.</desc>
  <!-- 'switch' 元素将处理第一个
       测试属性求值为 true 的子元素.-->
  <switch>
    <!-- 如果 requiredExtensions 属性
         求值为 true (即, 用户代理支持嵌入 SVG
         内的 XHTML), 则处理嵌入的 XHTML. -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
      <!-- XHTML 内容放在这里 -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>这里是一个需要自动换行的段落</p>
      </body>
    </foreignObject>
    <!-- 否则, 处理以下替代 SVG.
         请注意, 'text' 元素上没有测试属性.
         如果未提供测试属性, 就好像存在
         测试属性并且它们求值为 true.-->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">这里是一个需要</tspan>
      <tspan x="10" y="20">自动换行的段落.</tspan>
    </text>
  </switch>
</svg>

12.5. DOM 接口

12.5.1. SVGImageElement 接口

SVGImageElement 对象 表示 DOM 中的 ‘image’ 元素.

[Exposed=Window]
interface SVGImageElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
  attribute DOMString? crossOrigin;
};

SVGImageElement includes SVGURIReference;

x, y, width 和 height IDL 属性 分别反映 x, y, width 和 height 特性的计算值及其对应的 呈现属性.

preserveAspectRatio IDL 属性反映 ‘preserveAspectRatio’ 内容 属性.

crossOrigin IDL 属性 反映 ‘crossorigin’ 内容 属性.

12.5.2. SVGForeignObjectElement 接口

SVGForeignObjectElement 对象表示 DOM 中的 ‘foreignObject’ .

[Exposed=Window]
interface SVGForeignObjectElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
};

x, y, width 和 height IDL 属性 分别反映 x, y, width 和 height 特性的计算值及其对应的 呈现属性.


第 13 章: 绘制: 填充, 描边和标记符号

13.1. 介绍

13.1.1. 定义

填充
绘制形状内部或文本字符串中 字符字形内部的操作.
描边
绘制形状轮廓或 文本字符串中字符字形轮廓的操作.

定义形状的图形元素 – ‘path’ 元素, 基本形状, 和文本内容元素 – 通过 填充进行渲染, 即绘制对象内部, 以及描边, 即 沿对象轮廓绘制. 填充和描边都是 绘制操作. SVG 2 支持多种 不同的绘制, 可用于绘制图形元素的填充和描边:

用于填充和描边元素的绘制通过 fill 和 stroke 特性指定. 下一节描述 可用于这些特性的不同值.

其他特性, 例如 fill-opacity 和 stroke-width, 也会影响填充和描边绘制应用于 画布的方式. 下面的填充特性和描边特性 各节描述这些特性.

某些图形元素 – ‘path’ 元素和基本形状 – 还可以在其顶点或沿其描述的路径的其他位置绘制标记 符号 . 下面的标记一节描述 如何定义和使用标记.

SVG 2 为形状添加标记. 已在 Tokyo F2F 达成决议.

13.2. 指定绘制

SVG 2 要求: 添加用于引用当前填充绘制, 描边绘制等的新绘制值.
决议: 我们将在 SVG 2 中添加新的绘制值 currentFillPaint, currentStrokePaint 等
目的: 除其他用途外, 提供一种将标记颜色与描边颜色匹配的简便方法.
负责人: Chris (ACTION-3094)
SVG 2 新增内容: 允许 fill 和 stroke 中使用多个绘制.
决议: 我们将在 SVG 2 的 fill 和 stroke 特性中允许多个 绘制.
目的: 可用于创建交叉阴影, 在纯色填充上叠加部分透明图案等.
负责人: Tav (ACTION-3500)
延期: 此内容已从 SVG 2 中移除, 但稍后将与 CSS Fill and Stroke Level 3 同步添加

下面定义的 fill 和 stroke 特性用于 指定用于渲染形状和文本内部以及 其周围描边的绘制. 绘制规范描述一种将 颜色值放置到画布上的方式, 并由一个或多个绘制层组成. 这些绘制层中支持四种类型的绘制: 纯色, 渐变, 和 图案.

<paint> 值定义如下:

<paint> = none | <color> | <url> [none | <color>]? | context-fill | context-stroke

可能的值如下:

none
此层不应用绘制.
<url> [none | <color>]?
指向绘制服务器元素的 URL 引用, 该元素定义一个绘制服务器: ‘linearGradient’, ‘pattern’ 和 ‘radialGradient’, 后面可以 可选地跟随一个在绘制服务器引用无法解析时使用的回退 值.
<color>
纯色绘制.
context-fill
使用上下文元素的 fill 绘制值.
context-stroke
使用上下文元素的 stroke 绘制值.

<paint> 允许绘制服务器引用, 后面可以可选地 跟随 <color> 或关键字 none. 当给出此可选值时, <color> 值或 none 值是一个回退值, 当该层中的绘制 服务器引用无效时使用 (因为它指向不存在的元素或 不是有效的绘制服务器).

请注意, 这与 CSS 背景语法略有不同, 在 CSS 背景语法中, background 值最后一层中指定的背景图像和颜色会同时被渲染.

如果 <paint> 中的绘制服务器引用无效, 且没有 给出回退值, 则该层不渲染任何绘制.

这与 SVG 1.1 的行为不同, 在 SVG 1.1 中, 如果绘制服务器引用无效且未指定回退 颜色, 文档将处于错误状态.

<rect width="100" height="100" fill="url(#MyHatch) powderblue">
  
具有回退纯色填充的示例.

左侧矩形显示定义 MyHatch 时的预期填充. 右侧矩形显示缺少 MyHatch 时的预期填充.

对于任何 <color> 值, 必须支持 CSS Color Module Level 3 中定义的所有颜色语法, 包括 rgb(), rgba(), hsl(), hsla(), 扩展颜色关键字和 currentColor 值.

context-fill 和 context-stroke 值分别引用被绘制元素的上下文元素的 fill 或 stroke 特性生成的绘制层. 元素的上下文元素定义如下:

如果没有上下文元素而使用这些关键字, 则不应用任何绘制 .

当上下文绘制层包含绘制服务器引用时, 用于缩放绘制服务器元素和内容的坐标空间和边界框 是上下文元素的坐标空间和边界框. 换句话说, 使用这些关键字引用的任何渐变和图案 应从主形状连续到标记, 或从use 元素影子树中的一个元素连续到 另一个元素.

如果引用的 fill 或 stroke 值是 context-fill 和 context-stroke 值, 则这些上下文引用是递归的.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path {
      fill: none;
      stroke-width: 4px;
      marker: url(#diamond);
    }
  </style>
  <path d="M 10,50 v -20 h 40 v -20" stroke="red"/>
  <path d="M 30,70 v -20 h 40 v -20" stroke="green"/>
  <path d="M 50,90 v -20 h 40 v -20" stroke="blue"/>
  <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
          markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3"
            fill="white" stroke="context-stroke" stroke-width="2"/>
  </marker>
</svg>
在标记中使用 context-stroke 关键字的示例

标记使用一个形状定义, 其 stroke 设置为 context-stroke. 这会使标记采用每个使用该标记的 ‘path’ 元素的颜色.

13.3. ‘color’ 特性的效果

有关 color 的定义, 请参阅 CSS Color Module Level 3 规范. [css-color-3]

color 特性用于为 fill, stroke, stop-color, flood-color 和 lighting-color 特性提供一个潜在的间接值 currentColor. 该特性对 SVG 元素没有其他影响 .

以下示例展示如何使用从 HTML 文档继承的 color 特性值 设置内联 SVG 片段中 SVG 文本的颜色.

<!DOCTYPE html>
<style>
body { color: #468; font: 16px sans-serif }
svg { border: 1px solid #888; background-color: #eee }
</style>
<p>请参阅下方图示:</p>
<svg width="200" height="100">
  <g fill="currentColor">
    <text x="70" y="55" text-anchor="end">开始</text>
    <text x="130" y="55">停止</text>
    <path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
  </g>
</svg>

请参阅下方图示:

开始 停止

SVG 片段中的文本和箭头使用与继承的 color 特性相同的颜色填充.

13.4. 填充特性

13.4.1. 指定填充绘制: ‘fill’ 特性

名称: fill
值: <paint>
初始值: black
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同, 但会计算 <color> 值并将 <url> 值转换为绝对值
动画类型: 按计算值

fill 特性绘制给定图形 元素的内部. 要绘制的区域包括形状轮廓 内的所有区域. 为了确定形状的内部, 会考虑所有子路径, 并根据 fill-rule 特性的当前值相关规则确定内部. 形状的零宽度几何轮廓包含在要 绘制的区域内.

填充操作通过执行填充操作来填充开放子路径, 就像向路径中添加额外的 "closepath" 命令 以连接子路径的最后一点与第一点一样. 因此, 填充操作同时适用于 ‘path’ 元素中的开放子路径 (即, 没有 closepath 命令的子路径)以及 ‘polyline’ 元素.

13.4.2. 环绕规则: ‘fill-rule’ 特性

名称: fill-rule
值: nonzero | evenodd
初始值: nonzero
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

fill-rule 特性指示用于确定画布哪些部分包含在形状 内部的算法 (或 环绕规则). 对于简单且不自相交的路径, 哪个区域位于 "内部"从直觉上很清楚; 但是对于更复杂的路径, 例如 自相交的路径, 或一个子路径包围另一个子路径的路径, "内部"的解释就不那么明显.

fill-rule 特性提供两种 确定形状内部的方式:

nonzero

此规则通过从画布上的点向任意 方向的无穷远绘制一条射线, 然后检查形状的线段与射线 相交的位置, 来确定该点是否位于"内部" . 从计数零开始, 每当路径段从左 向右穿过射线时加一, 每当路径段从右向左穿过 射线时减一. 计数完成后, 如果结果为零, 则该点位于路径外部 . 否则, 它位于内部. 下图 说明 nonzero 规则:

显示 nonzero 填充规则的图像

nonzero 填充规则对具有自相交和 包围子路径的路径的效果.

evenodd

此规则通过从画布上的点向任意 方向的无穷远绘制一条射线, 并计算该射线穿过给定形状的 路径段数量, 来确定该点是否位于"内部" . 如果该数量为奇数, 则该点位于内部; 如果为偶数, 则该点位于外部. 下图 说明 evenodd 规则:

显示 evenodd 填充规则的图像

evenodd 填充规则对具有自相交和 包围子路径的路径的效果.

上述描述没有规定当路径 段与射线重合或与射线相切时应如何处理. 由于可以使用任何射线, 可以简单地选择一条不存在这种有问题 交点的不同射线.

13.4.3. 填充绘制不透明度: ‘fill-opacity’ 特性

名称: fill-opacity
值: <'opacity'>
初始值: 1
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 指定值转换为数字, 并限制在 [0,1] 范围内
动画类型: 按计算值

fill-opacity 指定用于绘制当前对象填充的 绘制操作的不透明度. (参见 绘制形状和文本).

<number>
填充的不透明度. 超出 0 (完全透明)到 1 (完全不透明)范围的任何值都必须 限制在该范围内.
<percentage>
以 0 到 1 范围百分比表示的填充不透明度 .

另请参阅 opacity 特性, 该特性 指定组不透明度.

13.5. 描边特性

SVG 2 要求: 支持非缩放描边.
决议: SVG 2 将包含非缩放 描边.
SVG 2 将具有 ‘vector-effect’ 特性.
目的: 支持在页面缩放时宽度不会变化的描边, 例如地图中常见的描边.
负责人: Chris 或 Erik (无 action)
说明: 请注意, 这可以成为更通用的非缩放功能的一部分.

在本节中, 我们定义若干特性, 允许 作者控制描边的不同方面, 包括其绘制, 粗细, 虚线的使用以及 路径段的连接和端帽.

在所有情况下, 所有受 方向性影响的描边特性, 例如与虚线图案有关的特性, 都必须 以使描边操作从与 图形元素开始相同的点开始的方式渲染. 特别是, 对于 ‘path’ 元素, 路径的起点是初始 "moveto" 命令的第一个点.

对于虚线图案等描边特性, 其计算 依赖于沿图形元素轮廓的进度, 距离计算必须使用 SVG 用户代理的 标准沿路径距离 算法.

当使用复杂绘制服务器 (例如 渐变或图案)执行描边时, 描边操作必须与 以下情况产生的结果相同: 将由当前图形元素的 几何形状及其相关描边特性定义的几何形状 转换为等效的 ‘path’ 元素, 然后 使用给定绘制服务器进行填充.

13.5.1. 指定描边绘制: ‘stroke’ 特性

名称: stroke
值: <paint>
初始值: none
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同, 但会计算 <color> 值并将 <url> 值转换为绝对值
动画类型: 按计算值

stroke 特性沿给定 图形元素的轮廓进行绘制.

请注意, 当对 ‘path’ 元素进行描边时, 任何仅包含一个 moveto 而没有后续绘线命令的子路径都不会被描边. 任何其他类型的零长度子路径, 例如 'M 10,10 L 10,10' 或 'M 30,30 Z', 如果 stroke-linecap 特性的值为 butt, 也不会被描边. 有关计算路径描边的详细信息, 请参阅下面 描边形状的定义.

SVG 2 要求: 包含指定描边位置的方法.
决议: SVG 2 应包含 指定描边位置的方法.
目的: 允许描边位于路径内部或外部.
负责人: Cameron (ACTION-3162)
说明: 参见提案 页面.

13.5.2. 描边绘制不透明度: ‘stroke-opacity’ 特性

名称: stroke-opacity
值: <'opacity'>
初始值: 1
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 指定值转换为数字, 并限制在 [0,1] 范围内
动画类型: 按计算值

stroke-opacity 特性指定 用于描边当前对象的绘制操作的不透明度. (参见 绘制形状和文本.) 与 fill-opacity 相同.

<number>
描边的不透明度. 超出 0 (完全透明)到 1 (完全不透明)范围的任何值都必须 限制在该范围内.
<percentage>
以 0 到 1 范围百分比表示的描边不透明度 .

另请参阅 opacity 特性, 该特性指定 组不透明度.

13.5.3. 描边宽度: ‘stroke-width’ 特性

名称: stroke-width
值: <length-percentage> | <number>
初始值: 1px
适用于: 形状和文本 内容元素
继承: 是
百分比: 相对于当前 SVG 视口的归一化对角线 (参见单位)
媒体: 视觉
计算值: 绝对长度或百分比, 数字首先转换为绝对长度
动画类型: 按计算值

此特性指定当前对象上描边的宽度. 值为零时不绘制描边. 负值 无效. <number> 值表示以用户单位为单位的值.

13.5.4. 在描边末端绘制端帽: ‘stroke-linecap’ 特性

名称: stroke-linecap
值: butt | round | square
初始值: butt
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

stroke-linecap 指定 描边开放子路径时用于其末端的形状, 以及无论开放还是闭合的零长度 子路径要绘制的形状. 可能的值如下:

butt
此值表示每个子路径的描边不会 延伸到其两个端点之外. 因此零长度子路径 不会有任何描边.
round

此值表示在每个子路径的每个末端, 表示描边的形状将延伸一个直径等于 描边宽度一半圆. 如果子路径, 无论开放还是 闭合, 长度为零, 则结果是该子路径的描边完全 由以子路径点为中心的完整圆组成.

square

此值表示在每个子路径末端, 表示描边的形状将延伸一个矩形, 其宽度与描边宽度相同, 长度为描边宽度的一半. 如果子路径, 无论开放还是闭合, 长度为零, 则结果是该子路径的描边完全由一个 边长等于描边宽度的正方形组成, 该正方形以子路径点为中心, 并定向为其两条边与该子路径点处的有效切线 平行. 有关如何确定零长度子路径处切线的详细信息, 请参阅 ‘path’ 元素实现说明.

显示三个路径且每个路径具有不同线帽的图像.

三种线帽类型.

有关线帽形状更精确的描述, 请参阅下面 端帽形状的定义.

13.5.5. 控制线段连接: ‘stroke-linejoin’ 和 ‘stroke-miterlimit’ 特性

名称: stroke-linejoin
值: miter | round | bevel
初始值: miter
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

stroke-linejoin 指定 描边路径或基本形状时在其 拐角处使用的形状. 有关更多详细信息, 请参阅 路径实现说明.

miter
此值表示使用尖角连接路径段. 该拐角通过沿路径段切线延伸描边外边缘 直到它们相交来形成. 如果超过 stroke-miterlimit, 线连接会回退为 bevel (见下文).
round
此值表示使用圆角连接路径段. 拐角是以连接点为中心的圆扇形.
bevel
此值表示使用斜角连接路径段. 斜角形状是填充两个描边段之间区域的三角形.
显示三个路径且每个路径具有不同线连接的图像.

三种线连接类型.

名称: stroke-miterlimit
值: <number>
初始值: 4
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 按计算值

当两个线段以锐角相交并且为 stroke-linejoin 指定 miter 值时, 连接可能会延伸 到远超路径描边线条粗细的位置. stroke-miterlimit 对 线连接的延伸范围施加限制.

<number>
miter 线连接延伸范围的限制, 以 stroke-width 值的倍数表示. stroke-miterlimit 的负值无效, 并且必须被忽略.

以前版本的 SVG 规范 还声明 0 到 1 之间的值是错误的, 但用户代理的 CSS 解析器并未很好地实现这一点. 实际上, 任何斜接连接都会超过 0 到 1 之间的斜接限制.

对于 miter 值, 给定 用户坐标系统中线段之间的角度 θ, 斜接长度计算如下:

miter length = ‘stroke-width’ sin ⁡ θ 2
miter length = stroke-width / sin(theta / 2)

从历史上看, 斜接长度定义为从相交路径段的 内侧描边边缘到斜接尖端的距离. 实际上, 只有直线路径段遵循此定义. 上述基于角度的斜接长度定义 仅取决于连接处路径段的切线, 因此无论路径段曲率如何都能提供一致的结果.

显示描边斜接长度定义
	      以及不同形状路径段之间裁剪一致性的图像.

左: 斜接长度的历史定义. 右: 两条不同路径, 在路径段连接点处具有相同的 路径切线. 斜接连接的行为 (回退为斜角或裁剪位置)对两条路径都相同. 它不依赖内侧描边边缘相交的位置.

如果斜接长度除以描边宽度超过 stroke-miterlimit, 那么对于值:

miter
连接转换为斜角;
显示超过描边斜接限制时所得描边的图像.

超过 stroke-miterlimit 时对线连接的影响. 橄榄绿色虚线显示当 stroke-miterlimit 值为 3 时 斜接限制的位置. 灰色区域显示没有斜接 限制时连接的外观.

有关线连接形状更精确的描述, 请参阅下面 线连接形状的定义.

13.5.6. 虚线描边: ‘stroke-dasharray’ 和 ‘stroke-dashoffset’ 特性

名称: stroke-dasharray
值: none | <dasharray>
初始值: none
适用于: 形状和文本 内容元素
继承: 是
百分比: 相对于当前 SVG 视口的归一化对角线 (参见单位)
媒体: 视觉
计算值: 以逗号分隔的绝对长度或百分比列表, 数字首先转换为绝对 长度, 或指定的关键字
动画类型: 参见正文

其中:

<dasharray> = [ [ <length-percentage> | <number> ]+ ]#

stroke-dasharray 特性控制 用于形成路径描边形状的虚线和间隙图案 .

none
表示不使用虚线.
<dasharray>

指定要使用的虚线图案. <dasharray> 是 由逗号和/或空白分隔的 <number> 或 <length-percentage> 值列表. <number> 值表示 以用户单位为单位的值. 每个值指定沿路径的一段长度, 在该长度上绘制描边 (一个虚线段)或不绘制描边 (一个间隙). 第一个值以及其后列表中的每隔一个值指定 虚线段的长度, 其他每个值指定虚线段 之间间隙的长度. 如果列表具有奇数个值, 则 重复该列表以得到偶数个值. (因此, stroke-dasharray: 5,3,2 的渲染行为 等效于 stroke-dasharray: 5,3,2,5,3,2.)

得到的偶数长度虚线图案沿每个子路径重复. 虚线图案在每个子路径起点重置并重新开始.

如果列表中的任何值为负, 则 <dasharray> 值 无效. 如果列表中的所有值都为零, 则描边渲染为没有任何虚线的实线.

显示粗虚线描边的图像.

虚线描边. 虚线图案为 20,10. 红线显示实际被描边的路径.

‘pathLength’ 属性在 ‘path’ 元素上会影响 stroke-dasharray: 每个虚线段和间隙 长度都相对于作者通过 ‘pathLength’ 指定的路径长度进行解释.

stroke-dasharray 值不可累加. 对于插值, stroke-dasharray 值按以下方式组合 :

如果 start 或 end 任一计算为 none 或 无效
start 或 end 使用离散动画类型组合.
否则
重复 start 和 end 值列表中的两个虚线图案, 直到 两个值列表中的元素 数量匹配. 然后按计算值组合每一项.
以下示例中的两个 stroke-dasharray 值列表 具有不同数量 的元素:
path {
  stroke-dasharray: 20 40 10;
}

path:hover {
  transition-property: stroke-dasharray;
  transition-duration: 0.5s;
  stroke-dasharray: 40 20;
}
为了在两个值列表之间插值, 首先在两个列表中重复虚线图案:
stroke-dasharray: 20 40 10 20 40 10;
stroke-dasharray: 40 20 40 20 40 20;
之后, 每一项再按计算值组合.
名称: stroke-dashoffset
值: <length-percentage> | <number>
初始值: 0
适用于: 形状和文本 内容元素
继承: 是
百分比: 相对于当前 SVG 视口的归一化对角线 (参见单位)
媒体: 视觉
计算值: 绝对长度或百分比, 数字首先转换为绝对长度
动画类型: 按计算值

stroke-dashoffset 特性 指定在路径起点开始描边虚线时进入重复 虚线图案的距离. 如果 值为负, 则效果与虚线偏移 d 相同:

d = s - ‘stroke-dashoffset’ mod s
d = s - (abs(stroke-dashoffset) mod s)

其中 s 是虚线数组值之和.

显示具有非零虚线偏移的粗虚线描边图像.

具有非零虚线偏移的虚线描边. 虚线 图案为 20,10, 虚线偏移为 15. 红线显示实际被 描边的路径.

与 stroke-dasharray 类似, stroke-dashoffset 相对于作者通过 ‘pathLength’ 属性在 ‘path’ 元素上指定的路径长度进行解释.

下面的示例显示如何使用与实际路径长度相差很大的 ‘pathLength’ 更容易地控制描边 虚线.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="150">
  <defs>
    <path id="p" d="M -50,0 A 50,50 0 0 0 50,0 A 50,50 0 0 0 -50,0 z"
          pathLength="80"/>
    <g id="chip" stroke-width="10">
      <circle cy="5" r="55" fill="#000" fill-opacity="0.15" stroke="none"/>
      <use xlink:href="#p"/>
      <use xlink:href="#p" fill="none" stroke="#eee" stroke-width="10"
           stroke-dasharray="10 10" stroke-dashoffset="5"/>
      <g fill="none" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round">
        <use xlink:href="#p" stroke="#eee" stroke-dashoffset="10"/>
        <use xlink:href="#p" stroke-dashoffset="0"/>
      </g>
      <circle r="40" fill="#000" fill-opacity="0.15"
              stroke-width="2" stroke="white"/>
    </g>
  </defs>
  <rect width="100%" height="100%" fill="#063"/>
  <use xlink:href="#chip" x="140" y="75" fill="#00c" stroke="#00c"/>
  <use xlink:href="#chip" x="160" y="85" fill="#000" stroke="#000"/>
  <use xlink:href="#chip" x="170" y="65" fill="#c00" stroke="#c00"/>
</svg>
三个赌场筹码的图像, 每个筹码都有使用描边虚线
              生成的图案边框.

每个筹码周围的四个宽白色虚线段和八个小圆形 虚线段都相对于作者指定的 ‘pathLength’ 值 '80' 放置, 这使所需的 stroke-dasharray 和 stroke-dashoffset 值易于计算.

有关沿路径放置虚线位置的更精确描述, 请参阅下面 虚线位置的定义.

13.5.7. 计算描边的形状

SVG 2 要求: 更精确地指定描边虚线.
决议: SVG 2 应更精确地指定描边虚线 .
目的: 定义基本形状和路径段上的虚线起点.
负责人: Cameron (无 action)

元素的描边形状是 由 stroke 特性填充的 形状. 由于 ‘text’ 元素可以分成多个块渲染, 因此每个块都有自己的 描边形状. 以下算法描述 ‘path’, 基本形状或单个 ‘text’ 块的理想 描边形状, 同时考虑上述描边特性. 所描述的理想描边形状 定义最佳情况的实现, 但为了性能原因, 实现可以在一定程度上 偏离此描述.

作者应注意, 描边形状在某些情况下, 例如 极其紧密的曲线处, 可能因平台而异.
显示描边形状如何因平台而异的图像. 一个
            示例如本规范算法所述, 另一个
            不同且整体看起来不太正确. 其不同之处在于
            用于描述描边左右两侧的几何形状
            因曲线末端靠近高曲率
            区域而发生扭曲.

描边绘制形状在不同平台上可能不同的示例.

上述示例显示以下 两条 SVG 路径可能的渲染结果:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="4" fill="none" stroke="skyblue"/>
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="0.075" fill="none" stroke="black"/>
</svg>
理想描边形状按以下方式确定:
  1. 令 shape 为空形状.
  2. 如果 stroke-width > 0, 则:
    1. 令 scale 为虚线图案的缩放因子. 如果正在 计算 ‘text’ 块的描边形状, 或者元素上不存在 ‘pathLength’ 属性, 则 scale 为 1. 否则, 按以下方式确定:
      1. 令 length 为用户代理计算的 ‘path’ 或等效路径的长度, 对于基本形状.
      2. 令 authorlength 为形状上的 ‘pathLength’ 属性值.
      3. scale 为 authorlength / length.
    2. 令 path 为元素的等效路径 (或 ‘text’ 元素的单个 块).
    3. 对于 path 的每个子路径:
      1. 令 positions 为该子路径的虚线 位置.
      2. 对于 positions 中的每一对 <start, end>:
        1. 按 scale 缩放 start 和 end.
        2. 令 dash 为这样一个形状: 对于沿子路径位于 start 和 end 之间的所有距离, 包含位于该距离处与子路径垂直的直线上 且与该位置处子路径上的点距离不超过 stroke-width 的 所有点.
        3. 将 dash 设置为 dash 与 子路径在位置 start 处的起始端帽形状 的并集.
        4. 将 dash 设置为 dash 与 子路径在位置 end 处的结束端帽形状 的并集.
        5. 令 index 和 last 为 子路径上沿子路径距离 start 和 end 处路径段的索引.

          选择 index 和 last 时是否包含任何零长度线段 并不重要.

        6. 当 index < last 时:
          1. 将 dash 设置为 dash 与 子路径在段索引 index 处的线连接形状 的并集.
          2. 将 index 设置为 index + 1.
        7. 将 shape 设置为 shape 与 stroke 的并集.
  3. 返回 shape.

给定 ‘path’ 或基本形状的等效路径的 给定子路径的虚线位置 是一系列值对, 表示形成子路径描边的每个虚线段 沿子路径的起始和结束距离. 它 按以下方式确定:

  1. 令 pathlength 为子路径的长度.
  2. 令 dashes 为元素上 stroke-dasharray 值的列表, 转换为用户单位, 必要时重复以使其具有 偶数个元素; 如果特性的值为 none, 则列表具有单个值 0.
  3. 令 count 为 dashes 中值的数量.
  4. 令 sum 为 dashes 中所有值之和.
  5. 如果 sum = 0, 则返回仅包含一对 <0, pathlength> 的序列.
  6. 令 positions 为空序列.
  7. 令 offset 为元素上的 stroke-dashoffset 特性值.
  8. 如果 offset 为负, 则将 offset 设置为 sum − abs(offset).
  9. 将 offset 设置为 offset mod sum.
  10. 令 index 为满足 sum(dashesi, 0 ≤ i ≤ index) ≥ offset 的最小整数.
  11. 令 dashlength 为 min(sum(dashesi, 0 ≤ i ≤ index) − offset, pathlength).
  12. 如果 index mod 2 = 0, 则向 positions 追加 值对 <0, dashlength>.
  13. 令 position 为 dashlength.
  14. 当 position < pathlength 时:
    1. 将 index 设置为 (index + 1) mod count.
    2. 令 dashlength 为 min(dashesindex, pathlength − position).
    3. 如果 index mod 2 = 0, 则向 positions 追加 值对 <position, position + dashlength>.
    4. 将 position 设置为 position + dashlength.
  15. 返回 positions.

子路径沿给定 position 处的起始和结束端帽 形状按以下方式确定:

  1. 如果 stroke-linecap 为 butt, 则返回空形状.
  2. 否则, 如果 stroke-linecap 为 round, 则:
    1. 如果这是起始端帽, 则返回一个直径为 stroke-width 的半圆, 其定位满足:
      • 该半圆所对应的子路径是 从距离 position 处开始的子路径.
      • 其直边与沿子路径距离 position 处垂直于子路径的直线平行.
      • 其直边中点位于沿子路径 距离 position 处的点.
      • 从其圆弧中点到其直边中点的方向 与子路径在距离 position 处的方向相同.
    2. 否则, 这是结束端帽. 返回一个直径为 stroke-width 的半圆, 其定位满足:
      • 该半圆所对应的子路径是 在距离 position 处结束的子路径.
      • 其直边与沿子路径距离 position 处垂直于子路径的直线平行.
      • 其直边中点位于沿子路径 距离 position 处的点.
      • 从其直边中点到其圆弧中点的方向 与子路径的 方向相同.
  3. 否则, stroke-linecap 为 square:
    1. 如果这是起始端帽, 则返回一个边长分别为 stroke-width 和 stroke-width / 2 的矩形, 其定位满足:
      • 其较长边 A 和 B 与沿子路径距离 position 处垂直于子路径的直线平行.
      • A 的中点位于 start.
      • 从 B 中点到 A 中点的方向 与沿子路径距离 position 处子路径的方向相同.
    2. 否则, 这是结束端帽. 返回一个边长分别为 stroke-width 和 stroke-width / 2 的矩形, 其定位满足:
      • 其较长边 A 和 B 与沿子路径距离 position 处垂直于子路径的直线平行.
      • A 的中点位于 end.
      • 从 A 中点到 B 中点的方向 与沿子路径距离 position 处子路径的方向相同.
显示如何构造三种线帽的图像

三种不同的 stroke-linecap 值应用于 具有单个非零长度子路径的路径. 白线是路径 本身, 粗灰色区域是描边. 顶行中, 绿色线 表示路径端点切线的垂线, 粉色 区域是端帽. 底行显示没有垂线 和端帽高亮的描边.

给定子路径线段的线连接形状 按以下方式确定:

  1. 令 P 为线段末端的点.
  2. 如果线段末端的单位切向量与 后续线段起点的单位切向量相等, 则返回空形状.

    这意味着例如 'M 100,100 h 100 h 100' 不会在两个直线段之间产生线连接形状, 但 'M 100,100 h 100 h -100' 会.

  3. 令 A 为平行于线段末端切线的直线.
  4. 令 B 为平行于后续线段起点切线的直线.
  5. 令 Aleft 和 Aright 为 与 A 平行且分别位于相对于子路径方向 A 左侧和右侧距离 stroke-width / 2 的直线.
  6. 令 Bleft 和 Bright 为 与 B 平行且分别位于相对于子路径方向 B 左侧和右侧距离 stroke-width / 2 的直线.
  7. 令 P1, P2 和 P3 为按以下方式确定的点:
    1. 如果考虑子路径方向, A 和 B 之间较小的角位于 这些直线的右侧, 则 P1 和 P2 分别为 Aleft 和 Bleft 上最接近 P 的点, 而 P3 是 Aleft 与 Bleft 的交点.
    2. 否则, P1 和 P2 分别为 Aright 和 Bright 上 最接近 P 的点, 而 P3 是 Aright 与 Bright 的交点.
  8. 令 bevel 为由三个点 P, P1 和 P2 形成的三角形.
  9. 如果 stroke-linejoin 为 round, 则 返回 bevel 与一个直径为 stroke-width, 以 P 为中心, 并以 P1 和 P2 作为圆弧两个端点的圆扇形 的并集.
  10. 如果 stroke-linejoin 为 miter, 则线连接 区域是 bevel 与由 P1, P2 和 P3 三个点形成的三角形的并集.
  11. 令 θ 为 A 与 B 之间的角. 如果 1 / sin(θ / 2) ≤ stroke-miterlimit, 则返回 线连接区域.
  12. 返回 bevel.
显示用于构造圆角线连接的直线和点的图像.

圆角线连接形状的构造, 以粉色显示. 白线是原始路径, 它具有两个汇聚到一点的线段, 灰色区域是描边.

13.6. 矢量效果

本章说明与绘制相关的 vector-effect. 有关 vector-effect 的其他方面, 请参阅此处.

non-scaling-stroke
修改对象描边的方式. 通常描边涉及在当前用户坐标系统中计算形状路径的描边 轮廓, 并使用描边 绘制 (颜色或渐变)填充该轮廓. 使用 non-scaling-stroke 矢量效果时, 描边轮廓 应在 "host" 坐标空间中计算, 而不是在用户坐标系统中. 更精确地说: 最远祖先 SVG 视口的视口坐标系统. 描边轮廓按 以下方式计算: 首先, 将形状的路径变换到宿主坐标空间. 在宿主坐标空间中计算描边轮廓. 得到的轮廓再 变换回用户 坐标系统. (描边轮廓始终使用当前用户坐标系统中的描边绘制填充). 此 修改产生的视觉效果是, 描边宽度不依赖元素的变换 (包括非均匀缩放和剪切变换)以及缩放级别.

13.7. 标记

SVG 2 要求: 改进标记.
决议: 我们将为 SVG 2 改进标记.
目的: 解决作者使用 SVG 标记时常见的问题.
负责人: Cameron (ACTION-3286)

标记是在任何形状元素沿线的特定位置 绘制的图形对象.

marker-start 和 marker-end 特性 可用于在形状的第一个和最后一个顶点放置标记, 而 marker-mid 特性可用于 在所有其他顶点 (第一和最后一个除外)放置标记. 例如, marker-start 和 marker-end 可用于 向路径添加箭头. 使用这些特性放置的标记称为 顶点标记.

在 SVG 2 中, 顶点标记是唯一可用的标记类型 . 其他规范将添加新的标记类型.

标记的图形由 ‘marker’ 元素定义. marker-start, marker-end 和 marker-mid 特性, 合称为标记 特性, 引用 ‘marker’ 元素.

标记可以动画化, 并且与 ‘use’ 元素一样, 动画 效果会显示在文档中标记的所有当前使用位置上.

给定元素上的标记按以下顺序从 底部到顶部绘制:

13.7.1. ‘marker’ 元素

‘marker’
类别:
容器元素, 永不渲染元素
内容模型:
以下任意数量的元素, 顺序不限:a, clipPath, filter, foreignObject, image, marker, mask, script, style, switch, text, view
属性:
DOM 接口:

‘marker’ 元素 定义用于在形状上绘制标记的 图形.

属性定义:

名称 值 初始值 可动画
markerUnits strokeWidth | userSpaceOnUse strokeWidth 是

‘markerUnits’ 属性 定义 ‘markerWidth’, ‘markerHeight’ 属性以及 ‘marker’ 内容所使用的坐标系统. 各值具有 以下含义:

strokeWidth
‘markerWidth’, ‘markerHeight’ 以及 ‘marker’ 的内容 使用这样一个坐标系统中的值, 其中单个单位等于引用标记的元素 已绘制描边宽度以用户单位表示的大小.
userSpaceOnUse
‘markerWidth’, ‘markerHeight’ 以及 ‘marker’ 的内容 使用引用标记的元素当前生效的 用户坐标系统中的值.

当 ‘markerUnits’ 的值为 strokeWidth 时, 标记的大小相对于应用了任何会影响描边在 描边的用户坐标 系统中宽度的变换之后的 stroke-width. 例如, 这意味着 值为 non-scaling-stroke 的 vector-effect 属性会使标记 也不缩放.

名称 值 初始值 可动画
markerWidth, markerHeight <length-percentage> | <number> 3 是

‘markerWidth’ 和 ‘markerHeight’ 属性 表示 SVG 视口的大小, 标记将根据 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性适配到该视口中. 任一属性值为零 都会导致标记不渲染任何内容. 任一属性的负值 都是错误 (参见 错误处理).

名称 值 初始值 可动画
refX <length-percentage> | <number> | left | center | right 0 是
refY <length-percentage> | <number> | top | center | bottom 0 是

SVG 2 中新增: 几何关键字 (与 ‘symbol’ 中的用法一致).

我们将为 marker/symbol 上的 refX/refY 添加 top/center/bottom, left/center/right 关键字. 已在 London F2F 达成决议. 值受到 'background-position' 的启发.

‘refX’ 和 ‘refY’ 属性 定义标记的参考 点, 该点将精确放置在形状上的标记 位置. 长度和数字必须 解释为应用 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性后标记内容坐标系统中的值. 百分比 值必须解释为 ‘viewBox’ 宽度的百分比 (对于 ‘refX’)或 ‘viewBox’ 高度的百分比 (对于 ‘refY’).

关键字值必须计算为以下百分比:

refX 和 refY 关键字到百分比的映射.
关键字 等效百分比
left 0%
center 50%
right 100%
top 0%
bottom 100%
名称 值 初始值 可动画
orient auto | auto-start-reverse | <angle> | <number> 0 是 (非累加)

‘orient’ 属性指示标记放置在形状上的位置时 如何旋转. 各值具有以下含义:

'auto'

标记的方向设置为其正 x 轴 指向相对于标记放置位置处 路径的方向 (参见 渲染标记).

'auto-start-reverse'

如果由 marker-start 放置, 则标记方向 与指定 'auto' 时使用的方向相差 180°. 对于 所有其他标记, 'auto-start-reverse' 与 'auto' 含义相同.

这允许定义单个箭头标记, 既可用于路径起点也可用于终点, 即从两端 向外指向.

<angle>
<number>

标记方向设置为使指定角度 为形状正 x 轴与标记正 x 轴之间测得的角度. <number> 值 指定以度为单位的角度.

例如, 如果给定值 '45', 则标记的正 x 轴将在形状坐标系统中 指向右下方.

13.7.2. 顶点标记: ‘marker-start’, ‘marker-mid’ 和 ‘marker-end’ 特性

名称: marker-start, marker-mid, marker-end
值: none | <marker-ref>
初始值: none
适用于: 形状
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同, 但会将<url> 值 (作为 <marker-ref> 的一部分)转换为绝对值
动画类型: 离散

其中:

<marker-ref> = <url>

marker-start 和 marker-end 特性分别用于 指定将在给定形状的第一个和最后一个顶点 绘制的标记. marker-mid 用于指定将在所有其他顶点 (即除第一个和最后一个以外的每个顶点)绘制的标记. marker-start, marker-mid 和 marker-end 的可能值如下:

none
表示不会在给定 顶点处绘制标记符号.
<marker-ref>
表示由 <marker-ref> 值引用的 ‘marker’ 元素将在给定 顶点处 绘制. 如果引用无效, 则不会在给定 顶点处绘制标记.

对于所有形状, 计算标记位置时必须使用的路径 是等效路径.

对于除 ‘polyline’ 和 ‘path’ 之外的所有形状元素, 最后一个顶点与第一个 顶点相同. 在这种情况下, 如果 marker-start 和 marker-end 的值 都不是 none, 则将在该最终顶点 渲染两个标记. 对于 ‘path’ 元素, 对于每个闭合子路径, 最后一个顶点 与第一个顶点相同. marker-start 必须仅渲染在 路径数据的第一个顶点. marker-end 必须仅 渲染在路径数据的最后一个顶点. marker-mid 必须渲染在 除路径数据第一个 顶点和路径数据最后一个顶点之外的每个顶点上.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
  <defs>
    <marker id="m1" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="8" markerHeight="8">
      <circle cx="5" cy="5" r="5" fill="green"/>
    </marker>
    <marker id="m2" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="6.5" markerHeight="6.5">
      <circle cx="5" cy="5" r="5" fill="skyblue" opacity="0.9"/>
    </marker>
    <marker id="m3" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="maroon" opacity="0.85"/>
    </marker>    
  </defs>
  
  <path d="M10,10 h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z"
  fill="none" stroke="black"
  marker-start="url(#m1)"  
  marker-mid="url(#m2)"
  marker-end="url(#m3)"  
  />
</svg>
显示对于闭合子路径, 在每个子路径起点绘制两个标记的图像.

对于包含闭合子路径的路径数据, 在每个闭合子路径的第一个/最后一个顶点绘制两个标记. 对于最左侧的闭合子路径, marker-mid 绘制在 marker-start 之上. 对于 中间的闭合子路径, 两个 marker-mid 彼此重叠绘制. 对于最右侧的 闭合子路径, marker-end 绘制在 marker-mid 之上.

请注意, marker-start 和 marker-end 指的是整个路径的第一个和最后一个顶点, 而不是每个子路径.

以下示例显示一个三角形标记符号作为 顶点标记使用, 在两条 路径末端形成箭头.

<svg xmlns="http://www.w3.org/2000/svg"
     width="275" height="200" viewBox="0 0 275 200">
  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" 
            markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
            orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
    </marker>
  </defs>

  <g fill="none" stroke-width="10" marker-end="url(#Triangle)">
    <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>
    <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>
  </g>
</svg>
显示自动定向标记使用方式的图像.

三角形放置在路径末端, 并自动定向, 使其指向正确方向. 使用 context-stroke 可确保 三角形的填充与每个 ‘path’ 的描边相匹配.

13.7.3. 标记简写: ‘marker’ 特性

名称: marker
值: none | <marker-ref>
初始值: 简写特性未定义
适用于: 形状
继承: 是
百分比: N/A
媒体: 视觉
计算值: 参见各个特性
动画类型: 离散

marker 特性设置 marker-start, marker-mid 和 marker-end 特性的值. marker 的值 直接用于所有三个相应的完整形式特性.

13.7.4. 渲染标记

当由于将 ‘orient’ 指定为 'auto' 而自动定向标记时, 使用以下规则:

对于绘制的每个标记, 会建立一个临时的新用户坐标 系统, 使标记得到正确定位和尺寸, 如下:

请注意, 用户代理样式表将 ‘marker’ 元素的 overflow 特性设置为 hidden, 这会默认在标记 SVG 视口边界创建矩形裁剪 路径.

特性不会从引用 ‘marker’ 的元素 继承到标记内容中. 但是, 通过在其定义中的元素上对 fill 或 stroke 使用 context-stroke 值, 可以设计单个 标记 以匹配引用该标记的元素样式.

标记不能进行交互. 例如 click 或 mouseover 等事件 在鼠标点击已渲染标记或在其上移动时, 不会派发到 ‘marker’ 或其子元素.

标记不会直接渲染, 必须由标记特性之一引用 才会渲染. ‘marker’ 元素的 display 值 必须始终由用户代理样式表 设置为 none, 且此声明的重要性必须高于任何其他 CSS 规则或呈现属性. 即使 ‘marker’ 元素或 其任何祖先上的 display 特性设置为 none, ‘marker’ 元素 仍可用于引用.

标记的渲染效果就像被引用 ‘marker’ 元素的内容针对每个 标记实例被深度克隆到一个单独的非公开 DOM 树中. 因为克隆的 DOM 树是非公开的, SVG DOM 不会显示标记的克隆实例.

将被引用 ‘marker’ 元素概念性地深度克隆 到非公开 DOM 树时, 还会 复制由 CSS 层叠 ([CSS2], 第 6 章)以及 被引用元素及其内容上的特性继承产生的任何特性值. CSS 选择器可以应用于原始 (即被引用的)元素, 因为它们是正式文档结构的一部分. CSS 选择器 不能应用于 (概念上)克隆的 DOM 树, 因为其 内容不属于正式文档结构.

为了说明, 我们重复前面展示的标记示例:

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="2in"
     viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>在路径末端放置箭头.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"
        marker-end="url(#Triangle)"  />
</svg>

上述文件的渲染效果将在视觉上与 以下内容相同:

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="2in"
     viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <desc>产生与标记示例文件相同效果的文件
      , 但不
      使用标记.
  </desc>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <!-- 路径像之前一样绘制, 但没有标记特性 -->
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"  />
  <!-- 以下逻辑模拟在路径的最终顶点
       绘制标记. -->
  <!-- 首先, 移动用户坐标系统的原点,
       使原点现在与路径终点对齐. -->
  <g transform="translate(2500,1250)" >
    <!-- 将坐标系统旋转 45 度, 因为
         标记指定了 orient="auto", 并且路径的最终线段
         沿 45 度方向行进. -->
    <g transform="rotate(45)" >
      <!-- 缩放坐标系统以匹配
           'markerUnits' 属性所指示的坐标系统, 本例中其值
           为 'strokeWidth'. 因此, 按当前 'stroke-width'
           特性值缩放坐标系统, 该值为 100. -->
      <g transform="scale(100)" >
        <!-- 将坐标系统平移
             (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY),
             使标记内的 (refX,refY) 与顶点对齐.
             本例中使用 preserveAspectRatio 的默认值
             ('xMidYMid meet'), 这意味着找到一个统一缩放因子
             (即 viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY),
             使 viewBox 完全适合 SVG 视口 ('meet') 并
             居中对齐 ('xMidYMid'). 本例中, 统一缩放因子
             为 markerHeight/viewBoxHeight=3/10=.3. 因此平移
             (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
        <g transform="translate(0,-1.5)" >
          <!-- 存在隐式裁剪路径, 因为用户代理样式
               表声明标记的 'overflow' 特性值为
               'hidden'. 为实现这一点, 在 SVG 视口边界创建裁剪路径
               . 请注意, 本例中 SVG 视口由于
               统一缩放因子, markerWidth/viewBoxWidth 与
               markerHeight/viewBoxHeight 的比例不同, 以及 'xMidYMid' 对齐,
               向 viewBox 左右各延伸 0.5 单位 -->
          <clipPath id="cp1" >
            <rect x="-0.5" y="0" width="4" height="3" />
          </clipPath>
          <g clip-path="url(#cp1)" >
            <!-- 按统一缩放因子
                 markerHeight/viewBoxHeight=3/10=.3 缩放坐标系统, 将坐标
                 系统设置为 viewBox 单位. -->
            <g transform="scale(.3)" >
              <!-- 此 'g' 元素承载原始 'marker' 元素上
                   特性层叠和继承产生的所有特性值.
                   本例中, 'marker'
                   元素或其任何祖先均未指定 fill 或 stroke, 因此分别使用
                   初始值 "black" 和 "none". -->
             <g fill="black" stroke="none" >
                <!-- 展开 'marker' 元素的内容. -->
                <path d="M 0 0 L 10 5 L 0 10 z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

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

13.8. 控制绘制操作顺序: ‘paint-order’ 特性

SVG 2 要求: 支持控制形状上填充, 描边和标记绘制的顺序.
决议: SVG 2 将采用 ‘paint-order’ 特性提案, 尽管可能采用 不同名称. 该特性名称现已确定, 参见 2013 年 11 月 15 日会议记录.
目的: 满足在无需复制元素的情况下将描边绘制在填充下方的常见需求 .
负责人: Cameron (ACTION-3285)
名称: paint-order
值: normal | [ fill || stroke || markers ]
初始值: normal
适用于: 形状和文本 内容元素
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

SVG 2 中新增. 添加它主要是为了无需复制 ‘text’ 元素 即可将文本描边绘制在填充下方.

paint-order 特性控制 形状和文本使用的三种 绘制操作的顺序: 填充, 描边以及它们可能具有的任何标记.

当此特性的值为 normal 时, 元素使用标准绘制操作顺序进行绘制: 先绘制填充, 然后描边, 最后绘制标记.

使用其他任何关键字时, 元素的绘制 操作顺序按从左到右给出的顺序执行. 如果三个关键字中有任何 被省略, 则它们最后绘制, 顺序与 paint-order: normal 时相同.

这意味着, 例如, paint-order: stroke 具有与 paint-order: stroke fill markers 相同的渲染行为.

以下示例显示如何使用 paint-order 特性 以更美观的方式渲染带描边的文本.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="150" viewBox="0 0 600 150">

  <style>
    text {
      font: 80px bold sans-serif; stroke-linejoin: round;
      text-anchor: middle; fill: peachpuff; stroke: crimson;
    }
  </style>

  <text x="150" y="100" style="stroke-width: 6px;">pizazz</text>
  <text x="450" y="100" style="stroke-width: 12px; paint-order: stroke;">pizazz</text>
</svg>
显示 paint-order 效果的图像.

描边绘制在填充下方的文本.

13.9. 用于插值的颜色空间: ‘color-interpolation’ 特性

名称: color-interpolation
值: auto | sRGB | linearRGB
初始值: sRGB
适用于: 容器元素, 图形元素, 渐变元素, ‘use’ 和 ‘animate’
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

SVG 用户代理在处理 SVG 内容时会在多个位置执行颜色插值和合成 . color-interpolation 特性控制以下图形操作使用的颜色空间:

对于滤镜效果, color-interpolation-filters 特性控制使用哪个颜色空间. [filter-effects-1]

color-interpolation 特性 在 sRGB 颜色空间或 (光能线性的)线性化 RGB 颜色空间中进行的颜色操作之间进行选择. 选择适当的颜色空间后, 使用逐分量线性插值. color-interpolation 的值具有 以下含义:

auto
表示用户代理可以选择 sRGB 或 linearRGB 空间进行颜色插值. 此选项表示作者不要求颜色 插值发生在特定颜色空间中.
sRGB
表示颜色插值发生在 sRGB 颜色空间中.
linearRGB
表示颜色插值发生在 下述线性化 RGB 颜色空间中.

sRGB 颜色空间 (即具有 2.2 gamma 曲线的非线性空间)和线性化 RGB 颜色空间 (即颜色值表示为没有 gamma 曲线的 sRGB 三刺激值)之间的转换公式可见于 sRGB 规范 [SRGB]. 为便于说明, 以下公式显示从 sRGB 到线性化 RGB 的转换, 其中 Csrgb 是三个 sRGB 颜色分量之一, Clinear 是相应的 线性化 RGB 颜色分量, 所有颜色值都在 0 到 1 之间:

C linear = { C srgb 12.92 if C srgb ≤ 0.04045 C srgb + 0.055 1.055 2.4 if C srgb > 0.04045
if C_srgb <= 0.04045
  C_linear = C_srgb / 12.92
else if c_srgb > 0.04045
  C_linear = ((C_srgb + 0.055) / 1.055) ^ 2.4

如果用户代理支持超出范围的颜色值, 这些值也 使用上述公式进行转换.

当子元素混合到背景中时, 子元素上的 color-interpolation 特性值 决定 混合类型, 而不是父元素上的 color-interpolation 值. 对于使用 ‘href’ 属性引用另一个 渐变的渐变, 渐变使用由 fill 或 stroke 特性直接引用的渐变元素上的 color-interpolation 特性值. 当动画化颜色时, 颜色插值 根据被动画元素上的 color-interpolation 特性值 执行.

13.10. 渲染提示

13.10.1. ‘shape-rendering’ 特性

名称: shape-rendering
值: auto | optimizeSpeed | crispEdges | geometricPrecision
初始值: auto
适用于: 形状
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

shape-rendering 特性向 实现提供提示, 指示其在渲染 ‘path’ 元素和基本形状 (例如圆和矩形)等矢量图形 元素时应如何权衡. 各值具有以下含义:

auto
表示用户代理应作出适当 权衡, 在速度, 清晰边缘和几何 精度之间取得平衡, 但几何精度的重要性 高于速度和清晰边缘.
optimizeSpeed
表示用户代理应优先考虑渲染 速度, 而不是几何精度和清晰边缘. 此选项 有时会使用户代理关闭形状 抗锯齿.
crispEdges
表示用户代理应尝试优先强调 图形清晰边缘之间的对比度, 而不是渲染 速度和几何精度. 为获得清晰边缘, 用户代理可能关闭所有直线和 曲线的抗锯齿, 或者只关闭接近 垂直或水平的直线的抗锯齿. 此外, 用户代理还可能调整 线条位置和线宽, 使边缘与设备 像素对齐.
geometricPrecision
表示用户代理应优先考虑几何 精度, 而不是速度和清晰边缘.

13.10.2. ‘text-rendering’ 特性

名称: text-rendering
值: auto | optimizeSpeed | optimizeLegibility | geometricPrecision
初始值: auto
适用于: ‘text’
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

text-rendering 特性向实现 提供关于渲染文本时应如何权衡的 提示. 各值具有以下含义:

auto
表示用户代理应作出适当 权衡, 在速度, 易读性和几何 精度之间取得平衡, 但易读性的重要性 高于速度和几何精度.
optimizeSpeed
表示用户代理应优先考虑渲染 速度, 而不是易读性和几何精度. 此选项 有时会使用户代理关闭文本 抗锯齿.
optimizeLegibility
表示用户代理应优先考虑易读性 , 而不是渲染速度和几何精度. 用户代理 通常会选择是否应用抗锯齿技术, 内置字体提示或两者兼用, 以生成最易读的 文本.
geometricPrecision
表示用户代理应优先考虑几何 精度, 而不是易读性和渲染速度. 此选项 通常会使用户代理暂停使用 提示, 使字形轮廓以与路径数据渲染相当的 几何精度绘制.

13.10.3. ‘image-rendering’ 特性

名称: image-rendering
值: auto | optimizeQuality | optimizeSpeed
初始值: auto
适用于: 图像
继承: 是
百分比: N/A
媒体: 视觉
计算值: 与指定值相同
动画类型: 离散

CSS Image Values and Replacement Content Module Level 4 将来可能重新定义此特性. 特别是它 应允许在放大时选择平滑处理或保持像素化外观.

image-rendering 特性向实现 提供关于在执行 图像处理时如何在速度和质量之间权衡的提示. 各值具有以下含义:

auto
表示用户代理应作出适当 权衡, 在速度和质量之间取得平衡, 但质量应 比速度更重要. 用户代理应采用 至少与最近邻重采样一样好的重采样算法, 但强烈推荐双线性重采样. 对于符合要求的高质量 SVG 查看器, 用户代理 应采用 至少与双线性重采样一样好的重采样算法 .
optimizeQuality
表示用户代理应优先考虑质量 而不是渲染速度. 用户代理应采用 至少与双线性重采样一样好的 重采样算法.
optimizeSpeed
表示用户代理应优先考虑渲染 速度而不是质量. 用户代理应使用 能实现快速渲染目标的重采样算法, 要求该重采样算法至少与 最近邻重采样一样好. 如果使用更高质量算法 也能达到性能目标, 则用户代理应使用 更高质量算法而不是 最近邻重采样.

在所有情况下, 即使原始数据和/或目标 设备使用索引颜色, 重采样也必须在真彩色 (例如 24 位)颜色空间中完成. 高质量 SVG 查看器应使用 线性颜色空间执行图像重采样.

13.11. ‘will-change’ 特性的效果

有关 will-change 的定义, 请参阅 CSS Will Change Module Level 1 规范.

will-change 特性用于向用户 代理提供关于内容将发生哪些类型更改的提示, 从而使 用户代理更有机会对给定元素执行渲染优化 .

will-change 特性适用于所有 SVG 图形元素, 但是由于 SVG 元素不支持滚动, scroll-position 值对它们没有影响 .

以下示例演示如何使用 will-change 预先告知用户代理元素的 transform 特性将发生变化, 这可能使用户代理将 元素渲染到其自己的 GPU 层中, 从而使脚本化的 transform 更改看起来平滑.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    #background { fill: lemonchiffon; }
    #star {
      fill: cornflowerblue;
      stroke: navy; stroke-width: 5px; stroke-linejoin: round;
      paint-order: stroke fill;
      will-change: transform;
    }
    text { font: 24px sans-serif; user-select: none; }
  </style>
  <g onmousemove="drag(evt.clientX, evt.clientY);"
     onmouseup="dragging = false;">
    <rect id="background" width="100%" height="100%"/>
    <text x="10" y="30">拖动星星!</text>
    <path id="star" transform="translate(200,150)"
          d="M 0.00,-40.00 -11.76,-16.18 -38.04,-12.36 -19.02,6.18 -23.51,32.36
               0.00,20.00 23.51,32.36 19.02,6.18 38.04,-12.36 11.76,-16.18 z"
          onmousedown="dragging = true;"/>
  </g>
  <script>
    var dragging = false;
    var star = document.getElementById("star");
    function drag(x, y) {
      if (dragging) {
        star.setAttribute("transform", "translate(" + x + "," + y + ")");
      }
    }
  </script>
</svg>
一颗蓝色星星, 上方有文本 "拖动星星!".

在支持 SVG 元素上 will-change 的用户代理中, 星星可能渲染到单独的层中, 以便 在画布上拖动时能够快速合成. 查看交互式 SVG 文档.

will-change 特性取代 SVG Tiny 1.2 中定义的 ‘buffered-rendering’ 特性.

13.12. DOM 接口

13.12.1. SVGMarkerElement 接口

SVGMarkerElement 对象 表示 DOM 中的 ‘marker’ 元素.

[Exposed=Window]
interface SVGMarkerElement : SVGElement {

  // 标记单位类型
  const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
  const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
  const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;

  // 标记方向类型
  const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
  const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
  const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;
  const unsigned short SVG_MARKER_ORIENT_AUTO_START_REVERSE = 3;

  [SameObject] readonly attribute SVGAnimatedLength refX;
  [SameObject] readonly attribute SVGAnimatedLength refY;
  [SameObject] readonly attribute SVGAnimatedEnumeration markerUnits;
  [SameObject] readonly attribute SVGAnimatedLength markerWidth;
  [SameObject] readonly attribute SVGAnimatedLength markerHeight;
  [SameObject] readonly attribute SVGAnimatedEnumeration orientType;
  [SameObject] readonly attribute SVGAnimatedAngle orientAngle;
  attribute DOMString orient;

  undefined setOrientToAuto();
  undefined setOrientToAngle(SVGAngle angle);
};

SVGMarkerElement includes SVGFitToViewBox;

SVGMarkerElement 上定义的数字标记单位类型常量 用于表示 ‘markerUnits’ 属性可以采用的关键字值. 其含义如下:

常量 含义
SVG_MARKERUNITS_USERSPACEONUSE userSpaceOnUse 关键字.
SVG_MARKERUNITS_STROKEWIDTH strokeWidth 关键字.
SVG_MARKERUNITS_UNKNOWN 其他某个值.

SVGMarkerElement 上定义的数字标记方向类型常量 用于表示 ‘orient’ 属性可以采用的值类型. 其含义如下:

常量 含义
SVG_MARKER_ORIENT_AUTO auto 关键字.
SVG_MARKER_ORIENT_AUTO_START_REVERSE auto-start-reverse 关键字.
SVG_MARKER_ORIENT_ANGLE 表示方向角度的 <angle> 或 <number> 值.
SVG_MARKER_ORIENT_UNKNOWN 其他某个值.

markerUnits IDL 属性 反映 ‘markerUnits’ 内容属性. ‘markerUnits’ 的 数字类型值如 上面的数字标记单位类型常量表所述.

orientType, orientAngle 和 orient IDL 属性 都反映 ‘orient’ 内容属性. ‘orient’ 的数字类型值 如下:

值 数字类型值
auto SVG_MARKER_ORIENT_AUTO
auto-start-reverse SVG_MARKER_ORIENT_AUTO_START_REVERSE
<angle> | <number> SVG_MARKER_ORIENT_ANGLE

refX, refY, markerWidth 和 markerHeight IDL 属性 分别反映 ‘refX’, ‘refY’, ‘markerWidth’ 和 ‘markerHeight’ 内容属性 .

setOrientToAuto 方法用于将 ‘orient’ 属性值 设置为 'auto'. 调用 setOrientToAuto() 时, 只需将 ‘orient’ 属性设置为 'auto'.

setOrientToAngle 方法用于将 ‘orient’ 属性值 设置为特定角度值. 调用 setOrientToAngle(angle) 时, 使用 angle 作为值对 ‘orient’ 属性进行重新序列化.


第 14 章: 绘制服务器: 渐变和图案

14.1. 介绍

本节涵盖绘制服务器, 这是一种 允许对象的 fill 或 stroke 由 在其他位置找到的资源定义的方法. 它允许资源在 整个文档中重复使用. 有关填充和描边对象的一般 讨论, 请参阅 绘制: 填充和描边一节.

SVG 定义了多种绘制服务器类型:

SVG 2 要求: 形状的任意填充.
决议: SVG 2 应支持使用任意元素进行填充和 描边.
目的: 允许例如将视频或图像用作填充源.
负责人: Alex? (无 action)
两种绘制服务器的图像.

两种绘制服务器. 从左到右: 线性渐变. 图案.

绘制服务器通过在 fill 或 stroke 特性中包含URL 引用来使用 (即 fill="url(#MyLightPurple)").

特性从祖先 继承到绘制服务器元素中; 特性不会从引用 绘制服务器元素的元素继承.

绘制服务器元素永远不会直接渲染; 它们唯一的用途是 作为可以通过 fill 和 stroke 特性引用的对象. 这些元素的 display 值 必须始终由用户代理样式表 设置为 none, 且此声明的重要性必须高于任何其他 CSS 规则或呈现属性. 绘制服务器元素 即使在绘制服务器元素或其任何祖先上的 display 特性设置为 none 时仍可被引用.

14.1.1. 将绘制服务器用作模板

大多数绘制服务器元素接受 ‘href’ 属性, 可用于将兼容的绘制服务器元素定义为模板. 为模板元素定义的属性 会在当前元素未指定相应属性时 代替初始值使用 . 此外, 如果当前元素除了描述性元素之外 没有任何子内容 , 则会克隆模板元素的子内容来替换它.

对于 ‘pattern’, 排除描述性内容是 SVG 2 中新增的, 这与渐变的行为一致, 也与使描述性内容对任何 SVG 元素都有效的更改一致.

同样新增的是: 模板交叉引用可以指向外部文件资源 (SVG 1.1 的不同章节在这一点上给出了不一致的指导), 并且子元素的"继承"通过影子树表示.

模板化可以任意层级地间接进行 (受外部文件资源的安全限制约束, 这些限制可能使引用无效). 因此, 如果被引用的模板元素没有相关子内容 或没有定义指定属性, 则属性值或克隆内容会 从模板自身 ‘href’ 属性引用的另一个元素派生.

本章中每个 ‘href’ 属性的描述按如下方式定义 模板化过程的限制:

如果任何指定属性未 在当前元素上定义, 或者当前元素除描述性元素之外没有子元素, 则用户代理必须处理 URL 以标识被引用的资源. 如果 URL 引用不是无效的, 则 URL 的目标元素将用作模板元素, 如下:

当绘制服务器元素具有影子树时, 该树中的元素实例 必须用于渲染绘制服务器效果, 就像它们是绘制服务器元素自己的子元素一样.

用于模板化的use 元素影子树模型 允许克隆内容继承与原始内容不同的样式. 此行为在 SVG 2 中新定义; SVG 1.1 未定义如何将样式应用于继承的绘制服务器内容.

14.2. 渐变

渐变由绘图表面上各点之间平滑的颜色过渡组成 . SVG 提供两种类型的渐变:

定义渐变后, 可以通过将 fill 或 stroke 特性设置为引用该渐变, 使用渐变填充或描边图形元素.

线性和径向渐变的颜色过渡由 沿渐变向量的一系列颜色停止点定义 . 渐变法线定义向量中的颜色如何 绘制到表面. 对于线性渐变, 法线是 垂直于向量的直线. 对于径向渐变, 法线是 与向量成直角相交的圆. 每条渐变 法线使用由向量确定的一种颜色绘制.

标示向量和法线的线性和径向渐变图像.

标示渐变向量的线性和径向渐变 . 向量由以小 圆表示的三个停止点组成. 每个渐变显示一条渐变法线.

对于线性和径向渐变, 渐变向量上两个停止点之间的 颜色值是每个通道上两个停止点颜色的线性插值 , 按与每个停止点的距离加权.

V = C 0 + ( C 1 - C 0 ) ( D - O 0 O 1 - O 0 )
    $V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));
  

其中, 对于每个通道:

当图形元素引用渐变时, 从概念上讲, 图形元素应复制带有渐变法线的渐变向量, 并将其视为自身几何形状的一部分. 应用于图形元素几何形状的任何 变换也会应用于复制的渐变向量和渐变法线. 在引用的渐变上指定的任何 渐变变换会在任何图形元素变换 应用于渐变之前应用.

14.2.1. 定义

渐变元素
渐变元素是定义渐变绘制服务器的元素. 本规范定义以下渐变元素: ‘linearGradient’ 和 ‘radialGradient’.

14.2.2. 线性渐变

线性渐变由 ‘linearGradient’ 元素定义.

‘linearGradient’
类别:
渐变元素, 永不渲染元素, 绘制服务器元素
内容模型:
以下任意数量的元素, 顺序不限:animate, animateTransform, script, set, stop, style
属性:
DOM 接口:

14.2.2.1. 属性

请注意, ‘x1’,‘y1’, ‘x2’ 和 ‘y2’ 属性 在 ‘linearGradient’ 上不是呈现 属性; 使用值不受 CSS 样式影响. ‘gradientTransform’ 属性是 transform 特性的呈现属性.

gradientUnits

定义属性 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的坐标系统.

值
userSpaceOnUse | objectBoundingBox
初始值
objectBoundingBox
可动画
是
userSpaceOnUse

如果 gradientUnits="userSpaceOnUse", ‘x1’, ‘y1’, ‘x2’, 和 ‘y2’ 表示在引用渐变元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用渐变元素的元素所使用的用户坐标系统), 然后应用由 ‘gradientTransform’ 属性指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.

objectBoundingBox

如果 gradientUnits="objectBoundingBox", 属性 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的用户坐标系统 使用应用渐变的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘gradientTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.

当 gradientUnits="objectBoundingBox" 且 ‘gradientTransform’ 为恒等矩阵时, 线性渐变的法线在对象边界框空间中垂直于 渐变向量 (即 抽象坐标系统, 其中 (0,0) 位于对象边界框左上角 , (1,1) 位于 对象边界框右下角). 当 对象的边界框不是正方形时, 在对象边界框空间内 最初垂直于渐变向量的渐变法线 在用户空间中相对于渐变向量渲染时 可能不再垂直. 如果渐变向量平行于边界框的某一 轴, 渐变法线将保持 垂直. 此变换是由于应用 从边界框空间到用户坐标系统的非均匀缩放变换 .

gradientTransform

包含从渐变坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜渐变等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.

值
<transform-list>
初始值
恒等变换
可动画
是
x1

‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 为线性 渐变定义一个渐变向量. 此渐变向量提供 渐变 停止点映射到的起点和 终点. ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的值 可以是数字或百分比.

值
<length>
初始值
0%
可动画
是
y1

参见 ‘x1’.

值
<length>
初始值
0%
可动画
是
x2

参见 ‘x1’.

值
<length>
初始值
100%
可动画
是
y2

参见 ‘x1’.

值
<length>
初始值
0%
可动画
是
spreadMethod

指示渐变在目标矩形边界内部 开始或结束时会发生什么.

值
pad | reflect | repeat
初始值
pad
可动画
是
pad
使用渐变的末端颜色填充 目标区域的剩余部分.
reflect
按从起点到终点, 从终点到起点, 从起点到终点等方式连续反射渐变图案, 直到目标 矩形被填满.
repeat
按从起点到终点, 从起点到终点, 从起点到终点等方式连续重复渐变图案, 直到目标区域 被填满.
'spreadMethod' 三种可能值的图像.

spreadMethod 三种可能值的示意图, 从左到 右: pad, reflect, repeat. 渐变向量跨越 边界框宽度的 40% 到 60%.

href

指向模板渐变元素的URL 引用; 为使引用有效, 它必须指向 不同的 ‘linearGradient’ 或 ‘radialGradient’ 元素.

请参阅将绘制服务器用作 模板的过程, 以及为URL 引用属性 和 已弃用的 XLink 属性定义的通用处理.

将从模板复制的指定属性为:

值
URL [URL]
初始值
空
可动画
是

14.2.2.2. 关于线性渐变的说明

如果 ‘x1’ = ‘x2’ 且 ‘y1’ = ‘y2’, 则要绘制的区域将使用最后一个 渐变停止点的颜色和不透明度 以单一颜色绘制.

示例 lingrad01 展示如何通过引用线性渐变绘制服务器填充矩形.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="0 0 300 200" >

  <title>示例 lingrag01</title>
  <desc>使用线性渐变绘制服务器填充矩形.</desc>

  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#A8F" />
      <stop offset="95%" stop-color="#FDC" />
    </linearGradient>
  </defs>

  <!-- 使用线性渐变绘制服务器填充矩形 -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>
示例 lingrad01 — 通过引用线性渐变绘制服务器填充矩形

示例 lingrad01

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

14.2.3. 径向渐变

径向渐变由 ‘radialGradient’ 元素定义.

‘radialGradient’
类别:
渐变元素, 永不渲染元素, 绘制服务器元素
内容模型:
以下任意数量的元素, 顺序不限:animate, animateTransform, script, set, stop, style
属性:
DOM 接口:

14.2.3.1. 属性

请注意, ‘cx’,‘cy’, 和 ‘r’ 属性 在 ‘radialGradient’ 上不是 呈现属性; 使用值不受 CSS 样式影响. ‘gradientTransform’ 属性是 transform 特性的呈现属性.

gradientUnits = "userSpaceOnUse | objectBoundingBox"

定义属性 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 的坐标系统.

初始值
objectBoundingBox
可动画
是
userSpaceOnUse

如果 gradientUnits="userSpaceOnUse", ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 表示在引用渐变元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用渐变元素的元素所使用的用户坐标系统), 然后应用由 ‘gradientTransform’ 属性指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.

objectBoundingBox

如果 gradientUnits="objectBoundingBox", 属性 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 的用户坐标系统 使用应用渐变的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘gradientTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.

当 gradientUnits="objectBoundingBox" 且 ‘gradientTransform’ 为恒等矩阵时, 径向渐变的环相对于对象边界框空间是圆形的 (即 抽象坐标系统, 其中 (0,0) 位于对象边界框左上角 , (1,1) 位于 对象边界框右下角). 当 对象的边界框不是正方形时, 在对象边界框空间中 概念上为圆形的环 会由于应用从边界框空间 到用户坐标系统的非均匀缩放变换而渲染为椭圆形 .

gradientTransform = "<transform-list>"

包含从渐变坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜渐变等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.

初始值
恒等变换
可动画
是
cx = "<length>"

‘cx’, ‘cy’ 和 ‘r’ 定义 径向渐变的结束圆. 渐变将按以下方式绘制: 100% 渐变停止点映射 到该结束圆的圆周.

初始值
50%
可动画
是
cy = "<length>"

参见 ‘cx’.

初始值
50%
可动画
是
r = "<length>"

参见 ‘cx’.

负值是错误 (参见错误 处理).

初始值
50%
可动画
是
fx = "<length>"

‘fx’, ‘fy’, 和 ‘fr’ 定义径向渐变的 起始 圆. 渐变将按以下方式绘制: 0% 渐变停止点映射 到该起始圆的圆周.

初始值
50%
可动画
是

如果元素引用了 为 'fx' 指定值的元素, 则 'fx' 的值 从被引用元素继承.

各种径向渐变属性的示意图.

此图显示在 ‘fr’ 为 ‘r’ 的 50% 时如何定义几何属性. 小圆标记最外层圆的中心 (‘cx’,‘cy’), 而十字标记 最内层圆的中心 (‘fx’,‘fy’). 虚线显示两个渐变向量. 向量连接 最内层和最外层圆上的对应点. 外圆之外的区域使用最后一个 stop-color 绘制, 而内圆 内部区域使用第一个 stop-color 绘制.

fy = "<length>"

参见 ‘fx’.

初始值
50%
可动画
是

如果元素引用了一个 为 'fy' 指定值的元素, 则 'fy' 的值 从被引用元素继承.

fr = "<length>"

SVG 2 中新增. 添加它是为了与 Canvas 保持一致.

‘fr’ 是 焦点圆的半径. 参见 ‘fx’.

负值是错误 (参见错误 处理).

初始值
0%, 见下文
可动画
是

如果未指定该属性, 其效果就像 指定值 '0%' 一样. 如果元素引用了一个 为 'fr' 指定值的元素, 则 'fr' 的值 从被引用元素继承.

SVG 2 要求: 允许在径向渐变中指定焦点圆半径.
决议: 为 SVG 2 的 ‘radialGradient’> 添加 ‘fr’ 属性.
目的: 与 Canvas 保持一致. 零偏移停止点将位于由 ‘fx’, ‘fy’ 和 ‘fr’ 属性定义的圆上.
负责人: Erik (ACTION-3098)
spreadMethod = "pad | reflect | repeat"

指示渐变在由渐变绘制的对象边界内 开始或结束时会发生什么. 其 值和含义与 ‘linearGradient’ 元素上的 ‘spreadMethod’ 属性相同.

初始值
pad
可动画
是
href = [URL]

指向模板渐变元素的URL 引用; 为使引用有效, 它必须指向 ‘linearGradient’ 元素 或 不同的 ‘radialGradient’ 元素.

请参阅将绘制服务器用作 模板的过程, 以及为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.

将从模板复制的指定属性为:

请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.

初始值
空
可动画
是
SVG 2 要求: 阐明焦点位于圆上的径向渐变.
决议: 当焦点位于 圆边缘且使用 repeat 时, 重复颜色的第一个和最后一个停止点之间的 距离为 0, 绘制应生成所有 渐变停止点平均值的颜色.
目的: 改进径向渐变的互操作性.
负责人: Erik (ACTION-3097)
说明: SVG 1.1 未定义当焦点 位于圆边缘且使用 'repeat' 时应如何处理. 重复颜色的 第一个和最后一个停止点之间的距离为 0. 已 决议绘制应生成所有渐变停止点的 加权平均颜色 (按偏移量加权).

14.2.3.2. 关于径向渐变的说明

SVG 2 中已更改. SVG 1.1 要求焦 点如果位于结束圆之外, 则移动到结束 圆上. 此更改是为了与 Canvas 保持一致.

允许焦点位于结束 圆之外的决议在 Rigi Kaltbad 工作组会议上通过.

如果由 ‘fx’, ‘fy’ 和 ‘fr’ 定义的起始圆 位于由 ‘cx’, ‘cy’, 和 ‘r’ 定义的结束圆之外, 实际上 会创建一个与两个圆相切的圆锥. 圆锥之外的区域不受 渐变影响 (透明黑色).

如果起始圆与结束圆完全重叠, 则不 绘制渐变. 该区域保持不变 (透明黑色).

焦点 (起始圆)位于
	  结束圆之外的径向渐变图像.

焦点 (起始)圆 位于结束圆之外的径向渐变. 焦点圆是 右侧较小的圆. 渐变的 spreadMethod="reflect".

两个径向渐变的图像, 一个焦点刚好位于圆周内侧
    , 另一个焦点位于圆周上.

两个具有 spreadMethod="repeat" 的径向渐变. 左侧, 焦点刚好位于由 ‘cx’, ‘cy’, 和 ‘r’ 定义的圆的右侧内边缘. 右侧, 焦点位于圆上. 在这种情况下, 圆周右侧 绘制区域的填充等于 渐变向量中颜色的加权平均值.

上图右侧渐变 右边区域的处理方式与 Canvas 不同, 在 Canvas 中该区域将为透明黑色. 此差异是为了 保持与 SVG 1.1 的兼容性.

用于加权平均的颜色空间与 渐变进行插值的颜色空间相同. 参见 Rigi Kaltbad 工作组会议.

示例 radgrad01 展示如何通过引用径向渐变绘制 服务器填充矩形.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200" >
  <title>示例 radgrad01</title>
  <desc>通过引用径向渐变绘制服务器填充矩形.</desc>

  <defs>
    <radialGradient id="MyGradient"
		    gradientUnits="userSpaceOnUse"
		    cx="150" cy="100"
		    r="100">
      <stop offset="0%"   stop-color="#A8F" />
      <stop offset="50%"  stop-color="#FDC" />
      <stop offset="100%" stop-color="#A8F" />
    </radialGradient>
  </defs>

  <!-- 使用径向渐变绘制服务器填充矩形 -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>
示例 radgrad01 — 通过引用径向渐变绘制服务器填充矩形

示例 radgrad01

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

14.2.4. 渐变停止点

渐变中使用的颜色向量 由作为 ‘linearGradient’ 或 ‘radialGradient’ 元素子元素的 ‘stop’ 元素定义.

在 SVG 1.1 中, 上文写作: "颜色 渐变带..." 但本节其他地方均未使用 "ramp".

‘stop’
类别:
无
内容模型:
以下任意数量的元素, 顺序不限:
    animate, script, set, style
    属性:
    DOM 接口:

    14.2.4.1. 属性

    offset

    指示渐变停止点的放置位置. 对于线性 渐变, ‘offset’ 属性 表示沿渐变向量的位置. 对于径向渐变, 它 表示从最内层/最小圆的边缘到最外层/最大 圆边缘的分数距离 .

    值
    <number> | <percentage>
    初始值
    0
    可动画
    是
    <number>
    通常范围从 0 到 1 的数字.
    <percentage>
    通常范围从 0% 到 100% 的百分比.

    14.2.4.2. 特性

    ‘stop-color’

    stop-color 特性指示在该渐变停止点使用 什么颜色 . 关键字 currentColor 和其他颜色语法 可以采用与 fill 和 stroke 特性的<paint> 规范中相同的方式指定.

    对于渐变, SVG 对 'transparent' 关键字的处理 与 CSS 不同. SVG 不在预乘 空间中计算渐变, 因此 'transparent' 实际表示透明黑色. 指定 值为 'transparent' 的 stop-color 等效于 指定值为 'black' 的 stop-color 和值为 '0' 的 stop-opacity.

    值
    <‘color’>
    初始值
    black
    适用于
    ‘stop’ 元素
    继承
    否
    百分比
    N/A
    媒体
    视觉
    可动画
    是
    ‘stop-opacity’

    stop-opacity 特性定义 给定渐变停止点的不透明度. 用于渐变计算的不透明度值是 stop-opacity 的值与 stop-color 值的不透明度 的乘积. 对于不包含显式不透明度信息的 stop-color 值类型, 该分量的不透明度必须视为 1.

    值
    <‘opacity’>
    初始值
    1
    适用于
    ‘stop’ 元素
    继承
    否
    百分比
    N/A
    媒体
    视觉
    计算值
    指定值转换为数字, 并限制在 [0,1] 范围内
    可动画
    是
    <number>
    stop-color 的不透明度. 超出 0.0 (完全透明)到 1.0 (完全不透明)范围的任何值都必须 限制在该范围内.
    <percentage>
    stop-color 的不透明度, 以 0 到 1 范围的百分比表示.

    14.2.4.3. 关于渐变停止点的说明

    14.3. 图案

    图案用于使用一个可在 x 和 y 方向以固定间隔重复 ("平铺")以覆盖要绘制区域的预定义图形对象来填充 或描边 对象. 图案使用 ‘pattern’ 元素定义, 然后由给定图形元素上的 fill 和 stroke 特性引用, 以指示 给定元素应使用该图案进行填充或描边.

    属性 ‘x’, ‘y’, ‘width’, ‘height’ 和 ‘patternUnits’ 在无限画布上的某处定义一个 参考矩形. 参考矩形的左上角 位于 (x, y), 右下角位于 (x + width, y + height). 理论上, 平铺会在 X 和 Y 方向 (正向和负向)将一系列这样的矩形延伸到无穷远, 每个可能的整数 m 和 n 对应的矩形起点为 (x + m*width, y + n* height).

    ‘pattern’
    类别:
    容器元素, 永不渲染元素, 绘制服务器元素
    内容模型:
    以下任意数量的元素, 顺序不限:a, clipPath, filter, foreignObject, image, marker, mask, script, style, switch, text, view
    属性:
    DOM 接口:

    14.3.1. 属性

    请注意, ‘x’,‘y’, ‘width’ 和 ‘height’ 属性 在 ‘pattern’ 上不是 呈现属性; 使用值不受 CSS 样式影响. ‘patternTransform’ 属性是 transform 特性的呈现属性.

    patternUnits

    定义属性 ‘x’, ‘y’, ‘width’ 和 ‘height’ 的坐标系统.

    值
    userSpaceOnUse | objectBoundingBox
    初始值
    objectBoundingBox
    可动画
    是
    userSpaceOnUse

    如果 patternUnits="userSpaceOnUse", ‘x’, ‘y’, ‘width’ 和 ‘height’ 表示在引用 ‘pattern’ 元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用 ‘pattern’ 元素的元素所使用的用户坐标系统), 然后 应用由属性 ‘patternTransform’ 指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.

    objectBoundingBox

    如果 patternUnits="objectBoundingBox", 属性 ‘x’, ‘y’, ‘width’ 和 ‘height’ 的用户坐标系统 使用应用图案的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘patternTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.

    patternContentUnits

    定义 ‘pattern’ 内容的坐标系统. 请注意, 如果指定了 ‘viewBox’ 属性, 则此属性不起作用.

    值
    userSpaceOnUse | objectBoundingBox
    初始值
    userSpaceOnUse
    可动画
    是
    userSpaceOnUse

    如果 patternContentUnits="userSpaceOnUse", ‘pattern’ 元素内容的用户坐标系统是 在引用 ‘pattern’ 元素时生效的当前用户坐标系统 基础上所得的坐标系统 (即通过 fill 或 stroke 特性引用 ‘pattern’ 元素的元素所使用的用户坐标系统), 然后应用由 ‘patternTransform’ 属性指定的变换.

    objectBoundingBox

    如果 patternContentUnits="objectBoundingBox", ‘pattern’ 元素内容的用户坐标系统 使用 应用图案的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘patternTransform’ 属性指定的变换.

    patternTransform

    包含从图案坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜图案图块等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.

    值
    <transform-list>
    初始值
    恒等变换
    可动画
    是
    x

    ‘x’, ‘y’, ‘width’ 和 ‘height’ 指示图案图块如何放置和间隔. 这些 属性表示由 ‘patternUnits’ 和 ‘patternTransform’ 属性组合指定的坐标 空间中的坐标和值.

    值
    <length>
    初始值
    0
    可动画
    是
    y

    参见 ‘x’.

    值
    <length>
    初始值
    0
    可动画
    是
    width

    参见 ‘x’.

    值
    <length>
    初始值
    0
    可动画
    是

    负值是错误 (参见错误 处理). 值为零会禁用 元素的渲染 (即不应用绘制).

    height

    参见 ‘x’.

    值
    <length>
    初始值
    0
    可动画
    是

    负值是错误 (参见错误处理). 值为零会禁用元素的渲染 (即不 应用绘制).

    href

    指向模板元素的URL 引用, 为使引用有效, 它必须是不同的 ‘pattern’ 元素.

    请参阅将绘制服务器用作 模板的过程, 以及为URL 引用属性 和 已弃用的 XLink 属性定义的通用处理.

    将从模板复制的指定属性为:

    值
    URL [URL]
    初始值
    空
    可动画
    是

    14.3.2. 关于图案的说明

    SVG 的用户代理样式表将 ‘pattern’ 元素的 overflow 特性设置为 hidden, 这会在图案图块边界创建矩形裁剪 路径. 除非覆盖 overflow 特性, 图案内 超出图案矩形的任何图形都将被裁剪 . 下面的示例 pattern01显示 裁剪到图案图块的效果.

    请注意, 如果 overflow 特性设置 为 visible, 则当前尚未定义 图案在图案边界之外的渲染行为 . SVG 的未来版本可能要求显示 溢出内容. 鼓励 SVG 实现者渲染溢出内容, 因为这是作者期望的行为. 如果渲染溢出内容, 图案图块应按行从左到右渲染, 各行从上到下渲染.

    参见 GitHub Issue 129

    ‘pattern’ 的内容相对于一个新的坐标 系统. 如果存在 ‘viewBox’ 属性, 则新坐标 系统会使用 ‘viewBox’ 和 ‘preserveAspectRatio’ 的标准规则, 适配到由 ‘pattern’ 元素上的 ‘x’, ‘y’, ‘width’, ‘height’ 和 ‘patternUnits’ 属性定义的区域中 . 如果没有 ‘viewBox’ 属性, 则 新坐标系统的原点位于 (x, y), 其中 x 由 ‘pattern’ 元素上的 ‘x’ 属性确定, 而 y 由 ‘pattern’ 元素上的 ‘y’ 属性确定. 因此, 在以下 示例中:

    <pattern x="10" y="10" width="20" height="20">
      <rect x="5" y="5" width="10" height="10"/>
    </pattern>
    

    矩形的左上角位于图案图块原点右侧 5 个单位, 下方 5 个单位处.

    ‘viewBox’ 属性 引入一个附加变换, 该变换应用在由于属性 ‘x’, ‘y’, ‘width’, ‘height’ 和 ‘patternUnits’ 而创建新图案坐标系统所需的任何变换之上.

    附加到 ‘pattern’ 元素内容的事件属性和事件监听器不会被处理; 只处理 ‘pattern’ 元素的 渲染方面.

    示例 pattern01 展示如何通过引用图案绘制 服务器填充矩形. 请注意, 每个三角形的蓝色描边 在顶部和左侧被轻微裁剪. 这是因为 SVG 的 用户代理样式表将 ‘pattern’ 元素的 overflow 特性设置为 hidden, 从而使图案被裁剪 到图案图块的边界.

    <?xml version="1.0" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         viewBox="0 0 300 200" >
    
      <title>示例 pattern01</title>
      <desc>使用图案绘制服务器填充椭圆.</desc>
    
      <defs>
        <pattern id="TrianglePattern"
    	     patternUnits="userSpaceOnUse"
                 x="0" y="0" width="50" height="50"
                 viewBox="0 0 10 10" >
          <path d="M 0 0 L 7 0 L 3.5 7 z"
    	    fill="plum"
    	    stroke="blue" />
        </pattern> 
      </defs>
    
      <!-- 使用三角形图案绘制服务器填充椭圆 -->
      <ellipse fill="url(#TrianglePattern)"
    	   stroke="black"
    	   stroke-width="2"
               cx="150" cy="100" rx="125" ry="75" />
    </svg>
    示例 pattern01 — 通过引用图案绘制服务器填充矩形

    示例 pattern01

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

    14.4. DOM 接口

    14.4.1. SVGGradientElement 接口

    SVGGradientElement 接口 用作渐变绘制服务器元素接口的 基础接口.

    [Exposed=Window]
    interface SVGGradientElement : SVGElement {
    
      // 扩展方法类型
      const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
      const unsigned short SVG_SPREADMETHOD_PAD = 1;
      const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
      const unsigned short SVG_SPREADMETHOD_REPEAT = 3;
    
      [SameObject] readonly attribute SVGAnimatedEnumeration gradientUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList gradientTransform;
      [SameObject] readonly attribute SVGAnimatedEnumeration spreadMethod;
    };
    
    SVGGradientElement includes SVGURIReference;
    

    SVGGradientElement 上定义的数字扩展方法类型常量 用于表示 ‘spreadMethod’ 属性可以采用的关键字值. 其含义如下:

    常量 含义
    SVG_SPREADMETHOD_PAD pad 关键字.
    SVG_SPREADMETHOD_REFLECT reflect 关键字.
    SVG_SPREADMETHOD_REPEAT repeat 关键字.
    SVG_SPREADMETHOD_UNKNOWN 其他某个值.

    gradientUnits IDL 属性 反映 ‘gradientUnits’ 内容 属性. 渐变元素上 ‘gradientUnits’ 属性的数字类型值如下:

    值 数字类型值
    userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE
    objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

    gradientTransform IDL 属性反映 transform 特性的计算值 以及 ‘linearGradient’ 和 ‘radialGradient’ 元素的 'gradientTransform' 呈现属性 .

    spreadMethod IDL 属性 反映 ‘spreadMethod’ 内容 属性. 渐变元素上 ‘spreadMethod’ 属性的数字类型值如上面的 数字扩展类型常量表所述.

    14.4.2. SVGLinearGradientElement 接口

    SVGLinearGradientElement 对象表示 DOM 中的 ‘linearGradient’ .

    [Exposed=Window]
    interface SVGLinearGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength x1;
      [SameObject] readonly attribute SVGAnimatedLength y1;
      [SameObject] readonly attribute SVGAnimatedLength x2;
      [SameObject] readonly attribute SVGAnimatedLength y2;
    };

    x1, y1, x2 和 y2 IDL 属性 分别反映 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 内容属性

    14.4.3. SVGRadialGradientElement 接口

    SVGRadialGradientElement 对象表示 DOM 中的 ‘radialGradient’ .

    [Exposed=Window]
    interface SVGRadialGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength cx;
      [SameObject] readonly attribute SVGAnimatedLength cy;
      [SameObject] readonly attribute SVGAnimatedLength r;
      [SameObject] readonly attribute SVGAnimatedLength fx;
      [SameObject] readonly attribute SVGAnimatedLength fy;
      [SameObject] readonly attribute SVGAnimatedLength fr;
    };

    cx, cy, r, fx, fy 和 fr IDL 属性 分别反映 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’ 和 ‘fr’ 内容属性 .

    14.4.4. SVGStopElement 接口

    SVGStopElement 对象表示 DOM 中的 ‘stop’ 元素 .

    [Exposed=Window]
    interface SVGStopElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedNumber offset;
    };

    offset IDL 属性 反映 ‘offset’ 内容属性.

    请注意, SVGStopElement 没有用于其 ‘path’ 属性的 反映 IDL 属性.

    14.4.5. SVGPatternElement 接口

    SVGPatternElement 对象 表示 DOM 中的 ‘pattern’ 元素 .

    [Exposed=Window]
    interface SVGPatternElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedEnumeration patternUnits;
      [SameObject] readonly attribute SVGAnimatedEnumeration patternContentUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList patternTransform;
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    };
    
    SVGPatternElement includes SVGFitToViewBox;
    SVGPatternElement includes SVGURIReference;
    

    patternUnits 和 patternContentUnits IDL 属性分别反映 ‘patternUnits’ 和 ‘patternContentUnits’ 内容属性. ‘patternUnits’ 和 ‘patternContentUnits’ 的数字类型值 如下:

    值 数字类型值
    userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE
    objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

    patternTransform IDL 属性反映 transform 特性的计算值 和 ‘patternTransform’ 呈现属性.

    x, y, width 和 height IDL 属性分别反映 ‘x’, ‘y’, ‘width’ 和 ‘height’ 内容属性.


    第 15 章: 脚本和交互性

    15.1. 介绍

    SVG 内容可以通过利用 SVG 语言中的以下功能实现交互 (即响应 用户发起的事件):

    本章描述交互式 SVG 中的脚本 和 DOM 事件处理, 包括事件在什么情况下触发.

    相关信息可在其他章节中找到:

    15.2. 支持的事件

    SVG 2 要求: 支持锚点更改事件.
    决议: SVG 2 将考虑添加 HTML 文档范围事件 (包括 hashchange), 并在有意义的情况下将其应用于 SVG 文档.
    目的: 允许作者在根 SVG 元素上使用与 HTML body 或根元素相同的一组事件监听器属性.
    负责人: Cameron (ACTION-3278)
    SVG 2 要求: 在适当的接口上提供事件监听器属性.
    决议: SVG 2 将把所有事件 监听器属性移动到 Element, 与 HTML 中类似的移动保持一致.
    目的: 与 HTML 保持一致.
    负责人: Cameron (ACTION-3283)
    SVG 2 要求: 在事件处理程序中引入 evt 作为 event 的别名.
    决议: 我们决定通过 在事件处理程序中引入 evt 作为 event 的别名来解决 ISSUE-2176.
    目的: 与 HTML 保持一致.
    负责人: Cameron (ACTION-3093)
    SVG 2 要求: 支持拖放功能.
    决议: SVG 2 可能要求拖放 功能, 我们将为此研究 HTML5 的功能.
    目的: 使 SVG 中的拖放更容易, 并与 HTML 保持一致.
    负责人: Erik (ACTION-3328)

    SVG 的以下方面受事件影响:

    SVG 1.1 中定义的多个事件, SVGLoad, SVGError 等, 已由UI EVENTS 和 HTML 中定义的等效 无前缀事件替代.

    应当有一些更现代的 SVG 事件使用示例, 例如触摸事件 (并引用触摸 事件规范). 设备方向事件可能也值得关注.

    下表列出由本规范定义的事件, 或者与定义这些事件的规范相比 具有进一步要求或说明的事件.

    第一列中的事件名称是 在 SVG 的动画元素中用于 定义可开始或结束动画的事件的名称. 第二列中的UI 事件名称是 定义 DOM 事件监听器时使用的名称 ([DOM], 第 3.6 节).

    对于表中未列出的事件, 例如 HTML 或 UI Events 中引入的事件, 相应的事件类型是在 SVG 的动画 元素中使用的名称.

    表中关于给定类型事件是否 冒泡或可取消的要求仅适用于由用户代理创建并 派发的事件. 从脚本创建的这些类型的事件 可以通过 Document 接口上的 createEvent 方法创建, 并可使用 initEvent 方法使其冒泡 或可取消.

    事件名称和描述 UI 事件名称 事件类别 事件属性名称

    load

    load 事件只会派发给结构外部元素以及 Window, 当 相应外部资源加载完成时. 请注意, 由于它与 关系中的 Window 相关, ‘svg’ 元素上的 load 事件仅在 文档中的所有资源 都已完全加载后派发.

    结构外部元素上的 load 事件和 error 事件 是 相互排斥的, 处理相关元素时 只能派发其中一个事件.

    load 事件不冒泡且不可取消.

    在以前的 SVG 规范中, load 事件 称为 SVGLoad, 并且可以在 解析元素后立即派发, 即使相关资源尚未 完全加载.

    (相同) 无 onload

    unload

    仅适用于最外层 svg 元素. unload 事件在 DOM 实现从窗口或框架中移除文档 时发生.

    unload 事件不冒泡且不可取消.

    (相同) 无 onunload

    error

    error 事件在 结构外部元素未 正确加载 或脚本执行期间发生错误时发生 .

    error 事件会冒泡但不可取消.

    (相同) 无 onerror

    beginEvent

    在动画元素开始时发生. 有关详细信息, 请参阅 SMIL Animation 规范中的 Interface TimeEvent 描述.

    无 无 onbegin

    endEvent

    在动画元素结束时发生. 有关详细信息, 请参阅 SMIL Animation 规范中的 Interface TimeEvent 描述.

    无 无 onend

    repeatEvent

    在动画元素重复时发生. 它会在 第一次迭代之后每次元素重复时触发. 有关详细信息, 请参阅 SMIL Animation 规范中的 Interface TimeEvent 描述.

    无 无 onrepeat

    有关传递给 UI Events 事件类型的事件监听器的 参数详情, 可在 ([uievents]) 和 ([DOM]) 规范中找到. 对于其他事件类型, 传递给事件监听器的参数 在本规范其他位置描述.

    同样, 用于事件值定时 说明符的 动画元素 ‘begin’ 和 ‘end’ 属性, 只有在响应派发给相关元素的 "bubbling" 和 "at target" 阶段事件时才解析为具体时间.

    15.2.1. 与 UI Events 的关系

    SVG DOM 与其中定义的所有接口以及 所有事件类型兼容, UI Events, 以及 Clipboard API and events 中定义的事件类型 ([uievents], [clipboard-apis]).

    SVG 命名空间中的所有元素都支持 这些事件的事件属性; 匹配的 IDL 特性通过 GlobalEventHandlers mixin 包含在基础 SVGElement 接口中 .

    作为 SVG DOM 支持的一部分, 符合要求的 SVG 软件 必须支持这些规范中定义的所有 (未弃用, 未过时)事件类型 , 前提是相关事件可能在该软件的使用场景中发生. 不支持用户交互的 SVG 软件 仍应实现无需交互即可触发的事件支持, 例如 load 和 error 事件.

    SVG 动画元素 (定义于 SVG Animations Level 2 规范) 支持额外的事件和事件属性. 以下事件类型由于动画中的状态 变化而触发.

    这些动画事件的事件属性对 其他元素没有影响.

    15.3. 用户界面事件

    在支持交互性的用户代理中, 作者通常 会定义 SVG 文档, 使其能够响应 用户界面事件. 可能的用户事件集合 包括指针事件, 键盘事件和文档事件.

    响应用户界面 (UI) 事件时, 作者可能 启动动画, 跳转到另一个 Web 页面, 突出显示文档的一部分 (例如更改 指针下方图形元素的颜色), 启动 "roll-over" (例如使一些先前隐藏的图形 元素出现在指针附近)或启动一个 与远程数据库通信的脚本.

    15.4. 指针事件

    由于用户在 指针设备上执行操作而发生的用户界面事件称为指针事件.

    许多系统支持鼠标或 轨迹球等指针设备. 在使用鼠标的系统上, 指针事件包括 鼠标移动和鼠标点击等操作. 在 使用不同指针设备的系统上, 指针设备通常 通过提供等效用户操作的机制来模拟鼠标行为 , 例如提供一个按下后 等效于鼠标点击的按钮.

    对于每个指针事件, SVG 用户代理确定 给定指针事件的目标元素. 目标 元素是在事件发生时其相关 图形内容位于指针下方的最上层图形元素 . (有关 如何确定元素的相关图形 内容是否位于指针下方, 以及在何种情况下 该图形元素可以成为指针 事件的目标元素, 请参阅特性 pointer-events 的描述.) 当元素未显示时 (即该元素 或其祖先之一的 display 特性 值为 none), 该元素不能成为 指针事件的目标.

    如果指针事件存在目标元素, 则 事件根据正常的 事件流 派发到该元素 ([uievents], 第 3.1 节). 对于由 ‘use’ 元素或通过脚本创建的影子树, 事件必须遵循 派发 事件 [dom]

    如果指针事件不存在目标元素, 则忽略该事件.

    15.5. 用户界面事件的命中测试和处理顺序

    命中测试
    确定指针是否与给定 图形元素相交的过程. 命中测试用于确定将鼠标 事件派发到哪个元素, 这可能响应用户 移动指针设备, 或响应文档中元素的位置, 形状和 其他属性变化而进行. 命中测试也称为 命中检测或拾取. 另请参阅 pointer-events 特性的定义.

    指针设备与元素或区域的交互具有两个不同方面:

    1. 命中测试, 用于确定指针事件 (例如鼠标移动或鼠标点击)是否发生在 元素的交互区域内, 以及后续的 DOM 事件流;
    2. 与任何相关元素关联的操作的功能处理.

    15.5.1. 命中测试

    确定指针事件是否产生肯定的命中测试 取决于指针的位置, 图形元素的大小和形状, 以及元素上 pointer-events 特性的计算值. 下方 pointer-events 特性的定义描述给定类型图形元素中对指针 事件敏感的精确区域.

    请注意, ‘svg’ 元素 不是图形元素, 并且在 符合要求的 SVG 独立文件中, 最外层 svg 元素永远不会成为指针 事件的目标, 尽管事件可以冒泡到此元素. 如果指针事件没有在 图形元素上产生肯定的命中测试, 则它应触发任何用户代理特定的 窗口 行为, 例如显示上下文菜单.

    本规范未定义通过引用 或包含嵌入另一个文档中的 SVG 图像之 最外层 svg 元素上的指针事件行为, 例如嵌入 HTML 文档中的最外层 svg 元素 是否拦截鼠标点击事件; 未来规范 可能定义此行为, 但就本规范而言, 该行为 由实现决定.

    15.5.2. 事件处理

    作为用户界面事件目标的元素可能具有 特定交互行为, 具体取决于元素类型以及 它是否具有显式关联的交互, 例如脚本事件 监听器, CSS 伪类匹配或 使用基于事件定时的声明式动画. 在派发 DOM 事件后, 针对给定目标元素处理 用户界面事件的算法和顺序如下:

    1. 如果注册在此元素上的事件处理程序调用 preventDefault() DOM 方法, 则不再对此元素执行进一步处理, 并且 事件遵循事件派发和 DOM 事件流 处理 ([uievents]);
    2. 如果元素有关联的标题或描述, 例如 ‘title’ 元素, 并且用户代理支持显示 此类信息 (例如通过工具提示或状态栏消息), 则应根据指针事件类型 适当地显示该信息;
    3. 如果元素匹配任何与 指针事件类型相适应的相关动态 伪类选择器 , 例如 [CSS2] 第 5.11 节中描述的 :hover, :active 或 :focus, 则应用相关类 特性;
    4. 如果元素和事件类型与 通过使用 event-value 定时 说明符激活或取消声明式动画相关联, 则必须解析任何相应的实例时间, 并且必须执行 此实例时间解析产生的任何后续 操作 (例如立即启动 或停止动画);
    5. 如果元素是超链接 (例如, 它是 ‘a’ 元素的后代元素), 并且指针事件是激活该超链接的类型 (例如 通过鼠标点击), 而且超链接遍历改变了内容的上下文 (例如打开不同文档, 或通过移动到同一文档的另一部分 将指针移离此 元素), 则不再对此元素执行进一步 处理;
    6. 如果元素是文本内容元素, 且事件类型 是 用户代理识别为文本选择操作一部分的类型 (例如, 鼠标点击并拖动或双击), 则执行 文本选择算法;
    7. 如果事件类型是用户代理与调用 特殊用户界面控件相关联的类型 (例如右键点击或命令点击 调用上下文菜单), 则用户代理应调用此类用户代理特定 行为, 例如显示上下文菜单.

    15.6. ‘pointer-events’ 特性

    在不同情况下, 作者可能希望控制 特定图形元素在什么条件下可以成为 指针事件的目标. 例如, 作者可能 希望仅当指针位于给定形状的描边周边上时 才让该元素接收指针事件. 在 其他情况下, 作者可能希望给定元素在所有情况下都忽略 指针事件, 以使位于给定元素下方的图形 元素成为 指针事件的目标.

    遮罩和裁剪对于 指针事件具有不同影响. 裁剪路径是 几何边界, 给定点显然位于该 边界内部或外部; 因此, 指针事件必须在被裁剪元素的已渲染区域上正常捕获, 但不得在被裁剪掉的区域上捕获, 如 裁剪路径定义中所述. 相比之下, 遮罩不是二元转换, 而是像素操作, 对完全透明和几乎但并非完全透明采用不同 行为可能显得令人困惑且武断; 因此, 对于应用了遮罩的元素, 即使在遮罩变为零 不透明度的区域中也仍必须捕获指针事件. 如果作者希望实现 遮罩透明部分允许指针事件穿透到下方元素的效果, 可以组合使用 遮罩和裁剪.

    filter 特性 对指针事件 处理没有影响, 并且在此上下文中必须视为未指定 filter .

    例如, 假设一个圆具有 stroke red (即轮廓为纯红色)以及 fill none (即 内部未 绘制), 并直接渲染在具有 fill blue 的矩形之上. 作者可能希望仅当指针位于 圆的周边上时圆才成为指针事件的目标 . 当指针位于圆内部时, 作者 可能希望底层矩形成为指针 事件的目标元素.

    pointer-events 特性指定 给定元素在什么情况下可以成为指针事件的目标元素 . 它会影响处理以下内容的 情况:

    名称: pointer-events
    值: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none
    初始值: auto
    适用于: 容器元素, 图形元素和 ‘use’
    继承: 是
    百分比: N/A
    媒体: 视觉
    计算值: 与指定值相同
    动画类型: 离散
    auto
    默认行为, 与 visiblePainted 相同.
    bounding-box
    当指针位于元素的 边界框上时, 给定元素可以成为指针事件的目标元素.
    visiblePainted
    当 visibility 特性设置为 visible, 且指针位于 "已绘制"区域上时, 给定元素可以成为指针事件的目标元素. 如果指针位于 元素内部 (即填充)并且 fill 特性的实际值 不是 none, 或者 指针位于元素周边 (即描边)并且 stroke 特性设置为 none 以外的值, 则指针位于已绘制区域.
    visibleFill
    当 visibility 特性设置为 visible, 且 指针位于元素内部 (即填充)时, 给定元素可以成为指针事件的目标元素. fill 特性的值不会影响事件 处理.
    visibleStroke
    当 visibility 特性设置为 visible 且指针位于元素周边 (即描边)时, 给定元素可以成为指针事件的目标元素. stroke 特性的值不会影响 事件处理.
    visible
    当 visibility 特性设置为 visible 且指针位于元素内部 (即填充)或周边 (即描边)时, 给定元素可以成为指针事件的目标元素. fill 和 stroke 的值不会影响事件处理.
    painted
    当 指针位于"已绘制"区域时, 给定元素可以成为指针事件的目标元素. 如果 指针位于元素内部 (即填充)并且 fill 特性的实际值不是 none, 或者指针位于周边 (即 描边)并且 stroke 特性 的实际 值不是 none, 则指针位于已绘制区域. visibility 特性的值不会影响事件 处理.
    fill
    当 指针位于元素内部 (即填充)时, 给定元素可以成为指针事件的目标元素. fill 和 visibility 特性的值不会影响事件 处理.
    stroke
    当 指针位于元素周边 (即描边)时, 给定元素可以成为指针事件的目标元素. stroke 和 visibility 特性的值不会影响 事件处理.
    all
    只要 指针位于元素内部 (即填充)或周边 (即描边), 给定元素就可以成为指针事件的目标元素. fill, stroke 和 visibility 特性的值不会影响事件 处理.
    none
    给定元素不接收指针事件.

    对于文本元素, 命中测试基于字符单元执行:

    对于光栅图像, 命中测试基于 整个图像执行 (即图像的矩形区域 决定图像是否接收 事件):

    对于 ‘foreignObject’ 元素, 命中测试 在元素的矩形 区域, 即对象边界框上执行. 参见上面对光栅 图像的处理. 用户代理还可以允许 ‘foreignObject’ 元素的外部内容也成为命中测试的目标.

    特性 opacity, fill-opacity, stroke-opacity, fill 和 stroke 的值不会影响事件处理.

    15.7. 焦点

    SVG 使用与 HTML 相同的焦点 模型, 并按本节所述针对 SVG 进行修改. 每个文档中同一时间最多只有一个元素获得焦点; 如果文档整体具有系统焦点, 此元素成为所有键盘事件的目标.

    当元素获得焦点时, 该元素匹配 CSS :focus 伪类. 当焦点因来自键盘或其他非指针设备的用户输入事件而改变时, 交互式用户代理必须以可视方式指示焦点 (通常使用轮廓) , 并且可以始终指示焦点. 作者可以使用 :focus 伪类 将视觉指示替换为更适合图形的指示 (例如形状上的描边), 但不应使用它完全移除焦点的视觉指示.

    以下 SVG 元素在交互式文档中是可聚焦的 . 此类元素在use 元素影子树中的任何实例 也可聚焦. 就 HTML 焦点模型而言, 交互式用户代理必须将它们视为 可聚焦区域, 其tabindex 焦点标志应设置:

    对于用户代理提供的控件, 元素可以具有多个可聚焦区域, 每个子控件对应一个.

    此外, 所有作为有效链接的 ‘a’ 元素都是可聚焦的, 并且其tabindex 焦点标志必须设置, 除非用户代理通常提供替代的 键盘链接遍历方法.

    为了与使用 SVG Tiny 1.2 focusable 属性的内容兼容, 用户代理应将该属性值为 true 的元素视为可聚焦. 在新内容中, 作者应省略 focusable 属性, 或仅将其与相应的 tabindex 值 0 结合使用.

    用户代理可以将其他元素视为可聚焦, 尤其是在键盘交互是唯一或主要用户输入方式时. 特别是, 用户代理可以支持使用键盘焦点 将 ‘title’ 元素文本显示为工具提示, 并且可以允许焦点到达已分配 鼠标, 指针或焦点事件监听器的元素. 作者不应依赖此行为; 所有交互式元素都应直接支持键盘交互.

    顺序焦点次序由所有可聚焦元素集合生成, 处理 SVG 元素上的 ‘tabindex’ 属性 的方式 与HTML 元素上的 tabindex 属性相同. use 元素影子树中的内容 会插入焦点次序中, 就像它是 ‘use’ 元素的子内容一样.

    未渲染元素永远不能获得焦点, 无论 ‘tabindex’ 属性的值如何, 如果脚本以编程方式将焦点分配给未渲染 或其他不可聚焦元素, 聚焦调用会中止. 但请注意, 不可见或不在屏幕上的元素 仍可能是已渲染的.

    当用户代理支持 SVG 文档的滚动或平移, 且焦点移动到当前位于 SVG 视口之外的元素时, 用户代理应滚动或平移文档, 直到获得焦点的元素位于 SVG 视口内.

    与 HTML 中一样, 一个可聚焦但没有定义 激活行为的 SVG 元素 具有一个什么也不做的激活行为 (除非脚本专门响应它).

    这意味着一个仅因为其 ‘tabindex’ 属性而可聚焦的元素 会响应非鼠标激活而触发 click 事件 (例如当元素具有焦点时按下 "enter" 键).

    对于包含内联 HTML 和 SVG 混合内容的文档, 焦点作为整个文档统一处理 (具有合并的顺序焦点次序), 而不是将每个内联 SVG 或 HTML 片段作为独立子文档.

    例如, 在以下文档中, 按 Tab 将按该顺序在 元素 A, B 和 C 之间循环焦点.

    <!DOCTYPE html>
    <button id="A" tabindex="1">第一项</button>
    <button id="C" tabindex="2">第三项</button>
    <svg width="200" height="200">
      <text id="B" tabindex="1" x="100" y="100">第二项</text>
    </svg>

    请注意, SVG 元素没有与 HTML 的 accesskey 属性等效的属性.

    15.8. 事件属性

    事件属性
    事件属性的名称始终以 "on" 开头, 后跟其 所针对事件的名称. 它指定当给定类型的事件派发到指定该 属性的元素时要运行的一些脚本.

    对于用户代理支持的每个事件类型, SVG 都支持将其作为事件属性, 并遵循与 事件 处理程序内容属性 [HTML] 相同的要求. 事件属性可用于所有SVG 元素.

    事件属性的内容始终解释为 ECMAScript, 就像使用媒体类型 'application/ecmascript' 处理一样. [rfc2046][rfc4329]

    事件属性不是可动画的.

    实现者可以将事件属性的设置视为 在 EventTarget 上创建并注册一个 EventListener. 此类 事件监听器只在 "bubbling" 和 "at target" 阶段被调用, 就像 addEventListener 的 useCapture 参数指定为 false 一样. 此 EventListener 的行为方式与任何其他 可注册到 EventTarget 上的监听器相同.

    如果表示事件监听器的属性发生变化, 可以视为移除先前注册的 EventListener 并 注册一个新的监听器. 此外, 对于事件属性 相对于 EventTarget 上其他 EventListeners 接收事件的顺序不作任何 规定.

    在 ECMAScript 中, 建立事件监听器的一种方法是 定义一个函数并将该函数传递给 addEventListener 方法:

    function myAction1(evt) {
      // 处理事件
    }
    // ... 稍后 ...
    myElement.addEventListener("click", myAction1, false)
    

    在 ECMAScript 中, 事件属性的字符数据内容成为 响应该事件时调用的 ECMAScript 函数定义 . 与所有已注册的 ECMAScript 事件 监听器函数一样, 此函数接收一个 Event 对象作为 参数, Event 对象的名称为 evt. 例如, 可以写成:

    <rect onclick="MyClickHandler(evt)" .../>
    

    这会将 Event 对象 evt 传入 函数 MyClickHandler.

    15.8.1. 动画事件属性

    以下是动画事件 属性的定义. 这些属性可以指定在动画元素上.

    属性定义:

    名称 值 初始值 可动画
    onbegin, onend, onrepeat (见下文) (none) 否
    指定当相应事件的 "bubbling" 或 "at target" 阶段监听器在指定该属性的元素上触发时要执行的一些脚本 . 请参阅支持的事件表, 以确定这些事件属性各自对应哪个事件. 此属性的值没有限制.

    15.9. ‘script’ 元素

    SVG 2 要求: 考虑允许在 ‘script’ 上使用 async/defer.
    决议: SVG 2 将允许在 ‘script’ 上使用 async/defer.
    目的: 与 HTML 保持一致.
    负责人: Cameron (ACTION-3280)
    SVG 2 要求: 纳入 SVG Tiny 1.2 脚本处理模型.
    决议: SVG 2 将定义如何处理内联 可脚本化内容, 并以与 HTML5 兼容的方式处理
    目的: 使 HTML 和 SVG 中的脚本运行行为保持一致.
    负责人: Cameron (ACTION-3282)

    ‘script’ 元素 等效于 HTML 中的 ‘script’ 元素, 因此是放置脚本 (例如 ECMAScript)的位置. 在任何 ‘script’ 元素中定义的任何函数在 整个 当前文档范围内具有 "global" 作用域.

    脚本的文本内容永远不会直接渲染; ‘script’ 元素的 display 值 必须始终设置为 none, 由用户代理样式表设置, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性.

    在尝试执行 ‘script’ 元素之前, 必须检查 ‘type’ 的已解析媒体类型值. 如果 SVG 用户代理不支持该脚本语言, 则 ‘script’ 元素不得 执行.

    此示例定义一个函数 circle_click, 它由 ‘circle’ 元素上的 ‘onclick’ 事件 属性调用. 下方左侧的图形 是初始图像. 下方右侧的图形显示 点击圆之后的结果.

      <?xml version="1.0" standalone="no"?>
      <svg width="6cm" height="5cm" viewBox="0 0 600 500"
           xmlns="http://www.w3.org/2000/svg">
        <desc>示例 script01 - 从 onclick 事件调用 ECMAScript 函数
        </desc>
        <!-- 每次点击时更改半径的 ECMAScript -->
        <script type="application/ecmascript"> <![CDATA[
          function circle_click(evt) {
            var circle = evt.target;
            var currentRadius = circle.getAttribute("r");
            if (currentRadius == 100)
              circle.setAttribute("r", currentRadius*2);
            else
              circle.setAttribute("r", currentRadius*0.5);
          }
        ]]> </script>
    
        <!-- 用蓝线勾勒绘图区域 -->
        <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
    
        <!-- 对每个点击事件执行操作 -->
        <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
                fill="red"/>
    
        <text x="300" y="480"
              font-family="Verdana" font-size="35" text-anchor="middle">
    
          点击圆以更改其大小
        </text>
      </svg>
      
    演示 ‘onclick’ 事件 处理程序对 SVG 形状影响的示例.
    演示如何从 onclick 事件调用 ECMAScript 函数的示例 — 第一次点击之前 演示如何从 onclick 事件调用 ECMAScript 函数的示例 — 第一次点击之后

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

    ‘script’
    类别:
    永不渲染元素, 结构外部元素
    内容模型:
    字符数据.
    属性:
    DOM 接口:

    属性定义:

    名称 值 初始值 可动画
    crossorigin [ anonymous | use-credentials ]? (参见 HTML 对该属性的定义) 是

    crossorigin 属性是一个CORS 设置属性, 除非另有说明, 遵循与 HTML [HTML]中相同的处理规则.

    名称 值 初始值 可动画
    type (见下文) application/ecmascript 否
    标识给定 ‘script’ 元素的脚本语言. 该值 必须是有效的媒体类型, 根据 多用途互联网邮件扩展 (MIME) 第二部分 [rfc2046]. 如果未提供 ‘type’, 则 假定默认脚本 语言为 ECMAScript, 就像使用 ‘application/ecmascript’ 媒体类型处理一样.
    名称 值 初始值 可动画
    href URL [URL] (none) 否
    一个指向包含脚本代码的外部 资源的URL 引用. 请参阅为URL 引用属性 和 已弃用的 XLink 属性定义的通用处理.

    URL 会被处理并获取资源, 如链接一章中所述.

    15.10. DOM 接口

    15.10.1. SVGScriptElement 接口

    SVGScriptElement 对象表示 DOM 中的 ‘script’ 元素 .

    [Exposed=Window]
    interface SVGScriptElement : SVGElement {
      [Reflect] attribute DOMString type;
      attribute DOMString? crossOrigin;
    };
    
    SVGScriptElement includes SVGURIReference;

    crossOrigin IDL 属性反映 ‘crossorigin’ 内容 属性.


    第 16 章: 链接

    16.1. 引用

    16.1.1. 概述

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

    http://example.com/someDrawing.svg
    

    URL 还可以通过在 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 的非片段部分引用当前文档.
    data URL
    一个指向嵌入文档的 URL 引用, 该文档使用 "data" URL 方案 [rfc2397]指定. Data URL 引用既不是 外部文件引用, 也不是同文档 URL 引用.
    循环引用
    直接或间接引用 自身的 URL 引用被视为无效循环引用. 构成循环引用的条件取决于所引用资源的使用方式, 并可能包括对当前元素祖先的引用.
    未解析 引用
    仍在处理中的引用, 尚未导致错误或标识出资源.
    无效引用

    以下任一情况都是无效引用:

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

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

    16.1.3. URL 和 URI

    国际化资源标识符 (URL) 是统一资源标识符 (URI) 更 通用的 补充. URL 是由通用字符集 [UNICODE]中的字符组成的 序列 . URI 由限制严格得多的一组字符构成. 所有 URI 都已经是 符合要求的 URL. URL 到 URI 的映射由 URL 规范定义, 这意味着可以使用 URL 代替 URI 在 XML 文档中标识资源. 如果协议不直接支持 URL, 则可以将 URL 转换为 URI 以便在网络上解析.

    以前版本的 SVG 按照 XLink, 将 URL 引用类型 定义为 URI 或一串在应用特定转义过程后必须得到 URL 的字符 . 该转义过程在 XLink 1.0 规范 [xlink]以及 W3C XML Schema Part 2: Datatypes 规范 [xmlschema-2]中重复出现. 这种复制引入了错误和分歧的可能性, 但这样做是因为 URL 规范当时尚未标准化.

    在本规范中, 对于这个 "URI 或字符序列 加算法", 使用正确术语 URL, 而将 URL 转换为 URI 的转义方法 通过引用 URL 规范 [rfc3987]来定义, 该规范此后已成为 IETF Proposed Standard. 其他 W3C 规范预计 会随时间修订, 以删除这些重复的 转义过程描述并直接引用 URL.

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

    在 SVG 中, 两个元素之间的大多数结构关系 使用 ‘href’ 属性中的 URL 值指定.

    为描述链接关系, 本规范在属性和特性值中使用两种不同的数据类型: URL 和 <url>. 本章中的链接指南适用于使用任一语法指定的 URL.

    URL 数据类型是一个简单的 URL 字符串. 在 SVG 中, 两个元素之间的大多数结构关系 使用 ‘href’ 属性中的 URL 值指定.

    <url> 与 URL 不同, 表示一个 CSS url() 函数值. (有关更多详细信息, 参见 CSS Values and Units [css-values]). <url> 可用于呈现属性及其 相应的 CSS 特性 [css-values].

    URL 不是用于结构 关系目的的呈现属性的有效值. 任何非呈现属性 都不允许将 <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 用户代理只需在需要时处理 URL, 如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 <anything> (none) 否

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

    此信息的用途高度依赖于所执行的处理类型 . 例如, 它可用于使标题 可供视障用户使用的应用程序访问, 或创建链接表, 或显示当用户让鼠标指针悬停在 起始资源上时 出现的帮助文本.

    如果使用 ‘title’ 属性, 则它必须 位于 XLink 命名空间中. 请参阅 XML Linking Language (XLink) [xlink].

    使用已弃用的 XLink 属性 ‘xlink:href’ 或 ‘xlink:title’ 时, 必须显式提供 XLink 命名空间声明 [xml-names], 提供这种 XLink 命名空间声明的一种简单方式 是在使用 XLink 属性的内容的 ‘svg’ 元素上包含 XLink 命名空间的 ‘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 引用在处理产生无效引用 或标识出目标资源之前都是未解析的 . 结构外部元素的非呈现属性中的未解析引用会阻止 load 事件 触发. 用户代理可以对不是同文档 URL 引用的引用解析 设置时间限制, 超过该时间后, 引用被视为网络错误 (因此被视为无效引用).

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

    16.1.7.1. 生成绝对 URL

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

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

    如果 HTTP 等协议不直接支持 URL, 则用户代理必须按照 URL 规范 [rfc3987]第 3.1 节中的描述, 将 URL 转换为 URI.

    生成绝对 URL 后:

    如 CSS Values and Units 中所定义, 样式特性中的仅片段 URL 必须视为 同文档 URL 引用, 无论该特性声明在哪个文件中.

    16.1.7.2. 获取文档

    SVG 特性和属性可以引用其他文档. 处理此类 URL 时, 用户代理应按本节所述获取被引用文档, 以下情况除外:

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

    base

    请求的 origin 使用 与 HTML 相同的规则计算, 将 SVG ‘script’ 元素视为 HTML script 元素, 将 SVG ‘image’ 元素视为 HTML img 元素. default origin behaviour 必须设置为 taint.

    未来的 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’) 属性的有效目标元素类型 基于具有该属性的元素, 如下:

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

    对于允许引用目标元素或图像文件的引用 (例如 mask 特性), 用户代理必须标识目标元素并确定它是否为有效目标. 如果解析出的目标元素不是允许的元素类型, 则被引用资源是整个文档文件; 目标片段像其他图像一样用于处理该文件.

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

    SVG 提供一个 ‘a’ 元素, 用于表示链接 (也称为 超链接或Web 链接). 如果 ‘a’ 元素具有 ‘href’ 或 ‘xlink:href’ 属性, 则它形成链接; 没有这些属性时, ‘a’ 元素是链接的非活动占位符.

    SVG 1.1 根据 XLink 规范 ([XLink]) 定义链接, 使用 XLink 命名空间中定义的属性. SVG 2 使用默认命名空间中与 HTML 链接一致的另一组属性, 并弃用 XLink 属性.

    ‘a’ 元素可以 包含其父元素可以包含的任何元素, 但不能包含另一个 ‘a’ 元素; 图形和文本链接内容都使用同一个元素. 链接不得嵌套; 如果 ‘a’ 元素是另一个超链接元素的 后代 (无论该元素位于 SVG 命名空间还是其他命名空间), 用户代理必须忽略其 href 属性并将其视为非活动状态. 无效的 ‘a’ 元素仍必须 作为通用容器元素渲染.

    无效 嵌套链接的渲染存在风险, 并且可能会与有关 未知元素渲染的任何决定同步.

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

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

    示例 link01 为 一个椭圆分配链接.

    <?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>示例 link01 - 椭圆上的链接
      </desc>
      <rect x=".01" y=".01" width="4.98" height="2.98" 
            fill="none" stroke="blue"  stroke-width=".03"/>
      <a href="https://www.w3.org">
        <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
                 fill="red" />
      </a>
    </svg>
    示例 link01 — 椭圆上的链接

    示例 link01

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

    如果上述 SVG 文件由同时支持 SVG 和 HTML 的用户代理查看, 则点击椭圆将使当前窗口 或框架替换为 W3C 主页.

    ‘a’
    类别:
    容器元素, 可渲染元素
    内容模型:
    描述性内容, 加上父元素内容模型允许的任何元素或文本, 但不能包含 另一个 a 元素. 如果父元素是 switch 元素, 则使用最近的 非 switch 祖先的内容模型.
    属性:
    DOM 接口:

    属性定义:

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

    当结束资源存在多个可能目标时应使用此属性, 例如当父文档嵌入 HTML 或 XHTML 文档中, 或使用选项卡式浏览器查看时. 此属性指定 激活链接时 文档应打开到的浏览上下文名称 (例如浏览器选项卡或 (X)HTML iframe 或 object 元素):

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

    浏览上下文和浏览上下文之间导航操作的 安全限制的规范性定义 位于 HTML [HTML], 特别是 加载 Web 页面的 章节.

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

    值 '_new' 不是 target 的合法值. 使用 '_blank' 在新选项卡/窗口中打开文档.

    名称 值 初始值 可动画
    download 任何值 (如果非空, 该值表示建议的文件名) (none) 否
    ping 以空格分隔的有效非空 URL 令牌 [HTML] (none) 否
    rel 以空格分隔的关键字令牌 [HTML] (none) 否
    hreflang BCP 47 语言标签字符串 [HTML] (none) 否
    type MIME 类型字符串 [HTML] (none) 否
    referrerpolicy referrer policy 字符串 [REFERRERPOLICY] (none) 否
    这些属性进一步描述目标资源 及其与当前文档的关系. 允许的值及其含义与 HTML 中 a 元素的定义相同.

    SVG 工作组正在等待 HTML 规范澄清这些属性的处理模型和 算法. 这些属性应遵循HTML 规范中指定的 定义和算法.

    有关正在进行的澄清工作的更多详细信息, 请参阅

    关于 HTML A 元素处理 模型和算法的 HTML 规范 issue.

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

    由于 SVG 内容通常表示某物的图片或绘图 , 一个常见需求是链接到文档的特定 视图, 其中视图指示 初始变换, 以便呈现文档特定部分的 特写.

    16.3.1. SVG 片段标识符

    SVG 2 要求: 合并 SVG 1.1 SE 文本和 SVG Tiny 1.2 中关于片段标识符链接遍历的文本 并添加媒体片段.
    决议: SVG 2 将具有媒体片段 标识符.
    目的: 与 Media Fragments URI 保持一致.
    负责人: Cyril (ACTION-3442)

    要链接到 SVG 文档的特定视图, 带片段 标识符的 URL 引用需要是格式正确的SVG 片段标识符. SVG 片段标识符定义 用于定位 MIME 媒体类型 "image/svg+xml" 资源的 URL 中 "selector" 或 "fragment identifier" 部分的含义.

    SVG 片段标识符可以采用以下形式:

    16.3.2. SVG 片段标识符 定义

    SVG 片段标识符定义如下:

    SVGFragmentIdentifier ::= BareName *( "&" timesegment ) |
                              SVGViewSpec *( "&" timesegment ) |
                              spacesegment *( "&" timesegment ) |
                              timesegment *( "&" spacesegment )
    
    BareName ::= XML_Name
    SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
    SVGViewAttributes ::= SVGViewAttribute |
                          SVGViewAttribute ';' SVGViewAttributes
    
    SVGViewAttribute ::= viewBoxSpec |
                         preserveAspectRatioSpec |
                         transformSpec
    viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
    preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
    transformSpec ::= 'transform(' TransformParams ')'
    

    其中:

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

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

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

    四种 SVGViewAttribute 可以 以任意顺序出现, 但每种类型在格式正确的 SVGViewSpec 中最多只能出现一次.

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

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

    ‘view’ 元素定义如下:

    ‘view’
    类别:
    无
    内容模型:
    以下任意数量的元素, 顺序不限:script, style
    属性:
    DOM 接口:

    我们已决定移除 viewTarget 属性.

    决议: Paris 2015 F2F 第 3 天.

    负责人: BogdanBrinza.

    16.4. DOM 接口

    16.4.1. SVGAElement 接口

    SVGElement 对象表示 DOM 中的 ‘a’ 元素.

    [Exposed=Window]
    interface SVGAElement : SVGGraphicsElement {
      [Reflect, SameObject] readonly attribute SVGAnimatedString target;
      [Reflect] attribute DOMString download;
      [Reflect] attribute USVString ping;
      [Reflect] attribute DOMString rel;
      [Reflect="rel", SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
      [Reflect] attribute DOMString hreflang;
      [Reflect] attribute DOMString type;
    
      attribute DOMString referrerPolicy;
    };
    
    SVGAElement includes SVGURIReference;
    SVGAElement includes HyperlinkElementUtils;

    设置 url 算法对于 SVGAElement:

    1. 将此元素的 url 设置为 null.
    2. 令 url 为 failure.
    3. 如果此元素的 ‘href’ 内容属性存在:
      1. 将 url 设置为给定此元素的 ‘href’ 内容属性 值, 相对于此元素的节点 文档, 对 URL 执行编码解析的结果 .
    4. 否则, 如果此元素的 ‘xlink:href’ 内容属性 存在:
      1. 将 url 设置为给定此元素的 ‘xlink:href’ 内容 属性值, 相对于此元素的节点 文档, 对 URL 执行编码解析的结果 .
    5. 如果 url 不是 failure, 则将此元素的 url 设置为 url.

    要为 更新 href 一个 SVGAElement:

    1. 如果此元素的 ‘xlink:href’ 内容属性存在:
      1. 将元素的 ‘xlink:href’ 内容属性值设置为 元素的 url, 并进行序列化.
    2. 否则, 将元素的 ‘href’ 内容属性值设置为 元素的 url, 并进行序列化.

    referrerPolicy IDL 属性 反映 ‘referrerpolicy’ 内容 属性, 并仅限于 已知值.

    16.4.2. SVGViewElement 接口

    SVGViewElement 对象表示 DOM 中的 ‘view’ 元素 .

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

    附录 A: IDL 定义

    本附录是规范性的.

    本附录包含 SVG 文档对象 模型定义的完整 Web IDL.

    [Exposed=Window]
    interface SVGElement : Element {
    
      [SameObject] readonly attribute SVGAnimatedString className;
    
      readonly attribute SVGSVGElement? ownerSVGElement;
      readonly attribute SVGElement? viewportElement;
    };
    
    SVGElement includes GlobalEventHandlers;
    SVGElement includes HTMLOrSVGOrMathMLElement;
    
    dictionary SVGBoundingBoxOptions {
      boolean fill = true;
      boolean stroke = false;
      boolean markers = false;
      boolean clipped = false;
    };
    
    [Exposed=Window]
    interface SVGGraphicsElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedTransformList transform;
    
      SVGRect getBBox(optional SVGBoundingBoxOptions options = {});
      SVGMatrix? getCTM();
      SVGMatrix? getScreenCTM();
    };
    
    SVGGraphicsElement includes SVGTests;
    
    [Exposed=Window]
    interface SVGGeometryElement : SVGGraphicsElement {
      [SameObject] readonly attribute SVGAnimatedNumber pathLength;
    
      boolean isPointInFill(optional DOMPointInit point = {});
      boolean isPointInStroke(optional DOMPointInit point = {});
      float getTotalLength();
      SVGPoint getPointAtLength(float distance);
    };
    
    [Exposed=Window]
    interface SVGNumber {
      attribute float value;
    };
    
    [Exposed=Window]
    interface SVGLength {
    
      // 长度单位类型
      const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
      const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
      const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
      const unsigned short SVG_LENGTHTYPE_EMS = 3;
      const unsigned short SVG_LENGTHTYPE_EXS = 4;
      const unsigned short SVG_LENGTHTYPE_PX = 5;
      const unsigned short SVG_LENGTHTYPE_CM = 6;
      const unsigned short SVG_LENGTHTYPE_MM = 7;
      const unsigned short SVG_LENGTHTYPE_IN = 8;
      const unsigned short SVG_LENGTHTYPE_PT = 9;
      const unsigned short SVG_LENGTHTYPE_PC = 10;
    
      readonly attribute unsigned short unitType;
               attribute float value;
               attribute float valueInSpecifiedUnits;
               attribute DOMString valueAsString;
    
      undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
      undefined convertToSpecifiedUnits(unsigned short unitType);
    };
    
    [Exposed=Window]
    interface SVGAngle {
    
      // 角度单位类型
      const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
      const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
      const unsigned short SVG_ANGLETYPE_DEG = 2;
      const unsigned short SVG_ANGLETYPE_RAD = 3;
      const unsigned short SVG_ANGLETYPE_GRAD = 4;
    
      readonly attribute unsigned short unitType;
               attribute float value;
               attribute float valueInSpecifiedUnits;
               attribute DOMString valueAsString;
    
      undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
      undefined convertToSpecifiedUnits(unsigned short unitType);
    };
    
    [Exposed=Window]
    interface SVGNumberList {
    
      readonly attribute unsigned long length;
      readonly attribute unsigned long numberOfItems;
    
      undefined clear();
      SVGNumber initialize(SVGNumber newItem);
      getter SVGNumber getItem(unsigned long index);
      SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
      SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
      SVGNumber removeItem(unsigned long index);
      SVGNumber appendItem(SVGNumber newItem);
      setter undefined (unsigned long index, SVGNumber newItem);
    };
    
    [Exposed=Window]
    interface SVGLengthList {
    
      readonly attribute unsigned long length;
      readonly attribute unsigned long numberOfItems;
    
      undefined clear();
      SVGLength initialize(SVGLength newItem);
      getter SVGLength getItem(unsigned long index);
      SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
      SVGLength replaceItem(SVGLength newItem, unsigned long index);
      SVGLength removeItem(unsigned long index);
      SVGLength appendItem(SVGLength newItem);
      setter undefined (unsigned long index, SVGLength newItem);
    };
    
    [Exposed=Window]
    interface SVGStringList {
    
      readonly attribute unsigned long length;
      readonly attribute unsigned long numberOfItems;
    
      undefined clear();
      DOMString initialize(DOMString newItem);
      getter DOMString getItem(unsigned long index);
      DOMString insertItemBefore(DOMString newItem, unsigned long index);
      DOMString replaceItem(DOMString newItem, unsigned long index);
      DOMString removeItem(unsigned long index);
      DOMString appendItem(DOMString newItem);
      setter undefined (unsigned long index, DOMString newItem);
    };
    
    [Exposed=Window]
    interface SVGAnimatedBoolean {
               attribute boolean baseVal;
      readonly attribute boolean animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedEnumeration {
               attribute unsigned short baseVal;
      readonly attribute unsigned short animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedInteger {
               attribute long baseVal;
      readonly attribute long animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedNumber {
               attribute float baseVal;
      readonly attribute float animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedLength {
      [SameObject] readonly attribute SVGLength baseVal;
      [SameObject] readonly attribute SVGLength animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedAngle {
      [SameObject] readonly attribute SVGAngle baseVal;
      [SameObject] readonly attribute SVGAngle animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedString {
               attribute (DOMString or TrustedScriptURL) baseVal;
      readonly attribute DOMString animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedRect {
      [SameObject] readonly attribute SVGRect baseVal;
      [SameObject] readonly attribute SVGRect animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedNumberList {
      [SameObject] readonly attribute SVGNumberList baseVal;
      [SameObject] readonly attribute SVGNumberList animVal;
    };
    
    [Exposed=Window]
    interface SVGAnimatedLengthList {
      [SameObject] readonly attribute SVGLengthList baseVal;
      [SameObject] readonly attribute SVGLengthList animVal;
    };
    
    [Exposed=Window]
    interface SVGUnitTypes {
      // 单位类型
      const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
      const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
      const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
    };
    
    interface mixin SVGTests {
      [SameObject] readonly attribute SVGStringList requiredExtensions;
      [SameObject] readonly attribute SVGStringList systemLanguage;
    };
    
    interface mixin SVGFitToViewBox {
      [SameObject] readonly attribute SVGAnimatedRect viewBox;
      [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
    };
    
    interface mixin SVGURIReference {
      [SameObject] readonly attribute SVGAnimatedString href;
    };
    
    partial interface Document {
      readonly attribute SVGSVGElement? rootElement;
    };
    
    [Exposed=Window]
    interface SVGSVGElement : SVGGraphicsElement {
    
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    
      attribute float currentScale;
      [SameObject] readonly attribute SVGPoint currentTranslate;
    
      NodeList getIntersectionList(SVGRect rect, SVGElement? referenceElement);
      NodeList getEnclosureList(SVGRect rect, SVGElement? referenceElement);
      boolean checkIntersection(SVGElement element, SVGRect rect);
      boolean checkEnclosure(SVGElement element, SVGRect rect);
    
      undefined deselectAll();
    
      [NewObject] SVGNumber createSVGNumber();
      [NewObject] SVGLength createSVGLength();
      [NewObject] SVGAngle createSVGAngle();
      [NewObject] SVGPoint createSVGPoint();
      [NewObject] SVGMatrix createSVGMatrix();
      [NewObject] SVGRect createSVGRect();
      [NewObject] SVGTransform createSVGTransform();
      [NewObject] SVGTransform createSVGTransformFromMatrix(optional DOMMatrix2DInit matrix = {});
    
      Element? getElementById(DOMString elementId);
    
      // 调用时没有效果的已弃用方法,
      // 但出于兼容性原因予以保留.
      unsigned long suspendRedraw(unsigned long maxWaitMilliseconds);
      undefined unsuspendRedraw(unsigned long suspendHandleID);
      undefined unsuspendRedrawAll();
      undefined forceRedraw();
    };
    
    SVGSVGElement includes SVGFitToViewBox;
    SVGSVGElement includes WindowEventHandlers;
    
    [Exposed=Window]
    interface SVGGElement : SVGGraphicsElement {
    };
    
    [Exposed=Window]
    interface SVGDefsElement : SVGGraphicsElement {
    };
    
    [Exposed=Window]
    interface SVGDescElement : SVGElement {
    };
    
    [Exposed=Window]
    interface SVGMetadataElement : SVGElement {
    };
    
    [Exposed=Window]
    interface SVGTitleElement : SVGElement {
    };
    
    [Exposed=Window]
    interface SVGSymbolElement : SVGGraphicsElement {
    };
    
    SVGSymbolElement includes SVGFitToViewBox;
    
    [Exposed=Window]
    interface SVGUseElement : SVGGraphicsElement {
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    };
    
    SVGUseElement includes SVGURIReference;
    
    [Exposed=Window]
    interface SVGUseElementShadowRoot : ShadowRoot {
    };
    
    [Exposed=Window]
    interface ShadowAnimation : Animation {
      constructor(Animation source, (Element or CSSPseudoElement) newTarget);
      [SameObject] readonly attribute Animation sourceAnimation;
    };
    
    [Exposed=Window]
    interface SVGSwitchElement : SVGGraphicsElement {
    };
    
    interface mixin GetSVGDocument {
      Document getSVGDocument();
    };
    
    [Exposed=Window]
    interface SVGStyleElement : SVGElement {
      [Reflect] attribute DOMString type;
      [Reflect] attribute DOMString media;
      [Reflect] attribute DOMString title;
      attribute boolean disabled;
    };
    
    SVGStyleElement includes LinkStyle;
    
    [Exposed=Window]
    interface SVGTransform {
    
      // 变换类型
      const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
      const unsigned short SVG_TRANSFORM_MATRIX = 1;
      const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
      const unsigned short SVG_TRANSFORM_SCALE = 3;
      const unsigned short SVG_TRANSFORM_ROTATE = 4;
      const unsigned short SVG_TRANSFORM_SKEWX = 5;
      const unsigned short SVG_TRANSFORM_SKEWY = 6;
    
      readonly attribute unsigned short type;
      [SameObject] readonly attribute SVGMatrix matrix;
      readonly attribute float angle;
    
      undefined setMatrix(optional DOMMatrix2DInit matrix = {});
      undefined setTranslate(float tx, float ty);
      undefined setScale(float sx, float sy);
      undefined setRotate(float angle, float cx, float cy);
      undefined setSkewX(float angle);
      undefined setSkewY(float angle);
    };
    
    [Exposed=Window]
    interface SVGTransformList {
    
      readonly attribute unsigned long length;
      readonly attribute unsigned long numberOfItems;
    
      undefined clear();
      SVGTransform initialize(SVGTransform newItem);
      getter SVGTransform getItem(unsigned long index);
      SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
      SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
      SVGTransform removeItem(unsigned long index);
      SVGTransform appendItem(SVGTransform newItem);
      setter undefined (unsigned long index, SVGTransform newItem);
    
      // 其他列表接口不共有的附加方法.
      SVGTransform createSVGTransformFromMatrix(optional DOMMatrix2DInit matrix = {});
      SVGTransform? consolidate();
    };
    
    [Exposed=Window]
    interface SVGAnimatedTransformList {
      [SameObject] readonly attribute SVGTransformList baseVal;
      [SameObject] readonly attribute SVGTransformList animVal;
    };
    
    [Exposed=Window]
    interface SVGPreserveAspectRatio {
    
      // 对齐类型
      const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
      const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
      const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
    
      // Meet-or-slice 类型
      const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
      const unsigned short SVG_MEETORSLICE_MEET = 1;
      const unsigned short SVG_MEETORSLICE_SLICE = 2;
    
      attribute unsigned short align;
      attribute unsigned short meetOrSlice;
    };
    
    [Exposed=Window]
    interface SVGAnimatedPreserveAspectRatio {
      [SameObject] readonly attribute SVGPreserveAspectRatio baseVal;
      [SameObject] readonly attribute SVGPreserveAspectRatio animVal;
    };
    
    [Exposed=Window]
    interface SVGPathElement : SVGGeometryElement {
    };
    
    [Exposed=Window]
    interface SVGRectElement : SVGGeometryElement {
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
      [SameObject] readonly attribute SVGAnimatedLength rx;
      [SameObject] readonly attribute SVGAnimatedLength ry;
    };
    
    [Exposed=Window]
    interface SVGCircleElement : SVGGeometryElement {
      [SameObject] readonly attribute SVGAnimatedLength cx;
      [SameObject] readonly attribute SVGAnimatedLength cy;
      [SameObject] readonly attribute SVGAnimatedLength r;
    };
    
    [Exposed=Window]
    interface SVGEllipseElement : SVGGeometryElement {
      [SameObject] readonly attribute SVGAnimatedLength cx;
      [SameObject] readonly attribute SVGAnimatedLength cy;
      [SameObject] readonly attribute SVGAnimatedLength rx;
      [SameObject] readonly attribute SVGAnimatedLength ry;
    };
    
    [Exposed=Window]
    interface SVGLineElement : SVGGeometryElement {
      [SameObject] readonly attribute SVGAnimatedLength x1;
      [SameObject] readonly attribute SVGAnimatedLength y1;
      [SameObject] readonly attribute SVGAnimatedLength x2;
      [SameObject] readonly attribute SVGAnimatedLength y2;
    };
    
    interface mixin SVGAnimatedPoints {
      [SameObject] readonly attribute SVGPointList points;
      [SameObject] readonly attribute SVGPointList animatedPoints;
    };
    
    [Exposed=Window]
    interface SVGPointList {
    
      readonly attribute unsigned long length;
      readonly attribute unsigned long numberOfItems;
    
      undefined clear();
      SVGPoint initialize(SVGPoint newItem);
      getter SVGPoint getItem(unsigned long index);
      SVGPoint insertItemBefore(SVGPoint newItem, unsigned long index);
      SVGPoint replaceItem(SVGPoint newItem, unsigned long index);
      SVGPoint removeItem(unsigned long index);
      SVGPoint appendItem(SVGPoint newItem);
      setter undefined (unsigned long index, SVGPoint newItem);
    };
    
    [Exposed=Window]
    interface SVGPolylineElement : SVGGeometryElement {
    };
    
    SVGPolylineElement includes SVGAnimatedPoints;
    
    [Exposed=Window]
    interface SVGPolygonElement : SVGGeometryElement {
    };
    
    SVGPolygonElement includes SVGAnimatedPoints;
    
    [Exposed=Window]
    interface SVGTextContentElement : SVGGraphicsElement {
    
      // lengthAdjust 类型
      const unsigned short LENGTHADJUST_UNKNOWN = 0;
      const unsigned short LENGTHADJUST_SPACING = 1;
      const unsigned short LENGTHADJUST_SPACINGANDGLYPHS = 2;
    
      [SameObject] readonly attribute SVGAnimatedLength textLength;
      [SameObject] readonly attribute SVGAnimatedEnumeration lengthAdjust;
    
      long getNumberOfChars();
      float getComputedTextLength();
      float getSubStringLength(unsigned long charnum, unsigned long nchars);
      SVGPoint getStartPositionOfChar(unsigned long charnum);
      SVGPoint getEndPositionOfChar(unsigned long charnum);
      SVGRect getExtentOfChar(unsigned long charnum);
      float getRotationOfChar(unsigned long charnum);
      long getCharNumAtPosition(optional DOMPointInit point = {});
      undefined selectSubString(unsigned long charnum, unsigned long nchars);
    };
    
    [Exposed=Window]
    interface SVGTextPositioningElement : SVGTextContentElement {
      [SameObject] readonly attribute SVGAnimatedLengthList x;
      [SameObject] readonly attribute SVGAnimatedLengthList y;
      [SameObject] readonly attribute SVGAnimatedLengthList dx;
      [SameObject] readonly attribute SVGAnimatedLengthList dy;
      [SameObject] readonly attribute SVGAnimatedNumberList rotate;
    };
    
    [Exposed=Window]
    interface SVGTextElement : SVGTextPositioningElement {
    };
    
    [Exposed=Window]
    interface SVGTSpanElement : SVGTextPositioningElement {
    };
    
    [Exposed=Window]
    interface SVGTextPathElement : SVGTextContentElement {
    
      // textPath 方法类型
      const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0;
      const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1;
      const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2;
    
      // textPath 间距类型
      const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0;
      const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1;
      const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2;
    
      [SameObject] readonly attribute SVGAnimatedLength startOffset;
      [SameObject] readonly attribute SVGAnimatedEnumeration method;
      [SameObject] readonly attribute SVGAnimatedEnumeration spacing;
    };
    
    SVGTextPathElement includes SVGURIReference;
    
    [Exposed=Window]
    interface SVGImageElement : SVGGraphicsElement {
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
      [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
      attribute DOMString? crossOrigin;
    };
    
    SVGImageElement includes SVGURIReference;
    
    [Exposed=Window]
    interface SVGForeignObjectElement : SVGGraphicsElement {
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    };
    
    [Exposed=Window]
    interface SVGMarkerElement : SVGElement {
    
      // 标记单位类型
      const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
      const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
      const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;
    
      // 标记方向类型
      const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
      const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
      const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;
      const unsigned short SVG_MARKER_ORIENT_AUTO_START_REVERSE = 3;
    
      [SameObject] readonly attribute SVGAnimatedLength refX;
      [SameObject] readonly attribute SVGAnimatedLength refY;
      [SameObject] readonly attribute SVGAnimatedEnumeration markerUnits;
      [SameObject] readonly attribute SVGAnimatedLength markerWidth;
      [SameObject] readonly attribute SVGAnimatedLength markerHeight;
      [SameObject] readonly attribute SVGAnimatedEnumeration orientType;
      [SameObject] readonly attribute SVGAnimatedAngle orientAngle;
      attribute DOMString orient;
    
      undefined setOrientToAuto();
      undefined setOrientToAngle(SVGAngle angle);
    };
    
    SVGMarkerElement includes SVGFitToViewBox;
    
    [Exposed=Window]
    interface SVGGradientElement : SVGElement {
    
      // 扩展方法类型
      const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
      const unsigned short SVG_SPREADMETHOD_PAD = 1;
      const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
      const unsigned short SVG_SPREADMETHOD_REPEAT = 3;
    
      [SameObject] readonly attribute SVGAnimatedEnumeration gradientUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList gradientTransform;
      [SameObject] readonly attribute SVGAnimatedEnumeration spreadMethod;
    };
    
    SVGGradientElement includes SVGURIReference;
    
    
    [Exposed=Window]
    interface SVGLinearGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength x1;
      [SameObject] readonly attribute SVGAnimatedLength y1;
      [SameObject] readonly attribute SVGAnimatedLength x2;
      [SameObject] readonly attribute SVGAnimatedLength y2;
    };
    
    [Exposed=Window]
    interface SVGRadialGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength cx;
      [SameObject] readonly attribute SVGAnimatedLength cy;
      [SameObject] readonly attribute SVGAnimatedLength r;
      [SameObject] readonly attribute SVGAnimatedLength fx;
      [SameObject] readonly attribute SVGAnimatedLength fy;
      [SameObject] readonly attribute SVGAnimatedLength fr;
    };
    
    [Exposed=Window]
    interface SVGStopElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedNumber offset;
    };
    
    [Exposed=Window]
    interface SVGPatternElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedEnumeration patternUnits;
      [SameObject] readonly attribute SVGAnimatedEnumeration patternContentUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList patternTransform;
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    };
    
    SVGPatternElement includes SVGFitToViewBox;
    SVGPatternElement includes SVGURIReference;
    
    
    [Exposed=Window]
    interface SVGScriptElement : SVGElement {
      [Reflect] attribute DOMString type;
      attribute DOMString? crossOrigin;
    };
    
    SVGScriptElement includes SVGURIReference;
    
    [Exposed=Window]
    interface SVGAElement : SVGGraphicsElement {
      [Reflect, SameObject] readonly attribute SVGAnimatedString target;
      [Reflect] attribute DOMString download;
      [Reflect] attribute USVString ping;
      [Reflect] attribute DOMString rel;
      [Reflect="rel", SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
      [Reflect] attribute DOMString hreflang;
      [Reflect] attribute DOMString type;
    
      attribute DOMString referrerPolicy;
    };
    
    SVGAElement includes SVGURIReference;
    SVGAElement includes HyperlinkElementUtils;
    
    [Exposed=Window]
    interface SVGViewElement : SVGElement {};
    
    SVGViewElement includes SVGFitToViewBox;

    附录 B: 实现说明

    B.1. 介绍

    以下说明描述软件开发人员在将内容 转换为 SVG 语言功能所需格式或从这些格式转换内容时 可使用的算法和其他策略.

    B.2. 椭圆弧参数转换

    为与其他路径段表示法保持一致, SVG 路径中的弧根据曲线上的起点和终点定义.

    椭圆弧的这种参数化方式将称为 端点参数化. 端点参数化的一个 优点是它允许一种一致的路径语法, 其中所有路径命令都以新的 "当前点"坐标结束 .

    但是, 这并不是软件或数学中 描述弧几何形状的唯一方式. 本节描述另一种中心参数化方式, 以及如何在它与 SVG 的端点参数化方式之间进行转换.

    B.2.1. 椭圆弧端点语法

    SVG 路径命令所表示的椭圆弧 按顺序由以下参数描述:

    (x1, y1) 是路径上 当前点的绝对坐标, 由前一个路径命令的最后两个 参数获得.

    rx 和 ry 是椭圆的半径 (也称为其半长轴和 半短轴).

    φ 是从当前坐标 系统的 x 轴到椭圆 x 轴的角度.

    fA 是 大弧标志, 如果选择跨度小于或等于 180 度的弧, 则为 0 , 如果选择跨度大于 180 度的弧, 则为 1.

    fS 是 扫掠标志, 如果 从圆心到弧的连线沿角度减小方向扫掠, 则为 0, 如果它沿 角度增大方向扫掠, 则为 1.

    (x2, y2) 是 弧终点的绝对坐标.

    B.2.2. 参数化方式

    椭圆弧上的任意点 (x, y) 可以用以下二维矩阵方程描述:

    (公式 3.1)
    ( x y ) = ( cos ⁡ φ - sin ⁡ φ sin ⁡ φ cos ⁡ φ ) · ( r x ⁢ cos ⁡ θ r y ⁢ sin ⁡ θ ) + ( c x c y )
        x = rx*cos(θ)*cos(φ) - ry*sin(θ)*sin(φ) + cx
        y = rx*cos(θ)*sin(φ) + ry*sin(θ)*cos(φ) + cy
      

    (cx, cy) 是 椭圆圆心的坐标.

    rx 和 ry 是椭圆的半径 (也称为其半长轴和 半短轴).

    φ 是从当前坐标系统的 x 轴到椭圆 x 轴的角度 .

    θ 是点 (x, y) 所在弧周围的角度, 范围从:

    • θ1, 即在拉伸和 旋转操作之前椭圆弧的起始角.
    • θ2, 即在拉伸和 旋转操作之前椭圆弧的结束角.
    • Δθ, 即这两个 角之间的差.

    如果把椭圆看作一个先被 拉伸然后旋转的圆, 那么 θ1, θ2 和 Δθ 分别是在拉伸和旋转操作之前 弧的起始角, 结束角和扫掠角. 这产生另一种在图形 API 中常见的参数化方式, 称为中心 参数化. 在以下各节中, 将给出 中心参数化与端点参数化之间双向映射的 公式.

    B.2.3. 从中心转换为端点 参数化

    给定以下变量:

    cx cy rx ry φ θ1 Δθ

    任务是求:

    x1 y1 x2 y2 fA fS

    可以使用以下公式完成:

    x 1 y 1 = cos φ - sin φ sin φ cos φ ⋅ r x cos θ 1 r y sin θ 1 + c x c y
    (公式 4.1)
    x 2 y 2 = cos φ - sin φ sin φ cos φ ⋅ r x cos θ 1 + Δ θ r y sin θ 1 + Δ θ + c x c y
    (公式 4.2)
    f A = 1 if Δ θ > 180 ° 0 if Δ θ ≤ 180 °
    (公式 4.3)
    f S = 1 if Δ θ > 0 ° 0 if Δ θ < 0 °
    (公式 4.4)

    B.2.4. 从端点转换为中心 参数化

    给定以下变量:

    x1 y1 x2 y2 fA fS rx ry φ

    任务是求:

    cx cy θ1 Δθ

    经过一次平移后方程会简化, 该平移 将原点置于连接 (x1, y1) 与 (x2, y2) 的线段中点, 然后 旋转使坐标轴与椭圆轴对齐. 所有变换后的坐标都使用撇号表示. 它们作为 求所需中心参数化变量过程中的中间值 计算. 此过程包括 以下步骤:

    B.2.5. 校正超出范围的半径

    本节描述超出范围的 rx 和 ry 所需的数学调整, 如路径实现说明中所述. 从算法上看, 这些调整包括以下 步骤:

    B.3. 生成高精度 几何图形的说明

    本节是资料性的.

    SVG 的实数精度为 单精度. 处理需要表达超过单精度信息的技术数据的符合要求的 SVG 生成器, 例如地图和技术图纸, 建议遵循本节概述的流程, 以确保在符合要求的 SVG 查看器中一致显示.

    通过利用 生成 CTM 时必须至少使用双精度浮点数这一事实, 可以获得有效精度高于 单精度的呈现 (参见 符合要求的 SVG 查看器一节中的 CTM 生成处理). 利用这一点生成内容的步骤如下:

    1. 将内容拆分为图块, 使得 在每个图块内定位和确定每个对象大小所需的有效数字数量处于 单精度浮点数范围内. 此外, 在本说明中, 原始内容原本具有的坐标系统称为源空间.
    2. 为每个图块生成一个坐标变换矩阵, 以从 源空间变换到图块空间, 其中图块空间是以图块左上角 (0,0) 为原点的坐标系统. 变换矩阵的每个元素 都必须处于单精度范围内.
    3. 使用生成的坐标变换矩阵将每个图块的内容从源空间变换到图块空间 . 结果是每个对象的参数现在可以 用处于单精度浮点数范围内的有效数字表示.
    4. 对于每个图块, 生成一个用于 从图块空间转换到源空间的逆变换矩阵. 它用作下一 步中图块元素的 transform 属性.
    5. 在 SVG 中将每个图块安排为单独的用户坐标系统. 例如, 图块可以表示为 ‘g’ 元素, 并具有包含前一步生成的 变换矩阵的 transform 属性. 第三步生成的拆分图形将作为其子元素放置.
    示例 将大于一个图块的矢量图形拆分
    拆分前 拆分后
    示例 拆分前 示例 拆分后
    示例 提高有效数字精度
    步骤 1 : 拆分内容 步骤 5 : 使用较少有效数字和适当平移排列图块
    示例 将内容拆分为图块 示例 平移并分配拆分内容
    此示例使用用户坐标系统为七位数的图块提供八位 有效数字.

    附录 C: 无障碍支持

    本附录是资料性的,而非规范性的。

    C.1. SVG 无障碍功能

    本附录重点介绍 SVG 的无障碍功能以及用于 支持 SVG 的无障碍相关规范,并说明它们旨在支持的相关 W3C Web 内容无障碍 指南 (WCAG) 2.0 [WCAG2] 要求。

    [WCAG2] 创建 可以用不同方式呈现(例如更简单的布局)而不会丢失 信息或结构的内容:信息和关系。
    [WCAG2] 键盘可访问: 使所有功能都能通过键盘使用。
    [WCAG2] 可导航: 提供帮助用户导航、查找内容以及确定当前位置的方法。
    • 为允许跳过内容块,SVG 支持 WAI-ARIA landmark 角色。
    • 支持 ‘title’ 以提供页面标题。
    • 支持 ‘tabindex’ 以提供 顺序焦点导航次序。
    • 支持 ‘a’ 元素,使作者能够通过其内容提供链接用途。
    • 通过使用 heading 角色以及 aria-level、aria-labelledby 和 aria-label 支持标题和标签。
    • 通过在 Tab 次序中获得焦点的元素上呈现可见焦点来支持可见焦点。
    [WCAG2] 可读: 使文本内容可读且易于理解。
    • 通过 ‘lang’ 属性支持页面及其各部分的语言。
    [WCAG2] 兼容: 最大限度提高与当前和未来用户代理(包括辅助技术)的兼容性。
    WAI-ARIA 支持和文本替代内容

    C.2. 支持 SVG 无障碍的 规范和指南

    本节列举与 SVG 无障碍相关的规范和创作指南。

    面向用户代理的相关 SVG 无障碍规范
    面向内容作者的相关规范

    附录 D: SVG 文档动画

    SVG 支持随时间改变矢量图形的能力, 以创建动画效果。 SVG 内容可以通过以下方式进行动画:

    SVG 不强制要求支持这些动画方法中的任何一种。 但是,支持这些方法的用户代理应当在 SVG 文档 和其他文档中的 SVG 片段中支持它们。 支持声明式或脚本动画的用户代理必须遵守 一致性一章中定义的基于处理模式的限制 ,以及关于use 元素影子 树中的动画的特殊要求。


    附录 E: 参考文献

    E.1. 规范性参考文献

    [atag20]
    Jan Richards; Jeanne F Spellman; Jutta Treviranus. 创作工具无障碍指南 (ATAG) 2.0. 2015 年 9 月 24 日. W3C 推荐标准. URL: https://www.w3.org/TR/ATAG20/ ED: https://www.w3.org/WAI/AU/ATAG20/
    [BCP47]
    A. Phillips; M. Davis. 用于标识 语言的标签. 2009 年 9 月. IETF 最佳当前实践. URL: https://tools.ietf.org/html/bcp47
    [clipboard-apis]
    Gary Kacmarcik; Grisha Lyukshin; Hallvord Steen. 剪贴板 API 和事件. 2017 年 9 月 29 日. W3C 工作草案. URL: https://www.w3.org/TR/clipboard-apis/ ED: https://w3c.github.io/clipboard-apis/
    [compositing-1]
    Rik Cabanier; Nikos Andronikos. 合成 与混合级别 1. 2015 年 1 月 13 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/compositing-1/ ED: https://drafts.csswg.org/compositing-1/
    [CSS2]
    Bert Bos; Tantek Çelik; Ian Hickson; Håkon Wium Lie et al. 层叠样式表级别 2 修订版 1 (CSS 2.1) 规范. 2011 年 6 月 7 日. W3C 推荐标准. URL: https://www.w3.org/TR/CSS2
    [css-cascade-4]
    Elika Etemad; Tab Atkins Jr.. CSS 层叠 与继承级别 4. 2016 年 1 月 14 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css-cascade-4/ ED: https://drafts.csswg.org/css-cascade/
    [css-color-3]
    Tantek Çelik; Chris Lilley; David Baron. CSS Color 模块级别 3. 2018 年 6 月 19 日. W3C 推荐标准. URL: https://www.w3.org/TR/css-color-3
    [css-fonts-3]
    John Daggett, Myles Maxfield, Chris Lilley. CSS 字体模块级别 3. 2018 年 8 月 14 日. W3C 提议推荐标准. URL: https://www.w3.org/TR/css-fonts-3/ ED: https://drafts.csswg.org/css-fonts/
    [css-inline-3]
    Dave Cramer; Elika Etemad; Steve Zilles. CSS 行内布局模块级别 3. 2018 年 8 月 8 日. W3C 工作草案. URL: https://www.w3.org/TR/css-inline-3/ ED: https://drafts.csswg.org/css-inline/
    [css-text-3]
    Elika Etemad; Koji Ishii. CSS 文本模块级别 3. 2017 年 8 月 22 日 . W3C 工作草案. URL: https://www.w3.org/TR/css-text-3/ ED: https://drafts.csswg.org/css-text-3/
    [css-text-4]
    Elika Etemad; Koji Ishii; Alan Stearns. CSS 文本 模块级别 4. 2015 年 9 月 22 日. W3C 工作草案. URL: https://www.w3.org/TR/css-text-4/ ED: https://drafts.csswg.org/css-text-4/
    [css-text-decor-3]
    Elika Etemad; Koji Ishii. CSS 文本 装饰模块级别 3. 2018 年 7 月 03 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css-text-decor-3/ ED: https://drafts.csswg.org/css-text-decor-3/
    [css-masking-1]
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS 遮罩模块级别 1. 2014 年 8 月 26 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css-masking-1/ ED: https://drafts.csswg.org/css-masking-1/
    [cssom-1]
    Simon Pieters; Glenn Adams. CSS 对象模型 (CSSOM). 2016 年 3 月 17 日. W3C 工作草案. URL: https://www.w3.org/TR/cssom-1/ ED: https://drafts.csswg.org/cssom/
    [css-ui-3]
    Tantek Çelik; Florian Rivoal. CSS 基本用户 界面模块级别 3 (CSS3 UI). 2018 年 6 月 21 日. W3C 推荐标准. URL: https://www.w3.org/TR/css-ui-3/ ED: https://drafts.csswg.org/css-ui/
    [css-transforms-1]
    Simon Fraser; Dean Jackson; Edward O'Connor; Dirk Schulze. CSS 变换模块级别 1. 2017 年 11 月 30 日. W3C 工作草案. URL: https://www.w3.org/TR/css-transforms-1/ ED: https://drafts.csswg.org/css-transforms/
    [css-values]
    Tab Atkins Jr.; Elika Etemad. CSS 值和 单位模块级别 3. 2018 年 8 月 14 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css-values/ ED: https://drafts.csswg.org/css-values/
    [css-images-3]
    Elika Etemad; Tab Atkins Jr.. CSS 图像值 和替换内容模块级别 3. 2012 年 4 月 17 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css3-images/ ED: https://drafts.csswg.org/css-images-3/
    [css-overflow-3]
    L. David Baron; Elika Etemad; Florian Rioval. CSS 溢出模块级别 3. 2018 年 7 月 31 日. W3C 工作草案. URL: https://www.w3.org/TR/css-overflow-3/ ED: https://drafts.csswg.org/css-overflow-3/
    [css-shapes-1]
    Vincent Hardy; Rossen Atanassov; Alan Stearns. CSS 形状模块级别 1. 2014 年 3 月 20 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/css-shapes-1/ ED: https://drafts.csswg.org/css-shapes/
    [css-writing-modes-3]
    Elika Etemad; Koji Ishii. CSS 书写模式级别 3. 2018 年 5 月 24 日. W3C 候选 推荐标准. URL: https://www.w3.org/TR/css-writing-modes-3/ ED: https://drafts.csswg.org/css-writing-modes-3/
    [css-scoping-1]
    Tab Atkins Jr.; Elika Etemad. CSS 作用域 模块级别 1. 2014 年 4 月 3 日. W3C 工作草案. URL: https://www.w3.org/TR/css-scoping-1/ ED: https://drafts.csswg.org/css-scoping/
    [dom]
    DOM LS. 2018 年 8 月 8 日. WHATWG 现行 标准. URL: https://dom.spec.whatwg.org/
    [DOM-Level-2-Style]
    Chris Wilson; Philippe Le Hégaret. 文档对象模型 (DOM) 级别 2 样式 规范. 2000 年 11 月 13 日. W3C 推荐标准. URL: https://www.w3.org/TR/DOM-Level-2-Style/
    [ECMASCRIPT]
    Allen Wirfs-Brock. ECMA-262 第 6 版, ECMAScript 2015 语言规范. 2015 年 6 月. 标准. URL: https://www.ecma-international.org/ecma-262/6.0/index.html
    [FETCH]
    Anne van Kesteren. Fetch 标准. 现行 标准. URL: https://fetch.spec.whatwg.org/
    [filter-effects-1]
    Dean Jackson; Erik Dahlström; Dirk Schulze. 滤镜效果模块级别 1. 2014 年 11 月 25 日. W3C 工作草案. URL: https://www.w3.org/TR/filter-effects-1/ ED: https://drafts.csswg.org/filter-effects-1/
    [geometry-1]
    Simon Pieters; Dirk Schulze; Rik Cabanier. Geometry 接口模块级别 1. 2014 年 11 月 25 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/geometry-1/ ED: https://drafts.csswg.org/geometry-1/
    [graphics-aria-1.0]
    Amelia Bellamy-Royds; Fred Esch; Richard Schwerdtfeger; Léonie Watson. WAI-ARIA 图形模块. 2018 年 6 月 26 日. W3C 提议推荐标准 . URL: https://www.w3.org/TR/graphics-aria-1.0/ ED: https://w3c.github.io/graphics-aria/
    [HTML]
    Anne van Kesteren; et al. HTML 标准. 现行标准. URL: https://html.spec.whatwg.org/multipage/
    [JPEG]
    Eric Hamilton. JPEG 文件交换 格式. 1992 年 9 月. URL: https://www.w3.org/Graphics/JPEG/jfif3.pdf
    [media-frags]
    Raphaël Troncy; Erik Mannens; Silvia Pfeiffer; Davy Van Deursen. 媒体片段 URI 1.0(基础). 2012 年 9 月 25 日. W3C 推荐标准. URL: https://www.w3.org/TR/media-frags/
    [PNG]
    Tom Lane. 便携式网络图形 (PNG) 规范 (第二版). 2003 年 11 月 10 日. W3C 推荐标准. URL: https://www.w3.org/TR/PNG
    [Referrer Policy]
    J. Eisinger, E. Stark. Referrer Policy. 2017 年 1 月 26 日. 候选推荐标准. URL: https://www.w3.org/TR/referrer-policy/ ED: https://w3c.github.io/webappsec-referrer-policy/
    [rfc1951]
    P. Deutsch. DEFLATE 压缩数据格式 规范版本 1.3. 1996 年 5 月. 资料性. URL: https://tools.ietf.org/html/rfc1951
    [rfc1952]
    P. Deutsch. GZIP 文件格式规范 版本 4.3. 1996 年 5 月. 资料性. URL: https://tools.ietf.org/html/rfc1952
    [rfc2046]
    N. Freed; N. Borenstein. 多用途互联网 邮件扩展 (MIME) 第二部分:媒体类型. 1996 年 11 月. 标准草案. URL: https://tools.ietf.org/html/rfc2046
    [rfc2119]
    S. Bradner. RFC 中用于 表示要求级别的关键词. 1997 年 3 月. 最佳当前实践. URL: https://tools.ietf.org/html/rfc2119
    [rfc2397]
    L. Masinter. "data" URL 方案. 1998 年 8 月. 提议标准. URL: https://tools.ietf.org/html/rfc2397
    [rfc2616]
    R. Fielding; J. Gettys; J. Mogul; H. Frystyk; L. Masinter; P. Leach; T. Berners-Lee. 超文本传输协议 -- HTTP/1.1. 1999 年 6 月. 标准草案. URL: https://tools.ietf.org/html/rfc2616
    [rfc3986]
    T. Berners-Lee; R. Fielding; L. Masinter. 统一资源标识符 (URI):通用 语法. 2005 年 1 月. 互联网标准. URL: https://tools.ietf.org/html/rfc3986
    [rfc5234]
    D. Crocker, Ed.; P. Overell. 用于 语法规范的增强 BNF:ABNF. 2008 年 1 月. 互联网标准. URL: https://tools.ietf.org/html/rfc5234
    [rfc7303]
    H. Thompson; C. Lilley. XML 媒体 类型. 2014 年 7 月. 提议标准. URL: https://tools.ietf.org/html/rfc7303
    [rfc3987]
    M. Duerst; M. Suignard. 国际化 资源标识符 (IRI). 2005 年 1 月. 提议标准. URL: https://tools.ietf.org/html/rfc3987
    [rfc4329]
    B. Hoehrmann. 脚本媒体类型. 2006 年 4 月. 资料性. URL: https://tools.ietf.org/html/rfc4329
    [SMIL]
    同步多媒体 集成语言 (SMIL 3.0), D. Bulterman 等, 编辑. 2008 年 12 月 01 日.
    此版本的 SMIL 位于 https://www.w3.org/TR/2008/REC-SMIL3-20081201/.
    SMIL 的最新版本可在 https://www.w3.org/TR/smil/ 获取.
    [smil-animation]
    Patrick Schmitz; Aaron Cohen. SMIL 动画. 2001 年 9 月 4 日. W3C 推荐标准. URL: https://www.w3.org/TR/smil-animation/
    [SRGB]
    多媒体系统和设备 - 色彩 测量和管理 - 第 2-1 部分:色彩管理 - 默认 RGB 色彩空间 - sRGB. IEC 61966-2-1 (1999-10). ISBN: 2-8318-4989-6 - ICS 代码: 33.160.60, 37.080 - TC 100 - 51 页. URL: https://webstore.iec.ch/publication/6169
    [svg-aam-1.0]
    Amelia Bellamy-Royds; Richard Schwerdtfeger. SVG 无障碍 API 映射. 2018 年 5 月 10 日草案. W3C 工作草案. URL: https://www.w3.org/TR/svg-aam-1.0/ ED: https://w3c.github.io/svg-aam/
    [uievents]
    Gary Kacmarcik; Travis Leithead. UI Events 规范. 2016 年 8 月 04 日. W3C 工作草案. URL: https://www.w3.org/TR/uievents/ ED: https://w3c.github.io/uievents/
    [UNICODE]
    Unicode 标准. URL: https://www.unicode.org/versions/latest/
    [URL]
    Anne van Kesteren; Sam Ruby. URL. 2018 年 8 月 9 日. 现行标准. URL: https://url.spec.whatwg.org/
    [wai-aria]
    Joanmarie Diggs et al. 无障碍富互联网 应用 (WAI-ARIA) 1.1. 2017 年 12 月 14 日. W3C 推荐标准. URL: https://www.w3.org/TR/wai-aria-1.1/
    [web-animations-1]
    Brian Birtles; Shane Stephens; Alex Danilo; Tab Atkins Jr.. Web Animations. 2016 年 9 月 13 日. W3C 工作草案. URL: https://www.w3.org/TR/web-animations-1/ ED: https://w3c.github.io/web-animations/
    [WebIDL]
    Cameron McCormack; Boris Zbarsky. WebIDL 级别 1. 2016 年 12 月 15 日. W3C 推荐标准. URL: https://www.w3.org/TR/WebIDL-1/ ED: https://webidl.spec.whatwg.org/
    [WOFF]
    Jonathan Kew; Tal Leming; Erik van Blokland. WOFF 文件 格式 1.0. 2012 年 12 月 13 日. W3C 推荐标准. URL: https://www.w3.org/TR/WOFF/
    Steven DeRose; Eve Maler; David Orchard. XML 链接 语言 (XLink) 版本 1.1. 2010 年 5 月 06 日. W3C 推荐标准. URL: https://www.w3.org/TR/xlink11/
    [xml]
    Tim Bray; Jean Paoli; Michael Sperberg-McQueen; Eve Maler; François Yergeau et al. 可扩展标记语言 (XML) 1.0(第五 版). 2008 年 11 月 26 日. W3C 推荐标准. URL: https://www.w3.org/TR/xml
    [xmlbase]
    Jonathan Marsh. XML Base(第二 版). 2009 年 1 月 28 日. W3C 推荐标准. URL: https://www.w3.org/TR/xmlbase/
    [xml-names]
    Tim Bray; Dave Hollander; Andrew Layman; Richard Tobin; Henry Thompson et al. XML 1.0 中的命名空间(第三版). 2009 年 12 月 8 日. W3C 推荐标准. URL: https://www.w3.org/TR/xml-names
    [xml-stylesheet]
    James Clark; Simon Pieters; Henry Thompson. 将样式表与 XML 文档关联 1.0(第二版). 2010 年 10 月 28 日. W3C 推荐标准. URL: https://www.w3.org/TR/xml-stylesheet

    E.2. 资料性参考文献

    [charmod]
    Martin Dürst; François Yergeau; Richard Ishida; Misha Wolf; Tex Texin et al. 万维网字符模型 1.0: 基础. 2005 年 2 月 15 日. W3C 推荐标准. URL: https://www.w3.org/TR/charmod/
    [css-selectors-3]
    Tantek Çelik; Elika Etemad; Daniel Glazman; Ian Hickson; Peter Linss; John Williams et al. 选择器级别 3. 2018 年 1 月 30 日. W3C 候选推荐标准. URL: https://www.w3.org/TR/selectors-3/
    [css-color-4]
    CSS Color 模块级别 4, Tab Atkins; Chris Lilley 编辑. 万维网联盟, 2016 年 7 月 5 日.
    CSS Color 4 的最新 版本可在 https://www.w3.org/TR/css-color-4/ 获取.
    [css-shapes-2]
    CSS 形状模块级别 2, Alan Stearns 编辑. 万维网联盟, 2018 年 7 月 5 日.
    CSS Shapes 2 的最新 版本可在 https://drafts.csswg.org/css-shapes-2/ 获取.
    [css-syntax-3]
    CSS Syntax 模块级别 3, Tab Atkins 编辑. 万维网联盟, 2014 年 2 月.
    CSS Syntax 3 的最新 版本可在 https://drafts.csswg.org/css-syntax-3/ 获取.
    [css-animations-1]
    Dean Jackson; David Hyatt; Chris Marrin; Sylvain Galineau; David Baron. CSS 动画. 2017 年 11 月 30 日. W3C 工作草案. URL: https://www.w3.org/TR/css-animations-1/ ED: https://drafts.csswg.org/css-animations/
    [css-transitions-1]
    Dean Jackson; David Hyatt; Chris Marrin; David Baron. CSS 过渡. 2017 年 11 月 30 日. W3C 工作草案. URL: https://www.w3.org/TR/css-transitions-1/ ED: https://drafts.csswg.org/css-transitions/
    [DC11]
    Dublin Core metadata initiative. Dublin Core 元数据元素集, 版本 1.1. 2012 年 6 月 14 日. DCMI 推荐标准. URL: https://dublincore.org/documents/2012/06/14/dces/
    [EDITING]
    A. Gregor. HTML 编辑 API. URL: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html
    [ICC]
    International Color Consortium, ICC.1:2010(配置文件版本 4.3.0.0). 2010 年 12 月. URL: https://www.color.org/specification/ICC1v43_2010-12.pdf
    [MathML3]
    David Carlisle; Patrick D F Ion; Robert R Miner. 数学标记语言 (MathML) 版本 3.0 第 2 版. 2014 年 4 月 10 日. W3C 推荐标准. URL: https://www.w3.org/TR/MathML3/
    [OPENTYPE]
    OpenType 规范. URL: https://www.microsoft.com/typography/otspec/default.htm
    [rdf11-primer]
    Guus Schreiber; Yves Raimond. RDF 1.1 入门. 2014 年 6 月 24 日. W3C 说明. URL: https://www.w3.org/TR/rdf11-primer/
    [WCAG21]
    Ben Caldwell; Michael Cooper; Loretta Guarino Reid; Gregg Vanderheiden et al. Web 内容无障碍指南 (WCAG) 2.1. 2018 年 6 月 05 日. W3C 推荐标准. URL: https://www.w3.org/TR/WCAG21/
    [svg-animation]
    Brian Birtles. SVG 动画. W3C 编辑草案. URL: https://w3c.github.io/svgwg/specs/animations
    [UAAG20]
    James Allan; Greg Lowney; Kimberly Patch; Jeanne F Spellman. 用户代理无障碍指南 (UAAG) 2.0. 2015 年 12 月 15 日. W3C 说明. URL: https://www.w3.org/TR/UAAG20/ ED: https://www.w3.org/TR/2015/NOTE-UAAG20-20151215/
    [xmlschema-2]
    Paul V. Biron; Ashok Malhotra. XML Schema 第 2 部分:数据类型第二版. 2004 年 10 月 28 日. W3C 推荐标准. URL: https://www.w3.org/TR/xmlschema-2/

    附录 F: 元素索引

    本附录是资料性的,而非规范性的。

    以下是 SVG 语言中的元素:


    附录 G: 属性索引

    本附录是资料性的,而非规范性的。

    G.1. 常规属性

    下表列出了 SVG 语言中定义的所有属性,但 呈现属性除外,这些属性 将在 下面的 呈现属性 一节中处理。对于每个属性,还会给出可在其上指定该属性的元素 。

    属性 可指定该属性的元素 可动画
    accumulate animate, animateMotion, animateTransform
    additive animate, animateMotion, animateTransform
    amplitude feFuncA, feFuncB, feFuncG, feFuncR ✓
    aria-activedescendant a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-atomic a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-autocomplete a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-busy a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-checked a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-colcount a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-colindex a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-colspan a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-controls a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-current a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-describedby a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-details a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-disabled a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-dropeffect a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-errormessage a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-expanded a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-flowto a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-grabbed a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-haspopup a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-hidden a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-invalid a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-keyshortcuts a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-label a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-labelledby a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-level a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-live a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-modal a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-multiline a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-multiselectable a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-orientation a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-owns a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-placeholder a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-posinset a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-pressed a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-readonly a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-relevant a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-required a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-roledescription a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-rowcount a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-rowindex a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-rowspan a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-selected a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-setsize a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-sort a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-valuemax a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-valuemin a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-valuenow a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    aria-valuetext a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    attributeName animate, animateTransform, set
    autofocus a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    azimuth feDistantLight ✓
    baseFrequency feTurbulence ✓
    begin animate, animateMotion, animateTransform, set
    bias feConvolveMatrix ✓
    by animate, animateMotion, animateTransform
    calcMode animate, animateMotion, animateTransform
    class a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view ✓
    clipPathUnits clipPath ✓
    crossorigin feImage
    crossorigin image ✓
    crossorigin script ✓
    cx radialGradient ✓
    cy radialGradient ✓
    diffuseConstant feDiffuseLighting ✓
    divisor feConvolveMatrix ✓
    download a
    dur animate, animateMotion, animateTransform, set
    dx feDropShadow ✓
    dx feOffset ✓
    dx text ✓
    dx tspan ✓
    dy feDropShadow ✓
    dy feOffset ✓
    dy text ✓
    dy tspan ✓
    edgeMode feConvolveMatrix ✓
    edgeMode feGaussianBlur ✓
    elevation feDistantLight ✓
    end animate, animateMotion, animateTransform, set
    exponent feFuncA, feFuncB, feFuncG, feFuncR ✓
    fill animate, animateMotion, animateTransform, set
    filterUnits filter ✓
    fr radialGradient ✓
    from animate, animateMotion, animateTransform
    fx radialGradient ✓
    fy radialGradient ✓
    gradientTransform linearGradient ✓
    gradientTransform radialGradient ✓
    gradientUnits linearGradient ✓
    gradientUnits radialGradient ✓
    height feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence ✓
    height filter ✓
    height mask ✓
    height pattern ✓
    href a ✓
    href animate, animateMotion, animateTransform, set
    href animate, animateMotion, animateTransform, set
    href feImage ✓
    href image ✓
    href linearGradient ✓
    href mpath
    href pattern ✓
    href radialGradient ✓
    href script
    href textPath ✓
    href use ✓
    hreflang a
    id a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    in feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feGaussianBlur, feMergeNode, feMorphology, feOffset, feSpecularLighting, feTile ✓
    in2 feBlend ✓
    in2 feComposite ✓
    in2 feDisplacementMap ✓
    intercept feFuncA, feFuncB, feFuncG, feFuncR ✓
    k1 feComposite ✓
    k2 feComposite ✓
    k3 feComposite ✓
    k4 feComposite ✓
    kernelMatrix feConvolveMatrix ✓
    kernelUnitLength feConvolveMatrix ✓
    kernelUnitLength feDiffuseLighting ✓
    kernelUnitLength feSpecularLighting ✓
    keyPoints animateMotion
    keySplines animate, animateMotion, animateTransform
    keyTimes animate, animateMotion, animateTransform
    lang a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    lengthAdjust text, textPath, tspan ✓
    limitingConeAngle feSpotLight ✓
    markerHeight marker ✓
    markerUnits marker ✓
    markerWidth marker ✓
    maskContentUnits mask ✓
    maskUnits mask ✓
    max animate, animateMotion, animateTransform, set
    media style
    method textPath ✓
    min animate, animateMotion, animateTransform, set
    mode feBlend ✓
    numOctaves feTurbulence ✓
    offset feFuncA, feFuncB, feFuncG, feFuncR ✓
    offset stop ✓
    onabort svg
    onafterprint
    onbeforeprint
    onbegin animate, animateMotion, animateTransform, set
    oncancel a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oncanplay a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oncanplaythrough a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onchange a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onclick a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onclose a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oncopy a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oncuechange a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oncut a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondblclick a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondrag a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragend a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragenter a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragexit a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragleave a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragover a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondragstart a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondrop a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ondurationchange a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onemptied a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onend animate, animateMotion, animateTransform, set
    onended a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onerror a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onerror svg
    onfocus a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onhashchange
    oninput a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    oninvalid a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onkeydown a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onkeypress a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onkeyup a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onload a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onloadeddata a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onloadedmetadata a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onloadstart a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmessage
    onmousedown a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmouseenter a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmouseleave a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmousemove a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmouseout a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmouseover a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onmouseup a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onoffline
    ononline
    onpagehide
    onpageshow
    onpaste a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onpause a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onplay a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onplaying a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onpopstate
    onprogress a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onratechange a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onrepeat animate, animateMotion, animateTransform, set
    onreset a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onresize a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onresize svg
    onscroll a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onscroll svg
    onseeked a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onseeking a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onselect a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onshow a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onstalled a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onstorage
    onsubmit a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onsuspend a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ontimeupdate a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    ontoggle a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onunload
    onunload svg
    onvolumechange a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onwaiting a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    onwheel a, animate, animateMotion, animateTransform, circle, defs, desc, ellipse, foreignObject, g, image, line, linearGradient, marker, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    operator feComposite ✓
    operator feMorphology ✓
    order feConvolveMatrix ✓
    orient marker ✓
    origin animateMotion
    path animateMotion
    path textPath ✓
    pathLength circle, ellipse, line, path, polygon, polyline, rect ✓
    patternContentUnits pattern ✓
    patternTransform pattern ✓
    patternUnits pattern ✓
    ping a
    playbackorder svg
    points polygon ✓
    points polyline ✓
    pointsAtX feSpotLight ✓
    pointsAtY feSpotLight ✓
    pointsAtZ feSpotLight ✓
    preserveAlpha feConvolveMatrix ✓
    preserveAspectRatio feImage, image, marker, pattern, svg, symbol, view ✓
    primitiveUnits filter ✓
    r radialGradient ✓
    radius feMorphology ✓
    refX marker ✓
    refX symbol ✓
    refY marker ✓
    refY symbol ✓
    referrerpolicy a
    rel a
    repeatCount animate, animateMotion, animateTransform, set
    repeatDur animate, animateMotion, animateTransform, set
    requiredExtensions a, animate, animateMotion, animateTransform, circle, clipPath, ellipse, foreignObject, g, image, line, mask, path, polygon, polyline, rect, set, svg, switch, text, textPath, tspan, use
    restart animate, animateMotion, animateTransform, set
    result feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence ✓
    role a, circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tspan, use, view
    rotate animateMotion
    rotate text ✓
    rotate tspan ✓
    scale feDisplacementMap ✓
    seed feTurbulence ✓
    side textPath ✓
    slope feFuncA, feFuncB, feFuncG, feFuncR ✓
    spacing textPath ✓
    specularConstant feSpecularLighting ✓
    specularExponent feSpecularLighting ✓
    specularExponent feSpotLight ✓
    spreadMethod linearGradient ✓
    spreadMethod radialGradient ✓
    startOffset textPath ✓
    stdDeviation feDropShadow ✓
    stdDeviation feGaussianBlur ✓
    stitchTiles feTurbulence ✓
    style a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    surfaceScale feDiffuseLighting ✓
    surfaceScale feSpecularLighting ✓
    systemLanguage a, animate, animateMotion, animateTransform, circle, clipPath, ellipse, foreignObject, g, image, line, mask, path, polygon, polyline, rect, set, svg, switch, text, textPath, tspan, use
    tabindex a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    tableValues feFuncA, feFuncB, feFuncG, feFuncR ✓
    target a ✓
    targetX feConvolveMatrix ✓
    targetY feConvolveMatrix ✓
    textLength text ✓
    textLength textPath, tspan ✓
    timelinebegin svg
    title style
    to animate, animateMotion, animateTransform
    to set
    transform svg ✓
    type a
    type animateTransform
    type feColorMatrix ✓
    type feFuncA, feFuncB, feFuncG, feFuncR ✓
    type feTurbulence ✓
    type script
    type style
    values animate, animateMotion, animateTransform
    values feColorMatrix ✓
    viewBox marker, pattern, svg, symbol, view ✓
    width feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence ✓
    width filter ✓
    width mask ✓
    width pattern ✓
    x feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence ✓
    x fePointLight ✓
    x feSpotLight ✓
    x filter ✓
    x mask ✓
    x pattern ✓
    x text ✓
    x tspan ✓
    x1 line ✓
    x1 linearGradient ✓
    x2 line ✓
    x2 linearGradient ✓
    xChannelSelector feDisplacementMap ✓
    xlink:href a, image, linearGradient, pattern, radialGradient, script, textPath, use
    xlink:href feImage ✓
    xlink:title a, image, linearGradient, pattern, radialGradient, script, textPath, use
    xml:space a, animate, animateMotion, animateTransform, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, stop, style, svg, switch, symbol, text, textPath, title, tspan, use, view
    y feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence ✓
    y fePointLight ✓
    y feSpotLight ✓
    y filter ✓
    y mask ✓
    y pattern ✓
    y text ✓
    y tspan ✓
    y1 line ✓
    y1 linearGradient ✓
    y2 line ✓
    y2 linearGradient ✓
    yChannelSelector feDisplacementMap ✓
    z fePointLight ✓
    z feSpotLight ✓

    G.2. 呈现属性

    如样式一章所述,对于每个 特性,都存在相应的呈现属性。 下表列出了这些呈现属性。

    alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, cursor, direction, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, mask-type, opacity, overflow, paint-order, path-length, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing 和 writing-mode

    附录 H: 特性索引

    本附录是资料性的,而非规范性的。

    名称 值 初始值 适用于 继承 百分比 媒体 动画类型 计算值
    color-interpolation auto | sRGB | linearRGB sRGB 容器元素, 图形元素, 渐变元素, ‘use’ 和 ‘animate’ 是 N/A 视觉 离散 与指定值相同
    cx <length-percentage> 0 ‘circle’ 和 ‘ellipse’ 元素 否 相对于当前 SVG 视口的宽度(参见 单位) 按计算值 绝对长度或百分比
    cy <length-percentage> 0 ‘circle’ 和 ‘ellipse’ 元素 否 相对于当前 SVG 视口的高度(参见 单位) 视觉 按计算值 绝对长度或百分比
    fill <paint>(参见指定 绘制) black 形状和文本 内容元素 是 N/A 视觉 按计算值 与指定值相同,但 <color> 值会 计算,并将 <url> 值转换为 绝对值
    fill-opacity <‘opacity’> 1 形状和文本 内容元素 是 N/A 视觉 按计算值 指定值转换为数字,并限制在 [0,1] 范围内
    fill-rule nonzero | evenodd nonzero 形状和文本 内容元素 是 N/A 视觉 离散 与指定值相同
    image-rendering auto | optimizeSpeed | optimizeQuality auto 图像 是 N/A 视觉 离散 与指定值相同
    marker 参见各个特性 参见各个特性 形状 是 N/A 视觉 离散 参见各个特性
    marker-end
    marker-mid
    marker-start
    none | <url> none 形状 是 N/A 视觉 离散 与指定值相同,但将作为 <marker-ref> 一部分的 <url> 值转换为 绝对值
    paint-order normal | [ fill || stroke || markers ] normal 形状和文本 内容元素 是 N/A 视觉 离散 与指定值相同
    pointer-events auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible |
    painted | fill | stroke | all | none
    auto 容器元素, 图形元素和 ‘use’ 是 N/A 视觉 离散 与指定值相同
    r <length-percentage> 0 ‘circle’ 元素 否 相对于当前 SVG 视口的归一化对角线(参见 单位) 按计算值 绝对长度或百分比
    rx <length-percentage> | auto auto ‘ellipse’, ‘rect’ 元素 否 相对于当前 SVG 视口的宽度(参见 单位) 按计算值 绝对长度或百分比
    ry <length-percentage> | auto auto ‘ellipse’, ‘rect’ 元素 否 相对于当前 SVG 视口的高度(参见 单位) 视觉 按计算值 绝对长度或百分比
    shape-rendering auto | optimizeSpeed | crispEdges |
    geometricPrecision
    auto 形状 是 N/A 视觉 离散 与指定值相同
    stop-color <‘color’> black ‘stop’ 元素 否 N/A 视觉 按计算值
    stop-opacity <‘opacity’> 1 ‘stop’ 元素 否 N/A 视觉 按计算值 指定值转换为数字,并限制在 [0,1] 范围内
    stroke <paint>(参见指定 绘制) none 形状和文本 内容元素 是 N/A 视觉 按计算值 与指定值相同,但 <color> 值会 计算,并将 <url> 值转换为 绝对值
    stroke-dasharray none | <dasharray> none 形状和文本 内容元素 是 相对于当前 SVG 视口的归一化对角线 视觉 参见正文 绝对长度或百分比的逗号分隔列表,数字先转换为绝对 长度,或者指定的关键字
    stroke-dashoffset <length-percentage> | <number> 0 形状和文本 内容元素 是 相对于当前 SVG 视口的归一化对角线 视觉 按计算值 绝对长度或百分比;数字先转换为绝对长度
    stroke-linecap butt | round | square butt 形状和文本 内容元素 是 N/A 视觉 离散 与指定值相同
    stroke-linejoin miter | round | bevel miter 形状和文本 内容元素 是 N/A 视觉 离散 与指定值相同
    stroke-miterlimit <number>(非负) 4 形状和文本 内容元素 是 N/A 视觉 按计算值 与指定值相同
    stroke-opacity <‘opacity’> 1 形状和文本 内容元素 是 N/A 视觉 按计算值 指定值转换为数字,并限制在 [0,1] 范围内
    stroke-width <length-percentage> | <number> 1px 形状和文本 内容元素 是 相对于当前 SVG 视口的归一化对角线 视觉 按计算值 绝对长度或百分比;数字先转换为绝对长度
    text-anchor start | middle | end start 文本内容元素 是 N/A 视觉 离散 与指定值相同
    text-rendering auto | optimizeSpeed | optimizeLegibility |
    geometricPrecision
    auto ‘text’ 元素 是 N/A 视觉 离散 与指定值相同
    vector-effect non-scaling-stroke | none none 图形元素和 ‘use’ 否 N/A 视觉 离散 与指定值相同
    x <length-percentage> 0 ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素 否 相对于当前 SVG 视口的宽度(参见 单位) 按计算值 绝对长度或百分比
    y <length-percentage> 0 ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素 否 相对于当前 SVG 视口的高度(参见 单位) 视觉 按计算值 绝对长度或百分比
    1. [1] font、font-size-adjust 和 stroke-dasharray 特性是可动画的,但不支持加法动画。

    附录 I: IDL 索引

    本附录是资料性的,而非规范性的。

    以下是本规范中定义的所有 IDL 接口的列表:


    附录 J: image/svg+xml 的媒体类型注册

    本附录是规范性的。

    J.1. 介绍

    本附录按照 BCP 13 和 W3CRegMedia 注册新的 MIME 媒体类型 "image/svg+xml"。

    J.2. image/svg+xml 媒体类型的注册

    类型名称:

    image

    子类型名称:

    svg+xml

    必需参数:

    无。

    可选参数:

    charset

    与 application/xml 媒体类型相同,如 [rfc7303] 或其 后继规范所指定。

    编码注意事项:

    与 application/xml 相同。参见 [rfc7303] 第 3.2 节或其 后继规范。

    安全注意事项:

    SVG 工作组关于安全和 隐私的自我评估 结果位于 https://github.com/w3c/svgwg/wiki/SVG-2-Security-&-Privacy-Review。

    与其他 XML 类型一样,并如 [rfc7303] 第 10 节所述, 重复展开恶意构造的 XML 实体可能会消耗大量 内存,从而可能导致受限环境中的 XML 处理器失败。

    多个 SVG 元素可能会引用任意 URI。在这种情况下,应考虑 [rfc3986] 第 7 节中的安全问题。

    与 HTML 一样,SVG 文档可以引用图像、样式表和 脚本语言等外部媒体。脚本语言是可执行内容。在这种情况下, 应适用这些格式媒体类型注册中的安全注意事项。

    此外,由于 SVG 以及 XML 一般都具有可扩展性功能, "image/svg+xml" 可能描述具有超出此处所述范围的安全影响的 内容。不过,如果处理器仅遵循已发布规范的规范性语义, 此内容将位于 SVG 命名空间之外,并应被忽略。只有在 处理器识别并处理附加内容,或者将该 内容的进一步处理分派给其他处理器时,才可能出现安全问题。而在这种 情况下,这些问题将超出本注册文档的范围。

    隐私注意事项:

    SVG 工作组关于安全和 隐私的自我评估 结果位于 https://github.com/w3c/svgwg/wiki/SVG-2-Security-&-Privacy-Review。

    SVG 的 ‘requiredExtensions’ 和 ‘systemLanguage’ 属性 可能 提供某些检查用户代理宿主 环境配置的机会。‘requiredExtensions’ 可通过 确定用户代理是否支持自定义 扩展来做到这一点。‘systemLanguage’ 可通过 确定一种语言相对于另一种语言的偏好来做到这一点。

    互操作性注意事项:

    已发布的规范描述了处理语义,它规定了在处理 未识别元素和属性等内容时必须遵循的行为,无论这些元素和属性位于 SVG 命名空间还是其他命名空间中。

    由于 SVG 是可扩展的,符合要求的 "image/svg+xml" 处理器必须预期接收到的内容 是格式良好的 XML,但无法保证该内容对特定 DTD 或 Schema 有效,也无法保证处理器能够识别文档中的所有元素和属性。

    SVG 具有已发布的测试套件和相关实现报告,其中显示了各实现 在报告发布时通过了哪些测试。随着新增测试 或实现得到改进,此信息会定期更新。

    已发布规范:

    此媒体类型注册摘自 SVG 1.1 规范的附录 P。

    使用此媒体类型的应用程序:

    SVG 被 Web 浏览器使用,通常与 HTML 结合使用;也被移动电话和数码相机使用, 作为桌面出版中图形资源交换的格式,用于工业过程 可视化、显示标牌,以及许多其他需要可缩放静态或 交互式图形能力的应用。

    其他信息:
    魔数:
    文件扩展名:
    svg

    请注意,扩展名 'svgz' 用作 'svg.gz' 的别名 [rfc1952], 即 image/svg+xml 类型的八位字节流,随后 使用 gzip 压缩。

    Macintosh 文件类型代码:
    "svg "(全部小写,第四个字符为 空格字符)。

    请注意,Macintosh 文件类型代码 'svgz'(全部小写)用作 GZIP [rfc1952] 压缩的 "svg " 的别名,即 image/svg+xml 类型的八位字节流,随后使用 gzip 压缩。

    Macintosh 通用类型标识符代码:
    org.w3c.svg 符合 public.image 和 public.xml
    Windows 剪贴板名称:
    "SVG Image"
    片段标识符
    对于标记为 application/svg+xml 的文档,片段标识符 表示法可以是简写指针(以前称为 barenames)、 SVG 特有的 SVG 视图语法或媒体片段 标识符; 它们都在 SVG 规范的片段 标识符一节中描述。
    可联系以获取更多信息的人员和电子邮件地址:

    Chris Lilley (www-svg@w3.org),或在 GitHub 上提出 issue: https://github.com/w3c/svgwg/issues/685

    预期用途:

    COMMON

    使用限制:

    无

    作者:

    SVG 规范是万维网联盟 SVG 工作组的工作成果。

    变更控制者:

    W3C 对本规范拥有变更控制权。


    附录 K: 相对于 SVG 1.1 的变更

    本附录是资料性的,而非规范性的。

    本附录总结了自 SVG 1.1 第二版推荐标准以来所作的变更。 自最初的 SVG 2 候选 推荐标准以来所作的变更会突出显示。

    K.1. 编辑性变更

    为了提高可读性,对本规范进行了多项样式上的调整。其中包括 以下内容:

    K.2. 实质性变更

    除了上述编辑性变更之外,还进行了以下实质性的新增、变更和 删除 。

    K.2.1. 整个文档

    K.2.2. 概念一章(仅 SVG 1.1)

    K.2.3. 一致性标准一章(在 SVG 1.1 中为附录)

    K.2.4. 渲染模型一章

    K.2.5. 基本数据类型和接口一章

    K.2.6. 文档结构一章

    K.2.7. 样式一章

    K.2.8. 几何特性一章(仅 SVG 2)

    K.2.9. 坐标系统、变换和单位一章

    K.2.10. 路径一章

    K.2.11. 基本形状一章

    K.2.12. 文本一章

    K.2.13. 嵌入内容一章(仅 SVG 2)

    K.2.14. 绘制一章

    K.2.15. 颜色一章(仅 SVG 1.1)

    K.2.16. 绘制服务器一章(在 SVG 1.1 中称为渐变和图案)

    K.2.17. 裁剪、遮罩和合成一章(仅 SVG 1.1)

    K.2.18. 滤镜效果一章(仅 SVG 1.1)

    K.2.19. 脚本和交互性一章(在 SVG 1.1 中为独立章节)

    K.2.20. 链接一章

    K.2.21. 脚本一章(在 SVG 1.1 中)

    K.2.22. 动画一章(仅 SVG 1.1)

    K.2.23. 字体一章(仅 SVG 1.1)

    K.2.24. 元数据一章(仅 SVG 1.1)

    K.2.25. 向后兼容性一章(仅 SVG 1.1)

    K.2.26. 可扩展性一章(仅 SVG 1.1)

    K.2.27. 文档类型定义附录(仅 SVG 1.1)

    K.2.28. SVG 文档对象模型 (DOM)(仅 SVG 1.1)

    Issue 讨论 编辑

    K.2.29. IDL 定义附录

    K.2.30. Java 语言绑定附录(仅 SVG 1.1)

    K.2.31. ECMAScript 语言绑定附录(仅 SVG 1.1)

    K.2.32. 实现说明附录(在 SVG 1.1 中称为实现要求 )

    K.2.33. 无障碍支持附录

    K.2.34. 国际化支持附录(仅 SVG 1.1)

    K.2.35. 最小化 SVG 文件大小附录(仅 SVG 1.1)

    K.2.36. SVG 文档动画附录(仅 SVG 2)

    K.2.37. 参考文献附录

    K.2.38. 元素、属性和特性索引附录

    K.2.39. IDL 索引附录(仅 SVG 2)

    K.2.40. 特性字符串(仅 SVG 1.1)