Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
本规范定义了可缩放 矢量图形(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 团队的帮助。
本规范定义了以下内容的功能和语法 可缩放矢量图形 (SVG).
SVG 是一种用于描述二维图形的语言. 作为独立格式或与其他 XML 混合使用时, 它使用 XML 语法 [xml]. HTML 文档内使用的 SVG 代码使用 HTML 语法 [HTML]. SVG 允许使用三种类型的图形对象: 矢量图形 形状 (例如, 由直线和曲线组成的路径), 图像和文本. 图形对象可以被分组, 设置样式, 变换和合成. 其功能集包括嵌套变换, 裁剪 路径, Alpha 遮罩, 滤镜效果和模板对象.
SVG 绘图可以是交互式的 和动态的. 动画 可以被定义和触发 可以通过声明方式 (即, 通过嵌入 SVG 动画元素 到 SVG 内容中) 或通过脚本.
通过使用一种 可访问 SVG 文档对象模型 (DOM)的补充脚本语言, 可以实现复杂的 SVG 应用, 该模型 提供对所有元素, 属性和 特性的完整访问. 可以为任何 SVG 图形对象 分配丰富的事件处理程序. 在网页中, 相同的脚本可以同时操作 HTML 和 SVG 元素. 脚本.
SVG 适用于丰富的信息图形呈现, 包括许多 如果正确使用的无障碍功能, 可确保尽可能广泛的受众能够使用这些内容. 但是, 在可能的情况下, 直接 链接到源数据, 有助于许多人理解所提供的内容.
SVG 利用其他 W3C 规范 和标准工作并与其集成, 如下所述:
在本规范中, 关键词 "必须", "不得", "要求", "须", "不得", "应该", "不应该", "推荐", "可以", 和 "可选" 应按照 用于 RFC 中表示 要求级别的关键词 [rfc2119] 中所述进行解释. 但是, 为了可读性, 这些词在本规范中并非全部 以大写字母显示.
有时, 本规范会为 作者和用户代理推荐良好实践.
使用 SVG 定义的图形有许多不同的应用. 因此, 并非所有使用 SVG 的软件都具有相同的功能. 因而, 是否符合 SVG 规范并不是一个二元问题; 软件可以在受限的功能集内符合规范.
此外, SVG 被设计为集成到其他类型的文档中; 根据集成类型, 可能只有有限的功能集才是合适的. SVG 文档片段可以通过多种方式 被其他文档引用或包含, 从而 由用户代理处理. SVG 文档也可以直接查看, 作为主文档. 使用 SVG 文档片段的每种不同方式 都意味着对 SVG 文档 片段应如何处理有一组特定要求.
因此, 本章定义了若干 处理模式, 它们涵盖文档中可能启用或禁用的 不同功能组合. 此外, 它还规定了当 SVG 文档引用或嵌入其他 SVG 文档时 必须使用哪种处理模式的规范性要求. 其他规范也可以通过引用使用同一组处理模式 来描述应如何处理 SVG 文档.
本文档不对 可以引用或包含 SVG 文档的其他规范施加规范性要求, 例如 HTML 和各种 CSS 规范. 其意图是让这些其他 规范以规范性方式指向本文档中适当的处理模式 .
本章还概述了 不同类型的 SVG 内容的特定一致性要求, 以及使用或创建 SVG 的不同类别的软件.
本节为 SVG 文档定义了一组标准的处理模式 . 每种处理模式都指定是否启用某些高级 SVG 功能.
根据处理模式可以启用或禁用的 功能如下:
声明式动画既包括 SVG 中的动画元素 – ‘animate’, ‘animateMotion’, ‘animateTransform’ 和 ‘set’ – 也包括 CSS 过渡和动画 (有关详细信息, 请参阅动画附录). 当 SVG 文档中禁用声明式动画时, 任何 动画元素或 CSS 过渡或动画都不得应用或运行.
这与将文档的动画 状态暂停在文档时间 0s 并不相同; 如果动画被定义为从 0s 开始, 它仍然不会被应用.
对外部资源的引用是由 文档中使用的标记, 样式特性, 脚本或其他 Web 平台功能 发起的 URL 引用或网络访问请求 , 以下情况除外:
当 SVG 文档中禁用外部引用时, 任何通过 外部引用获取文档的尝试都必须改为视为 发生网络错误且未接收到任何数据.
当启用外部引用时, 支持从互联网请求外部文件的用户代理 必须遵守跨源资源获取的限制, 如链接章节中所述.
脚本执行是指执行任何 SVG ‘script’ 元素, 事件属性中的脚本 (例如 SVG 元素上的 ‘onclick’ ), 或文档中使用的其他 Web 平台功能定义的任何其他脚本 , 例如任何 HTML ‘script’ 元素. 当 SVG 文档中禁用脚本执行时, 文档中的任何脚本 都不得运行.
交互是指传递 DOM 事件或调用 任何特定于用户代理的 UI 行为, 例如文本选择, 焦点更改, 链接跳转, 或响应鼠标或键盘活动等 用户输入而触发的动画或过渡. 当 SVG 文档中禁用交互时, 任何以 文档或文档内任何元素为目标的用户输入事件都必须 不产生任何效果.
此处理模式对 SVG 语言的任何 功能都不施加限制.
| 动态交互功能 | |
|---|---|
| 脚本执行 | 是 |
| 外部引用 | 是 |
| 声明式动画 | 是 |
| 交互性 | 是 |
此处理模式适用于以下情况: SVG 文档将用作允许 解析外部引用的动画图像, 但不打算用作 交互式文档.
| 动画功能 | |
|---|---|
| 脚本执行 | 否 |
| 外部引用 | 是 |
| 声明式动画 | 是 |
| 交互性 | 否 |
此处理模式适用于以下情况: SVG 文档将用作不允许 解析外部引用的动画图像, 并且不打算用作 交互式文档. 此模式可能用于传统上 图像支持仅限于栅格图像 (例如 JPEG, PNG 和 GIF) 的场合.
| 安全动画功能 | |
|---|---|
| 脚本执行 | 否 |
| 外部引用 | 否 |
| 声明式动画 | 是 |
| 交互性 | 否 |
此处理模式适用于以下情况: SVG 文档将用作允许 解析外部引用的非动画图像, 但不打算用作 交互式文档. 例如, 处理要包含在打印文档中的图形的 SVG 查看器 很可能会使用静态模式.
| 静态功能 | |
|---|---|
| 脚本执行 | 否 |
| 外部引用 | 是 |
| 声明式动画 | 否 |
| 交互性 | 否 |
此处理模式适用于以下情况: SVG 文档将用作不允许 解析外部引用的非动画图像, 并且不打算用作 交互式文档. 此模式可能用于传统上 图像支持仅限于非动画栅格图像 (例如 JPEG 和 PNG.) 的场合
| 安全静态功能 | |
|---|---|
| 脚本执行 | 否 |
| 外部引用 | 否 |
| 声明式动画 | 否 |
| 交互性 | 否 |
当直接查看 SVG 文档时, 预期将使用用户代理所支持的最全面的 处理模式来显示它. 但是, 当 SVG 作为 子资源或嵌入文档处理时, 必须应用以下限制:
嵌入在 ‘image’ 元素中的 SVG 如果嵌入文档支持声明式动画, 则必须以安全动画模式处理, 否则以安全静态模式处理.
在其他使用 SVG 替代栅格图像的情况下, 预计也会使用相同的处理模式, 例如 HTML ‘img’ 元素或 接受 <image> 数据类型的任何 CSS 特性. 这与 HTML 的 要求一致, 即图像源必须引用 "一种非交互式, 可选动画, 既不分页也不包含脚本的图像资源" [HTML]
'href'
引用当 SVG 文档通过 ‘use’ 元素引用 或绘制服务器元素交叉引用加载时, 它们必须以安全静态模式处理.
请注意, 在处理子资源文档时动画不会运行, 这既出于性能原因, 也因为目前没有定义 可供资源文档引用其时间线的上下文. 但是, 当子资源文档中的元素因 ‘use’ 元素引用 或绘制服务器交叉引用而被克隆 到当前文档中时, 克隆的元素实例可以在 当前文档的时间线中产生动画, 如use 元素影子树中的动画中所述, 并且可能触发其他子资源文件的加载.
当 SVG 文档通过 任何以文档中特定元素为目标的样式特性引用加载时 (而不是将 SVG 作为图像格式), 它们必须以安全静态模式处理.
请注意, 动画不会在子资源文档中运行, 这既出于性能原因, 也因为目前没有定义 可供资源文档引用其时间线的上下文.
某些样式特性可以引用特定元素 或整个图像文件; 第一种情况下处理模式限制更严格. 例如, 对 SVG ‘mask’ 元素的引用 不会产生动画, 但作为图像遮罩使用的整个 SVG 文件可以产生动画.
当 SVG 文件作为字体引用的一部分进行处理时, 如果支持动画字形, 它们必须使用 安全动画模式, 否则使用安全静态模式.
这些限制包含在 OpenType 规范对来自 "SVG" 表的文档处理要求中. OpenType 还应用了其他限制, 形式为一个用户代理样式表, 它会阻止文本和外部对象的渲染 [OPENTYPE].
内联包含在宿主文档中的 SVG 文档片段 必须使用与宿主文档相匹配的处理模式. 作为 SVG ‘foreignObject’ 元素子项包含的 SVG 文档片段必须使用周围 SVG 文档的 处理模式; 非 SVG 外部内容必须以等效限制进行处理.
例如, 如果 SVG 文档由于被 HTML ‘img’ 或 SVG ‘image’ 元素引用而使用 安全动画模式, 那么 ‘foreignObject’ 元素内的任何内容 都必须禁用脚本, 交互性和外部文件引用, 但应该启用声明式动画.
下面是通过 引用在 HTML 页面中嵌入 SVG 的各种方法, 以及每种方法预期的处理模式 和允许的功能.
"实时示例" 行中的每个单元格都应显示一个黄色 笑脸. 在下面的每个示例中, 单击眼睛会测试链接 跳转, 单击脸部会测试声明式交互 和脚本执行. 链接应将图像替换为蓝色 方块 (单击它会将其恢复为原始图像). 声明式交互 使用 ‘set’ 元素将脸部从黄色色调改为绿色色调, 并使用 CSS 伪类为交互元素添加描边. 脚本应填充微笑. 如果左眼正在眨眼, 则支持基于时间 (而非基于交互) 的声明式动画 (使用 ‘animate’ 元素) 并且如果眼睛为深蓝色并定期闪烁浅蓝色 (使用 CSS 关键帧动画), 也支持该动画.
此处概述的预期处理模式和功能 可能会随相应 HTML 或 CSS 规范未来的任何更改而变化.
| 嵌入方法 | 不使用沙盒的 object | img | CSS 背景 | |
|---|---|---|---|---|
| 预期处理模式 | 动态交互 | 动态交互, 有限制 | 安全动画 | 安全动画 |
| 声明式, 基于时间的动画 (左眼眨眼, 双眼颜色变化 ) |
允许 | 允许 | 允许 | 允许 |
| 声明式, 交互式动画和样式更改 (单击时脸部颜色变化 , 悬停或聚焦时脸部/眼睛显示轮廓) |
允许 | 允许 | 禁用 | 禁用 |
| 在同一浏览上下文中导航到同一域的链接 (单击眼睛时图像变化) |
允许 | 允许 | 禁用 | 禁用 |
| 脚本化交互 (单击脸部时微笑变宽) |
允许 | 禁用 (由于沙盒限制) | 禁用 | 禁用 |
| 实时示例 |
|
SVG 是根据文档对象模型 (DOM) 定义的, 而不是根据特定的文件格式或文档类型. 因此, 对于 SVG 内容, 是否符合本规范取决于 内容是否为或能否生成符合规范的 DOM. 以下某些一致性类别取决于内容是否为 格式良好的 XML [xml].
以给定元素为根的 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 内容的任何方面指定 大小限制. 元素数量, 字符数据量或 属性值中的字符数都没有最大值.
如果文档或文档的一部分可以由适用于文档 MIME 类型的解析器 无错误地解析 (网络错误除外) , 形成符合规范的 SVG DOM 子树, 并且还满足以下条件, 则它是符合规范的 SVG 标记片段 :
如果一个符合规范的 SVG 标记片段还满足以下条件, 则它也是符合规范的 XML 兼容 SVG 标记片段 :
<?xml-stylesheet?> 处理指令都符合
将样式表与 XML
文档关联
[xml-stylesheet].
以给定元素为根的 DOM 节点树或子树 如果序列化为 XML 后, 可以形成符合规范的 XML 兼容 SVG 标记 片段, 则它是符合规范的 XML 兼容 SVG DOM 子树.
如果 DOM 子树在不对其进行更改的情况下无法序列化为符合规范的 XML, 例如 ‘id’ 值 不是有效的 XML 名称, 或 Comment 节点的数据 包含子字符串 "--", 则该子树不是 符合规范的 XML 兼容 SVG DOM 子树.
如果文档满足以下条件, 则它是符合规范的 SVG 独立文件:
在多种情况下, SVG 文档片段在技术上 处于错误状态:
动态文档可以随时间进入和退出错误状态. 例如, 来自 SVG DOM 或动画的文档更改可能导致 文档变为处于错误状态, 而进一步的更改又可以 使文档重新变为正确状态.
每当文档处于错误状态时, 用户代理必须使用以下错误处理规则, 除非本规范的其他章节为处理特定错误 类型定义了更具体的规则:
由于一组脚本更改 可能导致给定 SVG 文档片段进入和退出 错误状态, 因此用户代理应仅在文档 呈现 (例如, 渲染到显示设备) 被 更新时应用错误处理.
对于软件, 一致性要求取决于 程序的类别:
用户代理的一般定义是一种 检索和渲染 Web 内容的应用程序, 包括文本, 图形, 声音, 视频, 图像和其他内容类型. 一个 用户代理可能需要其他用户代理来处理 某些类型的内容. 例如, 浏览器可能运行一个 单独的程序或插件来渲染声音或视频. 用户 代理包括图形桌面浏览器, 多媒体 播放器, 文本浏览器, 语音浏览器以及辅助 技术, 例如屏幕阅读器, 屏幕放大器, 语音合成器, 屏幕键盘和语音输入 软件.
一般而言, "用户代理" 可能具有也可能不具有检索 和渲染 SVG 内容的能力; 但是, 除非上下文要求采用其他解释, 本规范中对 "用户代理" 的所有引用 都假定是指检索和渲染 SVG 内容的SVG 用户代理 .
许多程序会同时属于多个软件类别. 例如, 一个可以导入和显示 SVG 文件, 允许用户修改它们, 然后将修改后的图形导出到文件的图形编辑器, 是 SVG 解释器, SVG 查看器, SVG 创作工具, 以及 SVG 生成器.
符合规范的 SVG 生成器是满足以下条件的 SVG 生成器:
强烈建议 SVG 生成器 默认使用 Unicode 字符编码, 并遵循 万维网字符模型的其他指南 [UNICODE] [charmod].
建议处理高精度数据的 SVG 生成器 遵循 生成高精度几何图形的说明一节中的指南.
如果一个创作工具, 如创作工具无障碍 指南 2.0中所定义, 是一个符合规范的 SVG 创作工具, 则它必须是符合规范的 SVG 生成器 并且还符合该文档中所有相关的 A 级要求 [atag20]. 鼓励满足 AA 级和 AAA 级要求, 但一致性并不要求满足这些要求.
符合规范的 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 压缩文件.
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 子资源文档的处理模式 和链接章节中针对用户代理描述的限制.
| 行动: | 查看性能类别
要求, 并决定是删除这些要点还是将其移入一般要求.
(heycam)
规定 CTM 的计算 应使用双精度. (stakagi) |
|---|---|
| 决议: | 从 SVG 2 中删除性能类别 要求. ( ConformingHighQualitySVGViewers ) |
| 目的: | 调节技术制图和 地图用例中的数值精度与用户代理性能之间的权衡. |
| 负责人: | heycam, stakagi |
SVG 查看器是一种能够解析和处理 SVG 文档片段并将文档内容 渲染到某种图形输出介质 (例如显示器, 打印机或雕刻机) 上的程序. 因此, SVG 查看器也是SVG 解释器 (因为它能够解析和处理 SVG 文档片段), 但还有正确渲染这一额外要求.
符合规范的 SVG 查看器 必须是符合规范的 SVG 解释器, 并且 必须能够至少在本章定义的一种 处理模式下支持渲染输出:
符合规范的 SVG 查看器必须满足本规范中 针对用户代理指出的所有规范性要求, 对其处理模式所支持的所有功能均是如此.
适用于所有符合规范的 SVG 查看器的特定标准:
image/svg+xml 时,
它必须是格式良好且完整的 SVG 文档才能被处理.
即使查看器仅支持安全处理模式, 仍然要求它支持这些图像格式, 以便处理data URL 引用.
在较低分辨率的显示设备上, 强烈建议支持抗锯齿或其他平滑方法. 这是符合规范的高质量 SVG 查看器的要求.
$$
(single)
{\large \rm CTM} =
(single)
\left(
(double)
\left[
\begin{matrix}
a_1 & c_1 & e_1 \\
b_1 & d_1 & f_1 \\
0 & 0 & 1
\end{matrix}
\right]
\cdot
(double)
\left[
\begin{matrix}
a_2 & c_2 & e_2 \\
b_2 & d_2 & f_2 \\
0 & 0 & 1
\end{matrix}
\right]
\right)
$$
$$
(single)
\left[
\begin{matrix}
x_{\rm viewport} \\
y_{\rm viewport} \\
1
\end{matrix}
\right]
=
{\large \rm CTM} \cdot (single)
\left[
\begin{matrix}
x_{\rm userspace} \\
y_{\rm userspace} \\
1
\end{matrix}
\right]
$$
支持包含交互的处理模式的符合规范的 SVG 查看器 必须支持以下附加功能:
支持包含脚本执行的处理模式的符合规范的 SVG 查看器 必须支持以下附加 功能:
如果用户代理包含 HTML 或 XHTML 查看 功能, 或者可以将 CSS 样式特性应用于 XML 文档, 那么符合规范的 SVG 查看器必须在 可以使用栅格图像外部资源的任何位置支持 MIME 类型为 "image/svg+xml" 的 资源, 例如 HTML 或 XHTML ‘img’ 元素以及可以引用栅格图像资源的 CSS 特性 (例如 ‘background-image’).
对于同时支持显示 设备上的缩放和打印的用户代理, 建议默认 打印选项生成反映 显示设备当前 SVG 文档 片段当前视图的打印输出 (假定没有媒体特定的样式), 同时 考虑用户执行的任何缩放和平移, 当前动画状态以及由 DOM 和脚本引起的任何文档更改.
因此, 如果用户在显示设备上放大到地图的特定区域 , 然后请求打印副本, 打印副本应显示与显示 设备上出现的相同地图视图. 如果用户暂停动画并打印, 打印副本应显示与显示设备上当前 暂停画面相同的图形. 如果脚本添加或 删除了文档中的元素, 则打印副本应 反映与 显示器上相同的更改.
当 SVG 文档在仅支持静态内容的设备 (例如不支持 SVG 动画和 脚本功能的打印机) 上渲染时, 用户代理应忽略文档中的任何 动画和脚本元素, 并根据本 规范中的规则渲染其余图形元素.
要使符合规范的 SVG 查看器被视为 符合规范的高质量 SVG 查看器, 它必须 支持以下附加功能:
支持包含脚本执行, 声明式动画或交互的处理模式的符合规范的高质量 SVG 查看器 必须支持以下附加功能:
支持包含交互的处理模式 的符合规范的高质量 SVG 查看器必须支持以下附加 功能:
SVG 实现必须按照本 章所述实现渲染模型, 并根据一致性 要求附录中的修改执行, 该附录描述了 实现可以偏离的情况. 实际上, 由于输出设备的限制 (例如可能只支持有限的颜色范围) 以及实现精确数学模型的实际 限制 (例如为了实现合理的 性能, 曲线会用直线近似, 该近似只需 足够精确以满足一致性要求), 允许存在差异.
一致性 要求附录描述了实际 实现可以偏离此描述的程度. 实际上, 实际实现可以 因 输出设备的限制 (例如可能只支持有限范围的 颜色) 以及实现精确数学模型的实际限制 (例如为了实现 合理性能, 曲线会用直线 近似, 该近似只需足够精确以 满足一致性要求) 而略有偏离.
SVG 文档最终渲染表示的组成部分 与底层 文档模型中的元素并非一一对应. 相反, 图形的外观反映了一个并行结构, 即渲染树, 其中某些元素被排除, 而另一些元素则被重复.
SVG 命名空间中的许多元素并不直接表示 图形文档的组成部分. 相反, 它们定义图形效果, 元数据, 用于表示其他元素的内容, 或在特定条件下显示的替代内容. 在动态文档中, 图形的某些组成部分 是否渲染可能取决于交互或动画. 这些未渲染元素不会直接包含 在渲染树中.
由于 SVG 支持重用图形子组件, 某些元素会被多次渲染. 各个渲染结果可能具有取决于上下文的样式, 并且可能以不同的缩放比例或变换进行栅格化.
渲染树是 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’ 元素.
可渲染元素在给定文档或时间点 可能被渲染, 也可能不被渲染.
在任何给定时间, 每个 SVG 元素 (或 use 元素影子树中的元素实例) 要么已渲染, 要么未渲染. 元素当前是否被渲染不仅影响 其视觉显示, 还影响交互性 和几何计算.
元素在以下五种情况中的任何一种下都不会渲染:
未渲染元素:
未渲染元素不会在文档无障碍树中表示. 尽管如此, 它们仍然是文档模型的一部分, 并 参与样式继承和层叠.
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’ 元素或容器元素本身, 其继承值可以影响后代元素.
在文档某一部分 (或另一文档中) 定义的图形内容 可以用于渲染其他元素. 从渲染角度看, 有两类重用图形:
影子 DOM 元素与普通元素以相同方式渲染, 就好像宿主元素 (例如 ‘use’ 元素) 是一个容器, 而影子内容是其后代. 影子 DOM 元素上的样式和几何特性 独立于其 被引用文档子树中的源元素进行解析. display 特性对 影子元素具有正常作用, 但适用于 ‘symbol’ 元素的特殊规则除外.
相比之下, 图形效果元素会生成一个自包含的 SVG 片段, 该片段会作为堆叠上下文 和一个隔离 组独立渲染. 此片段的画布会被缩放 图形效果元素的子内容 会渲染并合成到此画布中. 扁平化后的画布整体会被视为矢量图像, 用于与其他绘制层进行合成和混合
图形效果元素的任何子内容上的 display 特性
在设置为 none 时具有正常作用,
会将该子树排除在渲染使用之外.
但是, 图形效果不会因
图形效果元素或其祖先上的 display: none
值而改变.
SVG 使用渲染的“画家模型”. 绘制 通过连续操作应用于输出设备, 使得每次操作都会绘制输出设备的某个区域, 并可能遮盖此前已绘制的内容. 每个对象或组绘制后, 它就成为 下一次绘制操作背景的一部分. SVG 2 支持高级混合模式和合成操作, 用于控制每次绘制操作如何与背景交互. 管理这些绘制操作的规则概述于 合成与混合规范.
SVG 中的元素位于 SVG 视口的 x 轴和 y 轴上. 当元素重叠时, 它们的 绘制顺序决定哪个元素显示在前面. 这种从前到后 的顺序称为 z 轴.
默认情况下, 元素按文档顺序绘制: 标记中 较晚出现的元素会绘制在较早出现的元素 之上. 元素被分组为 堆叠上下文, 它们收集一组元素并将其作为一个整体进行绘制.
堆叠上下文决定元素彼此叠加的绘制 顺序, 以及确定指针事件 目标时哪个元素位于最上层. 它们不会影响元素在 DOM 树中的位置, 也不会影响其大小或方向 — 只影响它们 的绘制顺序.
每个元素都属于一个堆叠上下文. 给定堆叠 上下文中的元素必须根据文档顺序进行堆叠.
堆叠上下文可以包含更多堆叠上下文. 从其父堆叠上下文的 角度来看, 一个堆叠上下文是原子的: 当父级 确定绘制顺序时, 子堆叠上下文被视为单个 不可分割的项. 外部元素不能绘制在 其内部元素之间.
除 ‘foreignObject’ 元素外, SVG 元素创建的堆叠上下文从后到 前 的堆叠顺序为:
由于 ‘foreignObject’ 元素在 CSS 术语中创建一个“固定定位包含块”, 因此 由 ‘foreignObject’ 元素创建的堆叠上下文的 规范性堆叠顺序规则是 CSS 2.1 附录 E 中的规则.
如果满足以下任何条件, 则必须在 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 中建立堆叠上下文时 |
分组元素, 例如 ‘g’ 元素 (请参阅容器元素
) 会创建一个合成组.
类似地, ‘use’
元素会为其影子内容创建一个合成组.
合成与混合
规范以规范性方式描述如何渲染合成组.
在 SVG 中, 可以对组应用效果. 例如, 不透明度, 滤镜
或遮罩. 这些效果会应用于组的渲染结果,
紧接在对组应用任何变换之前, 而变换则
紧接在组与
组背景混合并合成之前应用.
对组应用任何此类效果都会使该
组成为隔离组.
因此, 渲染合成
组遵循以下步骤:
如果组是隔离的:
有关 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’ 元素, 每个元素都包含重叠的红色和绿色圆, 如下所示:
SVG 支持三种可以渲染到画布上的基本图形元素 类型:
形状和文本可以被填充 (即, 将绘制应用于 形状内部) 和描边 (即, 沿形状轮廓 应用绘制).
对于某些类型的形状, 可以在 形状边界沿线的位置绘制标记 符号 (其本身可以由形状, 文本和图像的任意组合构成). 每个标记符号 都会像其图形内容在 使用给定标记符号的形状对象之后展开到 SVG 文档树中一样进行绘制. 标记 符号的图形内容使用与图形 元素相同的方法渲染. 标记符号不适用于文本.
填充, 描边和标记的绘制顺序由 paint-order 特性决定. 默认情况下, 先绘制填充, 然后绘制描边, 最后绘制 标记符号. 标记符号沿 形状轮廓按顺序渲染, 从形状起点到 形状终点.
填充和描边操作彼此完全独立; 例如, 每个填充或描边操作都有自己的不透明度设置.
SVG 支持多种可用于 填充和描边操作的内置绘制类型. 这些内容在 绘制服务器中描述.
渲染栅格图像时, 原始样本会 使用标准算法“重采样”, 以在 输出设备所需的位置生成样本. 重采样 要求在 一致性要求中讨论.
与 HTML [HTML, 10.4.2] 中一样, 具有相同绝对 URL 和相同图像 数据的所有动画图像都应作为一个组同步到同一时间线进行渲染, 时间线从最近最早加入该 组的时间开始.
当用户代理要重新启动显示 动画图像的 img 元素的动画时, 该 img 元素的节点文档中具有相同绝对 URL 和相同 图像数据的所有动画图像都应从头重新启动其 动画.
SVG 允许过滤任何绘制操作. (请参阅 滤镜效果.)
在这种情况下, 结果必须如同绘制 操作已应用于一个 初始化为透明黑色的中间画布, 其大小由 滤镜效果中给出的规则决定, 然后 再由 滤镜效果中定义的过程进行过滤.
SVG 支持以下裁剪/遮罩功能:
裁剪和遮罩都在 CSS Masking 模块 [css-masking-1] 中规定.
SVG 文档片段可以是半不透明的.
根据合成与 混合规范, ‘svg’ 元素始终 创建一个隔离 组. 当 SVG 文档是顶级文档时, 即它没有嵌入另一个文档中, 根 ‘svg’ 元素 被视为页面 组, 并与 100% 不透明的白色背景进行合成. 在所有其他情况下, SVG 文档或文档片段都会在保留不透明度的情况下 合成到父文档中.
有关 overflow 的定义, 请参阅层叠样式表第 2 级修订版 1 (CSS 2.1) 规范 [CSS2].
| 元素 | 初始值 | 用户代理样式表 | 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 节); 但是, 还适用以下附加要点:
属性或特性的初始值是在 未指定该属性或特性,或者其具有 无效值时使用的值。 此值用于渲染、计算 动画值, 以及通过 DOM 接口访问属性或特性时。
在本规范中,属性使用属性定义 表进行定义,其形式如下:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| exampleattr | <length> | none | none | 是 |
“值”列描述属性的语法。描述属性语法有 六种方法:
| SVG 2 要求: | 考虑放宽呈现属性值的大小写敏感性。 |
|---|---|
| 决议: | 我们将使特性值不区分 大小写。 |
| 目的: | 使呈现属性语法解析与相应 CSS 特性的解析保持一致。 |
| 负责人: | Cameron (ACTION-3276) |
| 状态: | 已完成 |
当解析使用 CSS 值定义语法定义的呈现属性 时,按如下方式进行:
插入 <number> 符号允许在呈现属性中使用 无单位的长度和角度,同时 不允许在相应特性值中使用它们。
请注意,所有呈现属性 都是 通过引用其对应的 CSS 特性定义的,因此使用 CSS 值定义语法来定义。
当解析任何其他使用 CSS 值 定义语法定义的属性时,通过 根据属性定义 表中给出的语法解析属性值来进行。
请注意,这允许在此类属性中使用 CSS 注释和转义。 例如,值 '10\px/**/' 在 ‘rect’ 元素的 ‘x’ 呈现属性中 会成功解析为 '10px'。
当解析定义为 URL 的属性时, 通过使用属性值作为 input,文档 URL 作为 base 调用 URL 解析器 [URL] 来进行。
“初始值”列给出属性的初始值。 当属性无法根据指定的 CSS 值定义语法、 ABNF 或 EBNF 语法进行解析,或者根据 URL 标准进行解析 或按描述如何解析该属性的文字说明进行解析时指示失败, 则假定该属性已被指定为给定的初始 值。
除非另有说明,SVG 属性以及定义为对 SVG 元素产生作用的 特性中的数值必须 至少支持宿主 架构支持的所有有限单精度值。
建议在坐标系统变换等操作中执行更高精度的浮点 存储和计算,以提供尽可能高的 精度并防止舍入误差。
符合规范的 SVG 查看器 必须根据其 一致性类别执行数值计算,如一致性标准中所述。
某些数值属性和特性值具有受限的范围。 其他值将受设备能力的限制。 如果未另行指定, 用户代理应尽可能推迟任何超出范围的错误检查, 直到渲染过程中的尽可能后期。 这对于设备限制尤其重要, 因为复合操作 可能产生超出范围的中间值,但 最终值却位于范围内。
支持脚本执行的符合规范的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(无行动项) |
SVG DOM 是依据 Web IDL 接口定义的。本规范中的所有 IDL 片段必须按照 Web IDL 规范中的描述, 解释为符合规范的 IDL 片段所要求的内容。[WebIDL]
SVG DOM 建立在多个 DOM 规范之上。具体而言:
SVG DOM 遵循与 HTML 和 DOM 标准类似的命名约定 ([HTML], [DOM])。
所有名称均由一个或多个英文单词 连接在一起组成单个字符串。特性或 方法名称以小写的首个关键词开头,并且 后续每个单词都以大写字母开头。例如, 返回文档元信息(例如 文件创建日期)的特性可能命名为 "fileDateCreated"。
本规范中定义的接口名称几乎都以 "SVG" 开头。
表示 SVG 命名空间元素的 DOM Element
对象的接口
遵循
SVGElementNameElement 格式,其中 ElementName
是首字母大写的元素标签名称。
因此 SVGRadialGradientElement
是 ‘radialGradient’ 元素的接口。
此大小写约定的一个例外是 SVGSVGElement, 其中整个标签名称都大写。
任何被要求支持 SVG DOM 的 SVG 软件 都必须按如下方式增强为 SVG 文档 片段创建的 DOM 元素:
每个与受支持的 SVG 元素对应的 Element 对象(即, 命名空间 URI 为 "http://www.w3.org/2000/svg",并且 本地名称是本规范 或软件实现的其他规范中所定义的元素之一) 还必须实现元素定义中指定的 DOM 接口。
SVG 命名空间中本地名称与软件支持的任何规范 中所定义的元素均不匹配的元素, 仍必须实现 SVGElement 接口。
在‘rect’ 元素中, 指定了 SVGRectElement 接口。 这意味着每个命名空间 URI 为 "http://www.w3.org/2000/svg" 且本地名称为 "rect" 的 Element 对象还必须实现 SVGRectElement。
许多 SVG DOM 特性(IDL 属性) 反映对应元素上的内容属性或特性, , 这意味着内容属性和 IDL 属性表示相同的底层数据。 例如, SVGAnimatedLength ry 位于 SVGRectElement 中, 反映关联的 ry 呈现属性,该属性位于 ‘rect’ 元素上。
这种反映的方式取决于 IDL 属性的类型:
从较高层面看,对象的
baseVal 用于反映内容属性的值。
对于反映 CSS 特性的对象,baseVal 用于
反映呈现属性。
此关系是实时的,并且在属性或其反映特性中的任一方被修改时, 值必须同步 (遵循同步反映值中的规则)。
如果该属性未在文档标记中显式指定, 反映对象仍会在访问时 初始化为该属性的初始值。 如果属性的初始值为 (none), 则对象按 反映空初始值中的定义进行初始化。 此新构造的对象在 首次被修改之前不会在元素上生成属性。对相应 属性所做的修改会立即反映到对象中。
如果访问 lineElement.x1.baseVal
(其中 lineElement 是 SVGLineElement 的实例)
且文档中未指定 ‘x1’
属性,则返回的
SVGLength 对象将表示值
0 user units,
因为该属性的初始值为 0。
每当反映的内容属性的基值发生变化时, 反映对象必须在值变化之后立即通过执行以下步骤 进行同步:
当一个反映的内容属性需要 重新序列化时,可选择使用 特定值,必须执行以下步骤:
这意味着如果枚举值
以某种方式被设置为“未知”值,内容属性将被
设置为空字符串。
但是,无法直接在
SVGAnimatedEnumeration 对象上设置此未知值;
它表示标记中设置的未知属性值。
根据 value 的类型, 这些值将是 SVGNumber、SVGLength、 SVGPoint 或 SVGTransform 对象,或 DOMString 值。
当初始化一个反映 null 或空 初始值的 SVG DOM 属性时, 必须根据其数据类型初始化该特性, 如本节中所定义。 仅当反映的内容属性没有显式值, 并且属性定义表中的初始值为 (none) 时才会发生这种情况。
如果下面未列出某个接口,则意味着 对象初始化应使用该接口所包含对象的值进行,例如, SVGAnimatedString 由两个 DOMString 成员组成, 而 SVGRect 由多个 double 组成。
如果访问 textElement.dx.baseVal
(其中 textElement 是 SVGTextElement 的实例)
且文档中未指定 ‘dx’
属性,则返回的
SVGLengthList 对象将为空。
如果脚本将一个反映的 DOM 属性 设置为内容属性的无效值(例如, 对要求非负数的属性设置负数),除非 本规范另有说明,否则设置时不会 抛出异常,但给定的文档片段将在技术上成为 处于错误状态,如 错误处理中所述。
使用整数常量反映枚举值的 DOM 属性是一个例外: 当设置为超出范围的整数 或表示未知属性值的常量 (0) 时,它们会抛出 TypeError。 这与 WebIDL 枚举类型的行为 [WebIDL] 一致。
所有直接对应于 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。
| 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() 时,执行以下 步骤:
getScreenCTM 方法 用于获取将当前元素的坐标 系统变换到 SVG 文档片段的 SVG 视口坐标系统的矩阵。 调用 getScreenCTM() 时,执行以下步骤:
这将包括:
此方法更适合命名为 getClientCTM,
但出于历史原因保留名称 getScreenCTM。
接口 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) 时,执行以下步骤:
与 getTotalLength 一样, 这里不考虑 ‘pathLength’ 属性。
SVGNumber 接口主要用于 表示作为 SVGNumberList 一部分的 <number> 值。 单独的 SVGNumber 对象也可以由脚本创建。
SVGNumber 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。 通过 animVal IDL 属性反映的 SVGNumber 对象始终 只读。
SVGNumber 对象可以与特定元素关联。如果对象反映 属性,则关联元素用于 确定要更新哪个元素的内容属性。除非另有说明,SVGNumber 对象 不与任何元素关联。
每个 SVGNumber 对象 都以两种模式之一 运行。它可以:
SVGNumber 对象维护一个内部数值, 称为其值。
[Exposed=Window] interface SVGNumber { attribute float value; };
value IDL 属性 表示该数值。获取 value 时, 返回 SVGNumber 的 值。
设置 value 时,执行以下 步骤:
SVGLength 接口用于表示 可以是 <length>、<percentage> 或 <number> 的值。
SVGLength 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。 通过 animVal IDL 属性反映的 SVGLength 对象始终 只读。
SVGLength 对象可以与特定元素关联,同时还可以指定方向性: 水平、垂直或未指定。关联元素和长度的方向性 用于将百分比值解析为用户单位,如果对象反映 属性,也用于确定要更新哪个元素的内容属性。除非另有 说明,SVGLength 对象不 与任何元素关联,并且 具有未指定的方向性。
每个 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 时,执行以下步骤:
例如,对于带有 ch 单位的 <length> 或具有非标量值(例如 calc())的值, 将返回 SVG_LENGTHTYPE_UNKNOWN。
value IDL 属性表示 SVGLength 的以用户单位表示的值。 获取 value 时,执行以下步骤:
设置 value 时,执行以下步骤:
valueInSpecifiedUnits IDL 属性表示 SVGLength 的值的数值因子。 获取 valueInSpecifiedUnits 时,执行以下 步骤:
因此,对于 '12%' 和 12em, valueInSpecifiedUnits 都会返回 12,但对于 calc(12px + 5%) 等非标量值 则会返回 0。
设置 valueInSpecifiedUnits 时,执行以下 步骤:
valueAsString IDL 属性表示 SVGLength 的值的字符串形式。 获取 valueAsString 时,执行以下步骤:
设置 valueAsString 时,执行以下步骤:
newValueSpecifiedUnits 方法用于以有类型的方式设置 SVGLength 的值。 调用 newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 时,执行以下 步骤:
convertToSpecifiedUnits 方法用于将 SVGLength 的值 转换为特定类型。 调用 convertToSpecifiedUnits(unitType) 时,执行以下步骤:
SVGAngle 接口用于表示 可以是 <angle> 或 <number> 的值。
SVGAngle 对象可以被指定为只读, 这意味着尝试修改该对象将导致抛出异常, 如下所述。通过 animVal 属性反映的 SVGAngle 始终只读。
SVGAngle 对象可以与特定元素关联。如果对象反映 属性,则关联元素用于 确定要更新哪个元素的内容属性。除非另有说明,SVGAngle 对象 不与任何元素关联。
每个 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 时,执行以下步骤:
例如,对于带有 turn 单位的 <angle>, 将返回 SVG_ANGLETYPE_UNKNOWN。
value IDL 属性表示 SVGAngle 的以度为单位的值。 获取 value 时,执行以下步骤:
设置 value 时,执行以下步骤:
valueInSpecifiedUnits IDL 属性表示 SVGAngle 的值的数值因子。 获取 valueInSpecifiedUnits 时,执行以下 步骤:
设置 valueInSpecifiedUnits 时,执行以下 步骤:
valueAsString IDL 属性表示 SVGAngle 的值的字符串形式。 获取 valueAsString 时,执行以下步骤:
设置 valueAsString 时,执行以下步骤:
newValueSpecifiedUnits 方法用于以有类型的方式设置 SVGAngle 的值。 调用 newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 时,执行以下 步骤:
convertToSpecifiedUnits 方法用于将 SVGAngle 的值 转换为特定类型。 调用 convertToSpecifiedUnits(unitType) 时,执行以下步骤:
| 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 属性反映的列表接口 对象始终只读。
列表接口对象 通过执行以下步骤进行同步:
每当需要分离一个列表元素对象时, 根据列表元素类型执行以下步骤:
每当需要附加一个列表元素对象时, 根据列表元素类型执行以下步骤:
支持的特性索引 of a 列表接口对象,是所有小于列表长度的非负整数的集合。
length 和 numberOfItems IDL 属性 表示列表长度,获取时直接返回 列表长度。
clear 方法用于 删除列表中的所有项目。调用 clear() 时,执行以下步骤:
initialize 方法 用于清空列表并向其中添加一个指定值。 调用 initialize(newItem) 时,执行以下步骤:
getItem 方法用于 获取列表中指定位置的项目。调用 getItem(index) 时,执行以下步骤:
请注意,如果列表的元素类型是对象类型, 例如 SVGLength,则返回的是该对象的引用,而不是 其副本。
insertItemBefore 方法用于在列表中特定位置插入元素。 调用 insertItemBefore(newItem, index) 时, 执行以下步骤:
replaceItem 方法 用于用新项目替换列表中的现有项目。 调用 replaceItem(newItem, index) 时, 执行以下步骤:
removeItem 方法 用于从列表中删除项目。调用 removeItem(index) 时,执行以下步骤:
appendItem 方法 用于将项目追加到列表末尾。调用 appendItem(newItem) 时,执行以下步骤:
索引特性设置器的行为 与 replaceItem 方法相同。
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 的所有接口成员的行为 都在上面的列表接口一节中定义。
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 的所有接口成员的行为 都在上面的列表接口一节中定义。
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 的所有接口成员的行为 都在上面的列表接口一节中定义。
以下接口用于表示
可动画内容属性的反映值。
它们各自由表示相同数据的两个组件对象组成:
baseVal 和 animVal。
baseVal(基值)对象可修改,
用于更新相应属性值。
在 SVG 1.1 中,SVG DOM 接口的 animVal 属性表示
反映属性的当前动画值。在此版本的 SVG 中,
animVal 不再表示当前动画值,而是
baseVal 的别名。
SVGAnimatedBoolean 对象用于 反映 一个接受布尔值的可动画属性。
[Exposed=Window] interface SVGAnimatedBoolean { attribute boolean baseVal; readonly attribute boolean animVal; };
baseVal 和 animVal IDL 属性 都表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 执行以下步骤:
设置 baseVal 时, 如果值为 true,则将反映属性设置为 "true",否则设置为 "false" 。
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 时, 执行以下步骤:
设置 baseVal 时, 执行以下步骤:
SVGAnimatedInteger 对象用于 反映 一个接受整数值的可动画属性(例如 ‘feTurbulence’ 上的 ‘numOctaves’)。 它还 用于反映一个接受 一个整数后跟可选第二个整数的可动画属性的一部分(例如 ‘feConvolveMatrix’ 上的 ‘order’)。
此 SVGAnimatedInteger 接口 未在本规范中使用,不过 滤镜效果 规范多处使用了它。
[Exposed=Window] interface SVGAnimatedInteger { attribute long baseVal; readonly attribute long animVal; };
对于SVGAnimatedInteger 对象,如果它们反映 一个接受单个整数值的可动画属性,则 baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 对于反映一个接受 一个整数后跟可选第二个整数的属性中的一个整数的对象,它们表示 两个整数之一当前的非动画值。获取 baseVal 或 animVal 时, 执行以下步骤:
例如,‘order’ 的定义指出,隐式的第二个整数与显式的 第一个整数相同。
设置 baseVal 时, 执行以下步骤:
SVGAnimatedNumber 对象用于 反映 一个接受数值的可动画属性(例如 ‘path’ 上的 ‘pathLength’)。它还 用于反映一个接受 一个数值后跟可选第二个数值的可动画属性的一部分(例如 ‘feDiffuseLighting’ 上的 ‘kernelUnitLength’)。
[Exposed=Window] interface SVGAnimatedNumber { attribute float baseVal; readonly attribute float animVal; };
对于SVGAnimatedNumber 对象,如果它们反映 一个接受单个数值的可动画属性,则 baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 对于反映一个接受 一个数值后跟可选第二个数值的属性中的一个数值的对象,它们表示 两个数值之一当前的非动画值。获取 baseVal 或 animVal 时, 执行以下步骤:
例如,‘kernelUnitLength’ 的定义指出,隐式的第二个数值与显式的 第一个数值相同。
设置 baseVal 时, 执行以下步骤:
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 对象,该对象:
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 对象,该对象:
SVGAnimatedString 对象用于 反映 一个接受字符串值的可动画属性。还可以选择 定义为额外反映第二个已弃用属性。
[Exposed=Window] interface SVGAnimatedString { attribute (DOMString or TrustedScriptURL) baseVal; readonly attribute DOMString animVal; };
baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 执行以下步骤:
对于 href 成员在 SVGURIReference 接口上的情况, 如果 已弃用的 ‘xlink:href’ 属性存在 而 ‘href’ 属性不存在, 则会返回前者, 在所有其他情况下则返回 ‘href’ 属性。
设置 baseVal 时, 执行以下步骤:
SVG 尚未拥有完整的脚本处理模型。 Trusted Types 假设属性和 文本正文修改保护的行为与 HTML 脚本类似。
对于 href 成员在 SVGURIReference 接口上的情况, 如果 已弃用的 ‘xlink:href’ 属性存在 而 ‘href’ 属性不存在, 则会设置前者, 在所有其他情况下则设置 ‘href’ 属性。
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 对象时,以及 此后每当反映内容属性 被添加、删除或更改时,执行以下步骤:
每当 baseVal 或 animVal SVGRect 对象的 x 坐标、 y 坐标、 width 或 height 特性 发生变化时, 除非是作为前述将内容属性值 反映到 SVGRect 中的算法的一部分,否则反映的 内容属性必须被重新序列化。
SVGAnimatedNumberList 对象 用于反映一个接受 <number> 值列表的可动画属性。
[Exposed=Window] interface SVGAnimatedNumberList { [SameObject] readonly attribute SVGNumberList baseVal; [SameObject] readonly attribute SVGNumberList animVal; };
baseVal 和 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 返回一个 SVGNumberList 对象,该对象 反映 反映属性的基值。
SVGAnimatedLengthList 对象 用于反映一个接受 <length>、<percentage> 或 <number> 值列表的可动画属性。
[Exposed=Window] interface SVGAnimatedLengthList { [SameObject] readonly attribute SVGLengthList baseVal; [SameObject] readonly attribute SVGLengthList animVal; };
baseVal 或 animVal IDL 属性 表示反映属性当前的非动画值。 获取 baseVal 或 animVal 时, 返回一个 SVGLengthList 对象,该对象 反映 反映属性的基值。
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 | 其他类型的值。 |
SVGTests 接口用于反映 条件处理属性,并被混入 支持这些属性的元素的其他 接口中。
interface mixin SVGTests {
[SameObject] readonly attribute SVGStringList requiredExtensions;
[SameObject] readonly attribute SVGStringList systemLanguage;
};
requiredExtensions IDL 属性 反映 ‘requiredExtensions’ 内容 属性。
systemLanguage IDL 属性 反映 ‘systemLanguage’ 内容属性。
SVGFitToViewBox 接口用于 反映 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性, 并被混入支持 这两个属性的元素的其他接口中。
interface mixin SVGFitToViewBox {
[SameObject] readonly attribute SVGAnimatedRect viewBox;
[SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
viewBox IDL 属性 反映 ‘viewBox’ 内容属性。
preserveAspectRatio IDL 属性 反映 ‘preserveAspectRatio’ 内容 属性。
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’ 属性为目标的别名。
一个 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 视口。)
当 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]。
| SVG 2 要求: | 支持变换 ‘svg’ 元素。 |
|---|---|
| 决议: | 我们将在 SVG 2 中允许 ‘svg’ 使用 ‘transform’。 |
| 目的: | 允许对嵌套的 ‘svg’ 元素进行变换,以符合作者 的预期。 |
| 负责人: | Dirk(无需操作) |
| 状态: | 已完成 |
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 元素支持的具有 相同名称的通用 事件处理程序。
‘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>
‘g’ 元素可以包含其他 ‘g’ 元素并任意深度地 嵌套其中。
SVG 允许定义图形对象以供以后重用. 为此,SVG 广泛使用 URL 引用 构造 [rfc3987]. 例如,要使用线性渐变填充矩形,可以 定义一个 ‘linearGradient’ 元素,并为其 指定一个 ‘id’ 特性,该特性可以 在矩形的 fill 特性值中被引用,如下所示:
<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>
某些类型的元素,例如渐变,本身不会产生图形结果. 因此它们可以 放置在任何方便的位置. 但是,有时需要定义一个图形对象并 防止它被直接渲染. 它仅用于在其他地方被引用. 为此,并且为了 方便地对已定义内容进行分组,SVG 提供了 ‘defs’ 元素.
建议在可能的情况下,在文档顺序中先定义被引用元素, 再定义使用这些元素的元素. 将所有被引用元素收集 在文件顶部附近的单个 ‘defs’ 元素 内 可以使标记更易于阅读和理解.
‘defs’ 元素是 用于容纳 被引用元素的容器元素. 出于可理解性和 无障碍方面的原因,建议 在可能的情况下,将被引用元素定义在 ‘defs’ 内.
‘defs’ 的内容模型 与 ‘g’ 元素相同; 因此,任何 可以作为 ‘g’ 子元素的元素也可以作为 ‘defs’ 的子元素,反之亦然.
‘defs’ 的后代元素不会被直接渲染; ‘defs’ 元素的 display 值 必须始终由 用户代理样式表 设置为 none ,并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性. 但是请注意,‘defs’ 的后代元素 始终存在于源树中,因此始终可以 被其他元素引用; 因此,‘defs’ 元素上的 display 特性值不会 阻止其他元素引用这些元素.
‘symbol’ 元素 用于定义图形模板, 这些模板可以由 ‘use’ 元素实例化,但不会 被直接渲染.
‘symbol’ 为 其包含的图形建立嵌套坐标系统. 当 symbol 被实例化 为 ‘use’ 元素的被引用元素时, 因此它的渲染方式与嵌套的 ‘svg’ 元素非常相似.
x, y, width, 和 height 几何特性 与 ‘svg’ 元素上的作用相同, 当 ‘symbol’ 被 ‘use’ 元素实例化时. 特别是,如果 width 和 height 的计算值为 auto (并且没有被实例化它的 ‘use’ 元素上的值覆盖), 那么它们将被视为值 100%.
SVG 2 中新增. 允许在 symbol 上指定几何特性 提供了更一致的渲染模型, 并允许作者为每个 symbol 设置默认大小 (该大小仍可被 ‘use’ 元素上的属性覆盖).
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| 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’ 上未指定等效属性时的行为.
对在同一文档中多次使用的图形使用 ‘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 定义处理,并且不得被渲染.
| SVG 2 要求: | 允许 ‘use’ 通过省略片段来引用外部文档的根元素。 |
|---|---|
| 决议: | 我们将放宽对 特定元素的引用要求,以允许省略片段来表示引用根 元素,只要这样做合理,例如 SVG 2 中的 use。 |
| 目的: | 避免要求作者修改被引用文档,以便为根 元素添加 ID。 |
| 负责人: | Cameron (ACTION-3417) |
| 状态: | 已完成 |
‘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’ 不会被渲染。 为进行边界框计算, 它等同于一个空的容器元素。
由 ‘use’ 元素生成的重用图形 是根据影子树定义的。 因此,就交互性和样式继承而言, 它们与 SVG 中其他类型的重用 图形非常不同, 例如 ‘pattern’ 和 ‘marker’ 内容。
影子树中的元素会像 ‘use’ 元素是 容器而它们是其子元素一样进行渲染。 但是,SVG 文档对象模型 (DOM) 仅包含 ‘use’ 元素和 其属性。 SVG DOM 不包含 作为 ‘use’ 元素子元素的元素实例。
支持脚本和文档对象模型的用户代理 必须按照本节中的描述 并遵循 dom 规范 [dom], 或其未来的替代规范,实现use 元素影子树。 相比之下,不支持 动态交互处理模式的用户代理 可能不需要实现影子 DOM 的所有细节。 但是,所有用户代理都必须确保重用图形的布局 和样式继承 以及适用时的声明式动画, 都像实现了影子 DOM 时一样渲染。
讨论 ‘use’ 元素 及其影子树时适用以下定义:
以下示例和图表说明了当 ‘use’ 元素引用一个组时,这些定义 彼此之间的关系:
<svg>
<defs>
<g id="icon">
<circle/>
<rect/>
</g>
</defs>
<use href="#icon"/>
</svg>
包含 ‘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’ 元素或 元素实例 处于错误状态,并且用户代理不得渲染它。
‘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 单位的图形效果。
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 中
样式克隆的定义方式有所不同。
以下示例展示了保持一致和发生变化的样式匹配规则。 左侧的圆被重用来绘制右侧的圆。 原始圆通过多种方式设置了样式:
special 的元素的后代。
在 SVG 1.1 样式克隆模型中, 指定样式值 会从原始元素克隆到元素实例。 重用的圆将具有与原始圆相同的样式, 不同之处在于 fill 值将从 ‘use’ (orange) 而不是从 ‘g’ (blue) 继承。
在 SVG 2 要求的影子 DOM 模型中, 重用圆的样式按如下方式计算:
special 的元素的后代;相反,圆上的 stroke 颜色从宿主
‘use’ 元素
(purple) 继承。
因此,重用的圆在填充颜色(因为它从 不同元素继承)和描边颜色(因为复杂选择器不再匹配)两方面都与原始圆不同。
<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
先前版本的 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。 当悬停或聚焦图形时,隐藏效果会被移除。
示例 Use-visibility-hidden,默认样式
示例 Use-visibility-hidden,交互样式
该示例还演示了其他样式特性的继承 (fill 和 stroke) 这些特性指定在 ‘use’ 元素上, 以及如果 symbol 内的任何元素 指定显式值时这些值同样不会被使用(例如粉色的鼻子和耳朵以及白色尾巴)。
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 和影子节点树中,
当鼠标悬停在其中任何一个上时 -->
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
将指向影子树中的只读元素实例。
SVG 包含一个 ‘switch’ 元素以及 ‘requiredExtensions’ 和 ‘systemLanguage’ 属性,以 提供一种 根据给定用户代理的能力或用户语言 指定替代视图的能力。
‘requiredExtensions’ 和 ‘systemLanguage’ 属性充当 测试,并 求值为 true 或 false。‘switch’ 会渲染第一个 所有这些属性测试均为 true 的子元素。如果 未指定给定属性,则 假定值为 true。
当一个元素由于条件处理而被排除时,
会将其视为 display 特性的使用值为 none。
与 display 特性类似,条件
处理
属性仅影响元素的直接渲染,并且
不会阻止其他元素成功引用这些元素
(例如通过 ‘use’)。
因此:
先前版本的 SVG 包含第三个条件处理属性,
requiredFeatures。
此属性旨在允许作者为
仅实现 SVG 规范部分功能的用户代理提供回退行为。
遗憾的是,该属性糟糕的规范定义和实现使其无法可靠地
用作功能支持测试。
‘switch’ 元素 按顺序求值 其直接子元素上的 ‘requiredExtensions’ 和 ‘systemLanguage’ 属性,然后处理并渲染第一个这些 属性求值为 true 的子元素。所有其他子元素都将被跳过,因此 不会渲染。如果子元素是容器元素,例如 ‘g’,则整个子树 要么被处理/渲染,要么 被跳过/不渲染。
在 SVG 中,对 ‘systemLanguage’ 属性求值时, ‘switch’ 元素后代元素的 求值顺序必须如同 SMIL 规范 [SMIL] 中定义的 'allowReorder' 属性 始终具有值 'yes'。
请注意,特性 display 和 visibility 的值对 ‘switch’ 元素 的处理没有影响。特别是,将 display 设置为 none 于 ‘switch’ 元素的子元素上, 对与 ‘switch’ 元素处理相关的 true/false 测试没有影响。
‘switch’ 元素 不会影响 ‘script’ 和 ‘style’ 元素的处理。
有关更多信息和示例,请参阅 嵌入外部 对象类型。
‘requiredExtensions’ 属性定义所需语言扩展的列表。 语言扩展是用户代理中 超出本规范所定义功能集的能力。每个 扩展都由一个URL 引用标识。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| requiredExtensions | 空格 分隔的标记集合 [HTML] | (none) | 否 |
该值是一个URL 引用列表, 用于标识所需扩展,各个 值之间以空白分隔。它确定所有命名的 扩展是否都受用户 代理支持。如果给定的所有扩展都受支持,则 该属性求值为 true;否则,当前 元素及其子元素会被跳过,因此不会 被渲染。
如果给定的URL 引用本身包含空白,则该 空白必须进行转义。
如果属性不存在,则其隐式求值为 "true"。如果向 属性 ‘requiredExtensions’ 提供 null 字符串或空字符串值,则该 属性求值为 "false"。
‘requiredExtensions’ 通常 与 ‘switch’ 元素结合使用。如果 ‘requiredExtensions’ 用于 其他 情况,则它表示给定元素是否 渲染的简单开关。
扩展的 URL 名称应包含版本 信息,例如 "http://example.org/SVGExtensionXYZ/1.0", 以便脚本作者能够区分给定扩展的不同 版本。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| systemLanguage | 逗号 分隔的标记集合 [HTML] | (none) | 否 |
该值是一个逗号 分隔的标记集合,其中每个标记都必须是 Language-Tag 值,如 BCP 47 中所定义 [BCP47]。
要对值为 V 的 ‘systemLanguage’ 属性进行求值:
令 tags 为将 V 解析为 逗号 分隔的标记集合 [HTML] 的结果。
从 tags 中移除任何为空字符串的标记。
如果 tags 为空,则返回 false。
令 user languages 为用户按顺序排列的首选语言列表。
对于 tags 中的每个 tag,以及 user languages 中的每个 user-lang:
如果 tag 与 user-lang ASCII 大小写不敏感 匹配,则返回 true。
如果 user-lang 是 tag 的 ASCII 大小写不敏感 前缀,并且 tag 中紧跟在该前缀 之后的码点是 U+002D HYPHEN-MINUS (-),则返回 true。
返回 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’ 用于其他 情况,则它表示给定 元素是否渲染的简单开关。
基于 ‘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’ 子 元素表示该元素的简短文本替代。
对于链接,这可以是标题或目标资源的描述;对于 图像或绘图对象,它可以是图形的简短 描述;对于交互式内容,它可以是使用 该元素的标签或说明;等等。
如果绘图元素也有可见标签(例如使用 ‘text’ 元素),作者不应在 ‘title’ 元素中提供 冗余信息。 相反,视觉标签应与绘图元素 使用 ‘aria-labelledby’ 属性关联。
交互式用户代理应根据 用户交互提供 ‘title’ 元素的纯文本内容,并采用 与平台约定一致的方式; 现有用户代理通常会在悬停父元素时将 ‘title’ 元素渲染为 工具提示。
作者应为独立 SVG 文档中的根 svg 元素提供 ‘title’ 子元素。由于用户经常脱离上下文查看文档, 作者应提供上下文丰富的标题。因此,不应使用 "Introduction" 这样提供上下文背景很少的标题, 而应改为提供 "Introduction to Medieval Bee-Keeping" 这样的标题。出于无障碍原因,用户代理应始终使 根 svg 元素的 ‘title’ 子元素内容可供 用户使用。 不过,这通常通过与嵌套 SVG 和图形 元素所使用的工具提示不同的方式完成,例如显示在浏览器标签页中。
‘desc’ 元素 表示元素的更详细文本 信息,例如描述。这通常会向辅助 技术公开,以提供更详细的信息,例如图形视觉外观的描述, 或帮助解释复杂小部件的功能。它通常不会提供给其他 用户,因此不应将其用于必要说明。
作者可以使用 ‘aria-describedby’ 属性 将详细信息(包括可见文本)与图形的一部分关联起来 (位于被描述元素或父容器上), 其值是对包含描述的一个或多个 SVG 或 HTML 元素的 ID 引用。 ‘aria-describedby’ 属性在提供描述时优先于 子 ‘desc’ 元素。 如果元素同时具有可见描述和提供补充 信息的子 ‘desc’ 元素, 作者应显式地将元素自身的 ‘id’ 包含在其自己的 ‘aria-describedby’ 列表中,以便将两个描述连接起来。
与 SVG 内容一起包含的元数据应 在 ‘metadata’ 元素中指定。‘metadata’ 的内容应是来自 其他 XML 命名空间的元素,这些命名空间中的元素 应以符合 XML 中的命名空间 推荐标准 [xml-names] 的方式表达。
SVG 2 删除了要求以任何特定方式组织 metadata 元素的建议。
元数据内容不会被直接渲染; ‘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>
对于支持 HTML 的用户代理,SVG 文档中必须支持以下 HTML 元素(位于 HTML 命名空间中):
请注意,base
元素会影响文档中的所有 URL 值,包括例如绘制服务器引用或 ‘use’ 元素引用。
但是,在处理 URL 引用
以标识特定目标元素时,
用户代理必须始终将生成的绝对 URL 与当前文档基 URL 进行比较,
以确定它是否为同文档 URL 引用。
这样,无论文档基 URL 如何变化,
对同一文档中元素仅使用目标片段的引用仍然有效。
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>
‘id’ 属性可用于 所有 SVG 元素:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| id | (见下文) | (none) | 否 |
必须反映元素的 ID [DOM]。 ‘id’ 属性 在节点树中必须唯一, 不得为空字符串, 并且不得包含任何空白字符。
为使 ‘id’ 属性在 XML 文档中 有效,还适用其他要求, 如相关 XML 版本的规范所定义。 独立 SVG 文档使用 XML 1.0 语法 [xml], 其中规定有效的 ‘id’ 值是XML 名称标记。 有效的 XML 1.0 名称仅包含指定字符(字母、数字和少量标点 符号), 并且不能以数字、句点 (.) 字符或连字符减号 (-) 字符开头。
无论 XML 是否有效,用户代理都应处理 SVG 文件中的 ‘id’ 值。
‘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]。
| 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 特性。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| tabindex | 有效整数 [HTML] | (none) | 否 |
此内容属性允许作者控制元素是否可获得焦点、是否 应当可通过 顺序焦点导航到达,以及该元素在顺序焦点 导航中的相对顺序。
名称 "tab index" 来源于通常使用 "tab" 键在可获得焦点的元素之间导航。术语 "tabbing" 指通过顺序焦点导航 在可到达的可获得焦点元素之间向前移动。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| autofocus | 布尔属性 [HTML] | (none) | 否 |
此内容属性允许作者请求一个可获得焦点的元素 在连接到文档后获得焦点。有关详细信息,请参阅 HTML 规范中的 autofocus。
如果元素本身尚不可获得焦点,则该属性不起作用。
所有 SVG 元素都支持 自定义数据 属性, 即不属于任何命名空间且名称以字符串 "data-" 开头的属性。 请参阅 HTML 规范中的自定义数据属性 要求。
请注意,上述 ARIA 属性列表可能会被未来的 WAI-ARIA 规范扩展。
任何可渲染元素都可以指定 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])。
可以在 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]
下表定义了适用于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 | 不得应用任何角色 |
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 属性相同。
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 时, 执行以下步骤:
设置 currentScale 时, 执行以下步骤:
获取 currentTranslate 时, 返回 SVGSVGElement 对象的当前 平移点对象。此对象 表示当前平移 ‘svg’ 元素的 。一个 当前 平移点对象在其 ‘svg’ 元素 不是最外层 svg 元素时必须只读, 否则可写。
有关修改当前 平移点对象如何影响文档的缩放和平移变换,请参阅向 SVGPoint 赋值的规则。
每当文档的缩放和平移变换 响应用户交互而发生变化,或者最外层 svg 元素 发生变化时,执行以下步骤:
当最外层 svg 元素 发生变化时运行这些步骤,将确保如果文档元素被不同的 ‘svg’ 元素替换,则其 currentTranslate 会立即更新,以反映 文档缩放和平移变换的平移分量。
每当一个 ‘svg’ 元素 不再是最外层 svg 元素时, 其当前 平移点对象的 x 和 y 分量必须设置为 0。
suspendRedraw、 unsuspendRedraw、 unsuspendRedrawAll 和 forceRedraw 方法均已弃用,并被定义为不起作用。当 调用 suspendRedraw 方法时,它必须返回 1。
getIntersectionList、 getEnclosureList、 checkIntersection 和 checkEnclosure 方法 用于对图形元素执行几何操作,以 找出其图形内容部分或 完全位于给定矩形内的元素(或检查它们是否如此)。
要查找给定元素 element 的 相交 或被包围后代, 使用给定矩形 rectangle,并以 ancestor 作为解释 rectangle 所采用坐标空间中的元素, 执行以下步骤:
这意味着,尽管我们会检查 use 元素影子 树中的元素, 但不会将元素实例 或其在被引用文档子树中的源元素 放入 result 列表;只返回 ‘use’ 元素本身。
要查找 非容器 图形元素于给定元素 element 内,运行以下 步骤:
当调用 getIntersectionList(rect, referenceElement) 或 getEnclosureList(rect, referenceElement) 时, 运行以下步骤:
当调用 checkIntersection(element, rect) 或 checkEnclosure(element, rect) 时, 运行以下步骤:
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 上的行为相同。
SVGGElement 对象表示 DOM 中的 ‘g’ 元素。
[Exposed=Window] interface SVGGElement : SVGGraphicsElement { };
SVGDefsElement 对象表示 DOM 中的 ‘defs’ 元素。
[Exposed=Window] interface SVGDefsElement : SVGGraphicsElement { };
SVGDescElement 对象表示 DOM 中的 ‘desc’ 元素。
[Exposed=Window] interface SVGDescElement : SVGElement { };
SVGMetadataElement 对象 表示 DOM 中的 ‘metadata’ 元素。
[Exposed=Window] interface SVGMetadataElement : SVGElement { };
SVGTitleElement 对象表示 DOM 中的 ‘title’ 元素。
[Exposed=Window] interface SVGTitleElement : SVGElement { };
SVGSymbolElement 对象 表示 DOM 中的 ‘symbol’ 元素。
[Exposed=Window] interface SVGSymbolElement : SVGGraphicsElement { }; SVGSymbolElement includes SVGFitToViewBox;
SVG 2 中新增。 SVGSymbolElement 接口现在 继承自 SVGGraphicsElement, 因此影子 DOM 中实例化的 symbol 可以作为图形元素进行查询。
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 特性的计算值及其相应的 呈现属性。
每个use 元素影子树的根对象 实现 SVGUseElementShadowRoot 接口。 此接口目前没有定义 对 ShadowRoot 接口 和 DocumentOrShadowRoot 混入 所定义特性和方法的任何扩展。 但是,从作者脚本的角度来看, 以此节点为根的树完全只读。
[Exposed=Window] interface SVGUseElementShadowRoot : ShadowRoot { };
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 的变化。
SVGSwitchElement 对象 表示 DOM 中的 ‘switch’ 元素。
[Exposed=Window] interface SVGSwitchElement : SVGGraphicsElement { };
此接口提供对通过引用嵌入 另一个基于 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 文档。相反,会返回任何文档。
SVG 文档中的元素可以使用 CSS 设置样式. 大多数视觉特征以及元素的某些 几何方面使用 CSS 特性进行控制. 例如, fill 特性控制所使用的绘制 方式来 填充形状内部, 而 width 和 height 特性用于控制 ‘rect’ 元素的大小.
SVG 用户代理必须支持本章所述的所有 CSS 样式 机制.
在 SVG 1.1 中, 对内联样式表的支持 使用 ‘style’ 元素 和 ‘style’ 并非必需. 在 SVG 2 中, 这些是必需的.
| SVG 2 要求: | 将 HTML5 ‘style’ 元素属性添加到 SVG 的 ‘style’ 元素. |
|---|---|
| 决议: | SVG 2 ‘style’ 元素应与 HTML5 ‘style’ 元素保持一致. |
| 目的: | 避免 HTML 和 SVG 内容中 ‘style’ 元素的不同行为令作者感到意外. |
| 负责人: | Cameron (ACTION-3277) |
‘style’ 元素允许 样式表直接嵌入 SVG 内容中. SVG 的 ‘style’ 元素具有 相同的 属性, 与 HTML 中对应的 元素.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| type | (见下文) | (无) | 否 |
此属性将元素内容的样式表语言指定为 媒体类型. [rfc2046]. 如果未指定该属性, 则 假定样式表语言为 CSS. 此属性已过时, 不应使用.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| media | (见下文) | (无) | 否 |
此属性指定一个必须 匹配才能应用样式表的媒体查询. 其值被解析 为 media_query_list. 如果未指定, 则样式表无条件应用.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| title | (见下文) | (无) | 否 |
此属性为样式表指定标题, 在公开和选择替代 样式表时使用. 该属性可取任意值.
‘style’ 及其 属性的语义和处理必须与 HTML ‘style’ 元素的定义相同.
样式表的文本内容绝不会直接渲染; ‘style’ 元素的 display 值 必须始终设置为 none 由用户代理样式表设置, 并且此声明的重要性必须高于任何其他 CSS 规则或呈现属性.
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 样式表.
当 SVG ‘style’ 或 HTML ‘style’ 元素用于 HTML 文档时, 这些样式表必须应用于文档中的所有 HTML 和 内联 SVG 内容. 类似地, SVG 文档中使用的任何 HTML ‘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>
某些样式特性不仅可以在样式表 和 ‘style’ 属性中指定, 还可以在 呈现 属性中指定. 这些属性的名称与给定 CSS 特性的名称相同 (或相似) 并且其值被解析为该特性的值. 呈现 属性参与层叠的 作者级别, 后跟所有其他作者级样式表, 并具有特殊性 0.
由于呈现属性被解析为 CSS 值而非声明, 呈现属性中的 !important 声明 会使其具有无效 值. 有关呈现属性如何解析的详细信息, 请参阅属性语法.
并非所有可能影响 SVG 渲染的样式特性都有对应的 呈现属性. 其他属性 (恰好与样式特性同名) 不得被解析为 呈现属性, 并且不得影响 CSS 层叠和继承. 此外, 只有 SVG 命名空间中的元素支持呈现属性. 大多数 SVG 呈现属性可以在 SVG 命名空间中的任何元素上指定, 只要其名称不与现有属性冲突. 但是, 几何特性仅具有等效的 呈现属性 于指定元素上. 其他元素上的同名属性不得影响 CSS 层叠和继承.
除 transform 呈现属性表中注明的情况外, 呈现属性名称与特性名称相同, 且使用小写字母.
请注意, ‘cx’, ‘cy’, ‘r’, ‘x’, ‘y’, ‘width’ 和 ‘height’ 属性并非 总是呈现属性. 例如, ‘x’ 属性位于 ‘text’ 和 ‘tspan’ 上 并不是 x 特性的呈现属性, 而 ‘r’ 属性位于 ‘radialGradient’ 上 并不是 r 特性的呈现属性.
将来, 任何应用 于 SVG 内容的新特性都不会获得呈现属性. 因此, 建议作者使用样式特性, 可以通过 内联 ‘style’ 特性 或样式表, 而不是呈现属性, 为 SVG 内容设置样式.
呈现属性的动画等同于 对相应特性进行动画处理.
所有 SVG 用户代理都必须支持以下特性:
以下用户 代理样式表必须应用于所有 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].
除了上述功能外, 以下 CSS 功能也必须 由 SVG 用户代理支持:
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;
除了 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. |
| 名称: | cx |
|---|---|
| 值: | <length-percentage> |
| 初始值: | 0 |
| 适用于: | ‘circle’ 和 ‘ellipse’ 元素 |
| 继承: | 否 |
| 百分比: | 参照当前 SVG 视口的宽度 (参见 单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比 |
| 动画类型: | 按计算值 |
cx 特性描述元素位置的水平中心 坐标.
cx 允许负值; 负值会平移 形状的中心, 并且不会像 r, rx 和 ry 那样禁用渲染 (参见 负值的处理).
| 名称: | cy |
|---|---|
| 值: | <length-percentage> |
| 初始值: | 0 |
| 适用于: | ‘circle’ 和 ‘ellipse’ 元素 |
| 继承: | 否 |
| 百分比: | 参照当前 SVG 视口的高度 (参见 单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比 |
| 动画类型: | 按计算值 |
cy 特性描述元素位置的垂直中心坐标.
cy 允许负值; 负值会平移 形状的中心, 并且不会禁用渲染 (参见 负值的处理).
| 名称: | r |
|---|---|
| 值: | <length-percentage> |
| 初始值: | 0 |
| 适用于: | ‘circle’ 元素 |
| 继承: | 否 |
| 百分比: | 参照当前 SVG 视口的归一化对角线 (参见 单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比 |
| 动画类型: | 按计算值 |
r 的负值是无效的; 它会被视为 指定了 0 (参见 负值的处理), 因此 ‘circle’ 不会被渲染.
| 名称: | 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.
| 名称: | 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.
| 名称: | x |
|---|---|
| 值: | <length-percentage> |
| 初始值: | 0 |
| 适用于: | ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素 |
| 继承: | 否 |
| 百分比: | 参照当前 SVG 视口的宽度 (参见 单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比 |
| 动画类型: | 按计算值 |
x 特性描述 元素位置的水平坐标.
| 名称: | y |
|---|---|
| 值: | <length-percentage> |
| 初始值: | 0 |
| 适用于: | ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ 元素 |
| 继承: | 否 |
| 百分比: | 参照当前 SVG 视口的高度 (参见 单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比 |
| 动画类型: | 按计算值 |
y 特性描述 元素位置的垂直坐标.
有关 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 时不会收缩包裹其内容.
所有 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 视口都嵌入 画布中, 这是一个在所有相关维度上都无限大的绘制区域.
此过程将 viewBox 属性的 min-x, min-y, width 和 height 值, 定义 viewBox 属性的元素的位置和大小, 以及该元素上 preserveAspectRatio 属性的值转换为应用于 元素所包含内容的平移和 缩放.
应用于元素所包含内容的变换为 translate(translate-x, translate-y) scale(scale-x, scale-y).
初始视口的宽度必须是最外层 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>
对于最外层 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
用户代理必须支持 [css-transforms-1] 中定义的 transform 特性 和呈现属性.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| 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>
| 渲染到 SVG 视口, 其 width=300px, height=200px |
渲染到 SVG 视口, 其 width=150px, height=200px |
|
|---|---|---|
|
![]() |
‘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 特性一样, 它 会 为所有其他属性和 后代元素建立新的坐标系统.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| 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> 值之间由一个或 多个空格分隔, 并且必须是以下字符串之一:
meet (默认值) - 缩放 图形, 使得:
在这种情况下, 如果图形的宽高比与 SVG 视口不匹配, SVG 视口的一部分将延伸到 ‘viewBox’ 的边界之外(即, ‘viewBox’ 将绘制到其中的区域会 小于 SVG 视口).
slice - 缩放图形 使得:
在这种情况下, 如果 ‘viewBox’ 的宽高比与 SVG 视口不匹配, ‘viewBox’ 的一部分将延伸到 SVG 视口的边界之外(即, ‘viewBox’ 将绘制到其中的区域大于 SVG 视口).
示例 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
在 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 特性的值决定.
对于属性, 呈现属性和 CSS 特性, SVG 遵循 CSS Values and Units Module [css-values] 对常用值和 单位的说明和定义. 每个属性和特性 都必须指定使用的分量值类型. CSS WG 或 SVG WG 发布的后续或扩展 规范可以扩展基本数据 类型或添加新的数据类型.
对于定义为相对于 SVG 视口大小的 <percentage> 值:
sqrt((width)**2 + (height)**2)/sqrt(2) 计算.
下面的示例 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
左侧的三个矩形演示一种 绝对单位标识符 "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. 该组最下面的
矩形演示百分比单位指定的值被缩放时
会发生什么.
元素的边界框(或 "bbox")是与该元素用户坐标系统的轴 对齐且完全 包围该元素及其后代的最紧密贴合矩形.
可以为元素计算三种边界框:
请注意, 元素上的 opacity, visibility, fill, fill-opacity, fill-rule, stroke-dasharray 和 stroke-dashoffset 特性的值对 元素的边界框没有影响.
对于曲线形状, 边界框必须包围沿形状 边缘的所有部分, 而不仅仅是端点. 请注意, 曲线中未定义为位于最终曲线线条上的 控制点(例如三次 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 的类型:
fill, fill-opacity 和 fill-rule 特性的值不会影响 fill-shape.
stroke-opacity, stroke-dasharray 和 stroke-dashoffset 特性的值不会影响描边形状的计算.
值为 (0, 0, 0, 0) 的 box 与空形状的并集 是 box.
元素的对象边界框, 描边边界框或装饰边界框 是以上述以下参数调用边界框计算算法的结果: element 是元素本身; space 是元素的用户坐标系统; fill 为 true; 如果正在计算描边 边界框或装饰边界框, 则 stroke 为 true, 否则为 false; 如果正在计算装饰 边界框, 则 markers 为 true, 否则为 false; 并且 clipped 为 false.
以下元素提供一种选项, 可通过在给定元素上将指定属性设置为 '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 时, 给定效果(例如渐变或滤镜)将被 忽略.
为了能够在使用 CSS 格式化的宿主文档中包含 SVG, 必须 计算具体对象大小. 具体对象大小必须 使用 CSS Images 3 [css-images-3] 中定义的 默认尺寸算法 计算, 输入如下:
指定大小必须根据 ‘svg’ 元素的 width 和 height 尺寸特性的使用值确定.
固有尺寸也必须 根据 width 和 height 尺寸特性确定. 如果 width 或 height 中任一个 未指定, 则使用值为初始值 'auto'. 'auto' 和百分比长度不得用于 确定固有宽度或固有高度.
对于位图图像格式, 固有尺寸固定在 图像文件中, 指定大小根据需要在宿主文档中定义 以缩放图像. SVG 本身具有可缩放性, 会调整固有宽度和 固有高度使其成为指定大小的宽度和 高度. 因此, 当指定为长度时, ‘svg’ 元素的 width 和 height 尺寸特性控制 SVG 图像的固有尺寸以及 将 SVG 图像放置到宿主文档中时使用的指定大小.
固有宽高比必须 使用以下 算法计算. 如果算法返回 null, 则没有固有宽高比.
本节定义的行为特定于 CSS, 但可以调整 到其他宿主上下文. 在所有宿主上下文中, 在可用的情况下, 调整 SVG 视口大小时必须遵循固有宽高比.
示例:
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" height="5cm">
...
</svg>
在此示例中, SVG 视口的固有宽高比为 2:1. 固有 宽度为 10cm, 固有高度为 5cm.
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="50%" viewBox="0 0 200 200">
...
</svg>
在此示例中, 最外层 SVG 视口的固有宽高比为 1:1. 在这种情况下进行宽高比计算, 可允许嵌入到 包含块中的对象中, 即使该包含块只在一个方向上受到约束.
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" viewBox="0 0 200 200">
...
</svg>
在此情况下, 固有宽高比为 1:1.
<svg xmlns="http://www.w3.org/2000/svg"
width="75%" height="10cm" viewBox="0 0 200 200">
...
</svg>
在此示例中, 固有宽高比为 1:1.
为新的 auto 值添加更多 示例? 例如 David Vest 提供的示例.
| 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’ |
| 继承: | 否 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 如指定值 |
| 动画类型: | 离散 |
这些值可以枚举. 因此, 可以指定同时具有这些 特征的效果.
vector-effect 的宿主坐标空间是 最远祖先 SVG 视口的视口坐标系统.
注意: SVG 的未来版本可能允许指定设备坐标系统的方式.
本节列出有关 值组合的变换公式, 以阐明矢量效果的行为, 不包括含义明确的 non-scaling-stroke .
vector-effect 特性对在 3d 渲染 上下文中执行的变换没有影响 .
<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.
| veValue | 公式 |
|---|---|
| non-scaling-size |
|
| non-rotation |
|
| non-scaling-size non-rotation |
|
| fixed-position |
|
| fixed-position non-scaling-size |
|
| fixed-position non-rotation |
|
| fixed-position non-scaling-size non-rotation |
|
下面是不使用矢量效果的嵌套视口 坐标系统的常规坐标变换公式. xviewport(UA) 和 yviewport(UA) 是直接受 用户代理控制的坐标. CTMthis 是目标图形的CTM, 用于从目标图形的用户 坐标系统 到它所属的视口坐标系统的变换矩阵. CTMparent 是CTM, 用于从 上述视口坐标系统到其父级的视口坐标系统 的变换矩阵. 并且, CTMroot 是用于 最根部视口坐标系统 (UA) 的CTM.
将上一节的七个公式应用于嵌套视口 坐标系统时, 这些公式的应用方式会根据 viewport 或 screen 是否被指定为 vector-effect 的附加值而如下变化.
指定 viewport 值时, 用户代理将上一节七个公式之一与 以下公式组合来计算坐标.
指定 screen 值时, 用户代理将上一节七个公式之一与 以下公式组合来计算坐标.
下面是 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 后 |
<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 后 |
<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 后 |
<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 后 |
<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 后 |
<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 后 |
<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 后 |
<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"/>
SVGTransform 接口用于 表示 出现在 transform 特性 及其呈现属性 ‘transform’, ‘gradientTransform’ 和 ‘patternTransform’ 中的<transform-function> 值. 一个 SVGTransform 表示变换列表中的单个分量, 例如单个 scale(…) 或 matrix(…) 值.
一个 SVGTransform 对象可以被指定为只 读, 这意味着尝试修改该对象将导致抛出异常 , 如下所述.
一个 SVGTransform 对象可以与特定元素关联 . 关联元素用于 确定当对象反映 ‘transform’ 呈现属性时要更新哪个元素的该属性. 除非另有说明, 一个 SVGTransform 对象 不与任何元素关联.
每个 SVGTransform 对象都以 两种模式之一运行. 它可以:
一个 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 时, 执行以下步骤 :
例如, 对于 scaleX(…) 或 translate3d(…) 变换, 将返回 SVG_TRANSFORM_UNKNOWN.
matrix IDL 属性 将变换表示为 4x4 齐次矩阵, 并在获取时 返回 SVGTransform 的矩阵对象. 当矩阵对象首次创建时, 其 值被设置为与 SVGTransform 的变换 函数值匹配, 并被设置为 反映 SVGTransform.
有关不同变换函数类型 如何对应特定矩阵值的说明, 请参阅 CSS Transforms 规范.
angle IDL 属性 表示 rotate(…), skewX(…) 或 skewY(…) 变换函数的角度参数. 获取时, 执行以下步骤:
setMatrix 方法用于 将 SVGTransform 设置为给定的 矩阵值. 调用 setMatrix(matrix) 时, 执行以下步骤:
DOMMatrixReadOnly.fromMatrix(matrix)
的结果,
包括针对缺失值执行的验证和
修正步骤.
如果该方法抛出错误, 则重新抛出该错误并中止这些步骤.
setTranslate, setScale, setRotate, setSkewX 和 setSkewY 方法用于 将 SVGTransform 设置为新的 变换函数 值. 调用其中一个方法时, 执行以下步骤:
本规范对 SVGMatrix 对象的行为施加了超出 Geometry Interfaces 规范所述的额外要求, 以便它们可用于反映采用变换值的呈现属性 .
每个 SVGMatrix 对象都以两种 模式之一运行. 它可以:
一个 SVGMatrix 可以被指定为只 读, 这意味着尝试修改该对象将导致抛出异常 . 当向只读 SVGMatrix 的任何 IDL 属性赋值, 或调用其任何可变变换方法时, 将抛出 NoModificationAllowedError 异常, 而不是更新内部值.
请注意, 根据 svgwg#706 (2019-10 WG 决议), SVG 2 恢复 SVG 1.1 的惯例: 不存在 单独的只读变体接口. SVGMatrix 可以通过内部标志指定为 只读; 写入操作会在同一接口上抛出 NoModificationAllowedError .
当向可写 SVGMatrix 的任何 IDL 属性赋值, 或调用其任何可变变换方法时, 更新内部矩阵值后会执行以下步骤:
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) 方法时, 执行以下步骤:
consolidate 方法用于将变换列表转换为使用单个变换函数的等效 变换. 调用 consolidate() 方法时, 执行以下步骤:
SVGLengthList 所有其他接口成员的行为 定义于列表接口.
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 对象, 该对象反映给定的 呈现属性.
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’ 值中的对齐关键字部分. 获取时, 执行以下步骤:
设置 align 时, 执行以下步骤:
meetOrSlice IDL 属性 表示 ‘preserveAspectRatio’ 值中的对齐关键字部分. 获取时, 执行以下步骤:
设置 meetOrSlice 时, 执行以下步骤:
一个 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.
路径表示可以被填充或 描边的形状轮廓. 路径也可以用作裁剪路径, 用于描述 动画, 或定位文本. 路径可以同时用于 这些功能中的多个功能. (参见 填充, 描边和绘制服务器, 裁剪和遮罩, 动画 ('animateMotion'), 和路径上的文本.)
路径使用当前点的概念来描述. 类比 在纸上绘图, 当前点可以 被视为画笔的位置. 画笔的位置 可以改变, 并且可以通过沿直线或 曲线拖动画笔来描绘形状的轮廓 (开放或闭合) .
路径表示对象轮廓的几何形状, 使用 moveto (设置新的当前点), lineto (绘制直线), curveto (使用 三次 Bézier 绘制曲线), arc (椭圆 或圆弧)和 closepath (通过连接到最后一个 moveto 来闭合当前 形状)命令定义. 复合路径 (即, 具有多个子路径的路径) 可以实现对象中的 "donut holes" 等效果.
本章描述 SVG 路径的语法, 行为和 DOM 接口. SVG 路径的各种实现说明可在‘path’ 元素实现 说明中找到.
SVG 中使用 ‘path’ 元素定义路径.
所有基本形状都根据其 等效路径来描述, 即 它们作为路径时的形状. (‘path’ 元素的等效路径就是 路径本身.)
‘path’ 元素的形状轮廓使用 d 特性指定. 参见下面的路径数据.
路径通过包含一个 ‘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
路径数据可以包含换行字符, 因而可以 拆分为多行以提高可读性. 标记中的属性内部的换行在解析时会被规范化为空格 字符.
路径数据的语法非常简洁, 以便实现 最小文件大小和高效下载, 因为许多 SVG 文件 将主要由其路径数据构成. SVG 尝试最小化路径数据大小的一些方式如下:
M 100 100 L 200 200M100 100L200 200M 100 200 L 200 100 L -100 -200M 100 200 L 200 100 -100 -200路径数据语法是一种前缀表示法 (即, 命令 后跟参数). 唯一允许的小数点是 Unicode U+002E FULL STOP (".") 字符 (在 Unicode 中也称为 PERIOD, dot 和 decimal point), 不允许其他分隔 字符 [UNICODE]. (例如, 以下是路径数据流中的 无效数值: "13,000.56". 应改为: "13000.56".)
对于命令的相对版本, 所有坐标 值都相对于命令开始时的当前点 .
在下面的表格中, 使用以下表示法 描述给定路径命令的语法:
在路径命令的描述中, cpx 和 cpy 表示当前点的坐标.
| 名称: | d |
|---|---|
| 值: | none | <string> |
| 初始值: | none |
| 适用于: | ‘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). 以下三组命令绘制曲线:
"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).
"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" 后立即跟随任何 其他命令, 则下一个子路径必须从与当前子路径相同的初始 点 开始.
各种 "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).
三次 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 曲线如何根据 控制点的位置改变形状. 前五个示例说明一个 三次 Bézier 路径段. 右 下方的示例展示一个 "C" 命令后跟一个 "S" 命令.

二次 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
| 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
椭圆弧命令绘制椭圆的一段, 必须满足以下约束:
在大多数情况下, 实际上存在四种不同的弧线 (两个不同的椭圆, 每个都有两个不同的弧线扫掠) 满足这些约束. 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 路径数据匹配以下 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 时, 也会禁用渲染.
如果遇到不匹配语法的路径数据, 则路径数据存在错误 (参见错误处理).
某些功能, 例如标记的方向 和线帽的形状, 根据 路径上给定距离处或单个线段 开始或结束处的路径方向定义.
路径上指定 距离处的路径方向定义如下:
路径段起点 处的方向定义如下:
路径 段终点处的方向定义如下:
符合规范的 SVG 用户代理必须按照 以下细节实现使用路径数据的功能:
所有椭圆弧参数 (布尔标志除外)都允许任意数值, 但用户代理在渲染曲线或计算其几何形状时 必须对无效值进行以下调整:
如果线段的终点 (x, y) 与当前点相同 (例如, 上一线段的终点), 则这等同于完全省略该椭圆弧线段.
如果 rx 或 ry 中任一个为 0, 则该弧被视为连接两个端点的直线段 (一个 "lineto").
如果 rx 或 ry 带有负号, 则去掉负号; 改用绝对值.
如果 rx, ry 和 x-axis-rotation 使得不存在解 (基本上, 椭圆不够大, 无法从 当前点到达新终点), 则均匀放大椭圆 直到恰好存在一个解 (直到 椭圆刚好足够大).
有关此缩放操作的数学公式, 请参阅附录中的 修正超出范围的半径 一节.
这种宽容但一致的超出范围 值处理确保:
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)
零长度的路径段并非无效, 并且会在以下情况下影响渲染:
各种操作, 包括路径上的文本和运动动画 以及各种描边 操作, 都要求用户代理计算 沿图形元素几何形状的距离, 例如 ‘path’.
存在用于计算沿路径距离的精确数学方法, 但公式高度复杂且需要大量 计算. 建议创作产品和用户 代理采用可产生尽可能精确结果的算法 ; 但是, 为了适应实现差异 并帮助距离计算产生近似作者意图的结果, 可以使用 ‘pathLength’ 属性 提供作者计算的 路径总长度, 以便用户代理可以按照 ‘pathLength’ 与用户代理自身 计算的总路径长度值之比来缩放沿路径距离 计算.
‘path’ 元素中的 "moveto" 操作被定义为 零长度. 只有各种 "lineto", "curveto" 和 "arcto" 命令对路径长度计算有贡献.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| pathLength | <number> | (none) | 是 |
作者计算的 路径总长度, 以用户单位表示. 此值用于校准 用户代理自身的沿路径距离 计算与作者的计算. 用户代理会 按照 ‘pathLength’ 与用户 代理自身计算的总路径长度值之比缩放所有沿路径距离计算. ‘pathLength’ 可能影响 路径上的文本, 运动动画 和 各种描边操作的计算.
零值有效, 并且必须被视为无穷大的缩放因子. 无限缩放后的零值必须保持为零, 而任何大于零的非百分比值 必须变为 +Infinity.
负值是错误 (参见错误处理).
‘pathLength’ 对百分比 沿路径距离计算没有影响.
| 名称: | 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 日).
SVGPathElement 对象表示 DOM 中的 ‘path’.
[Exposed=Window] interface SVGPathElement : SVGGeometryElement { };
SVG 包含以下基本形状元素集合:
从数学上讲, 这些形状元素等同于 构造相同形状的 ‘path’ 元素 . 基本 形状可以描边, 填充并用作裁剪路径. ‘path’ 元素可用的所有特性也适用于基本 形状.
每种形状的等效路径和计算描边的算法 在下面的形状 各节中定义.
下面 ‘rect’, ‘circle’ 和 ‘ellipse’ 的等效路径 都以绘制一条零长度线的 closepath 结束, 因为它之前的命令已经在初始点结束. 零长度线不会改变形状的填充或描边方式. 它会影响顶点标记的位置, 但这些元素上的标记按照 顶点标记中的规则放置, 而不是通过计算为每种形状列出的命令数量.
‘rect’ 元素定义一个 与当前用户坐标 系统轴对齐的矩形. 可以通过为 rx 和 ry 几何特性设置 非零值来实现圆角矩形.
x 和 y 坐标指矩形的左边缘和上边缘, 位于当前用户坐标系统中.
width 和 height 特性定义矩形的整体宽度和高度. 任一特性的负值都是无效的, 并且必须被忽略. 任一尺寸的计算值为零都会禁用元素的渲染.
对于圆角矩形,
rx 和 ry 特性的计算值定义
用于圆化矩形角的椭圆弧的 x 轴和 y 轴半径.
弧线始终沿水平轴和垂直轴对称; 要创建角部圆角不均匀的矩形
, 请使用 ‘path’ 显式定义形状.
任一特性的负值都是无效的, 并且必须被忽略.
任一尺寸的计算值为零,
或两个尺寸的计算值都为 auto,
都会产生没有圆角的矩形.
x 轴和 y 轴圆角半径的使用值
可以从另一个尺寸隐式确定 (使用 auto 值),
并且还会受到钳制, 使矩形
直线段的长度永远不会为负.
rx 和 ry 的使用值
通过按顺序执行以下步骤从计算值确定:
auto
(由于 auto 是两个特性的初始值, 因此如果作者均未
指定它们或作者提供的所有值都无效, 也会发生这种情况),
则 rx 和 ry 的使用值均为 0. (这将产生方角.)从数学上讲, ‘rect’ 元素按照 如下方式映射为等效的 ‘path’ 元素 , 在生成绝对使用值 x, y, width, height, rx, 和 rx 并以用户坐标系统的用户单位表示之后, 对每个等效几何特性 遵循上述规则以及单位中指定的规则:
路径分解在电话会议期间解决于 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
示例 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
‘circle’ 元素 根据中心点和 半径定义圆.
r 属性定义圆的半径. 负值是无效的, 并且必须被忽略. 计算值为零会禁用元素的渲染.
从数学上讲, ‘circle’ 元素被映射为一个 等效的 ‘path’ 元素 , 该元素由四个 椭圆 弧线段组成, 每个覆盖圆的四分之一. 路径 从半径上的 "3 点钟" 位置开始, 并沿 顺时针方向前进 (在任何变换之前). 弧命令的 rx 和 ry 参数 都等于 r 特性的使用值, 在 转换为局部用户单位后, 而 x-axis-rotation 和 large-arc-flag 设置为零, sweep-flag 设置为一. 坐标按如下方式计算, 其中 cx, cy, 和 r 是等效特性的使用值, 转换为用户单位:
路径分解在电话会议期间解决于 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
‘ellipse’ 元素 根据中心点和两个半径定义一个 与当前用户坐标 系统轴对齐的椭圆.
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 是等效特性的使用值, 转换为用户单位:
路径分解在电话会议期间解决于 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
‘line’ 元素定义一条 从一个点开始 并在另一个点结束的线段.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| x1, y1 | <length-percentage> | <number> | 0 | 是 |
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| x2, y2 | <length-percentage> | <number> | 0 | 是 |
未来的规范可能会将 ‘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
‘polyline’ 元素 定义一组相连的直 线段. 通常, ‘polyline’ 元素定义开放 形状.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| points | <points> | (none) | 是 |
其中:
构成折线的点. 所有坐标 值均位于用户坐标系统中.
如果提供奇数个坐标, 则元素处于 错误状态, 用户代理行为与错误 指定的 ‘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
‘polygon’ 元素 定义一个由一组相连直线段 组成的闭合形状.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| 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
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 特性的计算值及其对应的呈现属性 .
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 特性的计算值及其对应的呈现 属性 .
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 特性的计算值 及其对应的呈现属性 .
[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’ 内容属性
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 返回的对象必须不同, 即使 当前没有动画影响该属性.
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 对象都以四种 模式之一运行. 它 可以:
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 属性赋值时, 在更新 内部坐标值后执行以下步骤:
SVGPolylineElement 对象 表示 DOM 中的 ‘polyline’ 元素.
[Exposed=Window] interface SVGPolylineElement : SVGGeometryElement { }; SVGPolylineElement includes SVGAnimatedPoints;
SVGPolygonElement 对象 表示 DOM 中的 ‘polygon’ 元素.
[Exposed=Window] interface SVGPolygonElement : SVGGeometryElement { }; SVGPolygonElement includes SVGAnimatedPoints;
要作为 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 无障碍指南.
本质上, 是一个 Unicode 码点. 字符可以是控制指令 (例如制表符, 回车符或换行符), 可渲染标记 (字母, 数字, 标点或其他符号), 或修饰符 (例如组合重音符号).
不同方法与 SVG 1.1 向后兼容. SVG DOM 文本方法使用 UTF-16 代码单元是 DOM 2 规范中 DOMString 定义所要求的.
SVG 工作组希望获得实现者对 使用 Unicode Standard Annex #29 定义的字素簇 替代 Unicode 码点来 映射文本定位属性的可行性的反馈. 请注意, 使用 CSS 排版字符并不合适, 因为 字符的构成可能取决于上下文 (断行, 断词等).
如果将来引入对 CSS 生成内容文本的支持, 它将包含在可寻址字符数组中.
虽然各种 CSS 3 文本布局规范都使用该术语, 但目前没有任何一个给出正式定义. 因此该链接指向 CSS 2.1, 并且已向 CSS WG 提交 issue.
start和
end边 (例如与 text-anchor 特性如何 应用有关). 它由 direction 特性确定. (注意: 文本行中字符的顺序主要 由 Unicode 双向算法控制, 而不是行内基 方向.)
字体由字形集合以及使用这些 字形在某种视觉媒介上呈现字符所必需的其他 信息 (统称字体表)组成. 字形集合和字体表的 组合 称为字体数据.
字体可以提供替换和定位表, 格式化器 (文本塑形器)可以使用这些表来重新排序, 组合并 定位字形序列, 形成一个或多个复合 字形. 组合可以像连字一样简单, 也可以像 印度文字音节一样复杂, 后者通常通过某些 重排序组合多个辅音和元音字形. 这些表可能 依赖语言, 从而允许使用适合相应语言的 字母形式.
当一个简单或复合字形为了排版目的表示一个不可分割的单位时 , 它称为排版 字符.
连字是高级文本布局的重要功能. 某些 连字是可选的, 而其他连字 (例如阿拉伯语中)是 必需的. 以下明确规则适用于连字 形成:
当字符位于不同 DOM 文本节点中时, 不应启用 连字形成; 因此, 由标记分隔的字符不应使用连字.
当字符位于不同文本块中时, 不应启用 连字形成.
当两个字符之间的间距 不等于默认间距时, 不应使用任意连字 (例如当 letter-spacing 具有非默认 值, 或 text-align 的值为 justify 且 text-justify 的值为 distribute). (参见 CSS Text Module Level 3, ([css-text-3]).
SVG 属性, 例如 ‘dx’, ‘textLength’, 和 ‘spacing’ (在 ‘textPath’ 中), 这些属性可能 重新定位排版字符, 但不会破坏 任意 连字. 如果不希望使用任意连字, 可以通过使用 font-variant-ligatures 特性将其关闭.
对于 OpenType 字体, 任意连字包括由 liga, clig, dlig, hlig, 和 cala 功能启用的连字; 必需连字 位于 rlig 功能中.
| 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 还允许字体被压缩, 子集化, 并 包含许可信息.
字形选择和定位通常按照 CSS 的规则处理. 但是在某些情况下, SVG 中的最终文本布局 需要知道各个字形的几何特性 .
几何字体特征以基于 EM 框的坐标 系统表示. (EM 是字体中字形高度的相对度量 .) 高 1 EM 且宽 1 EM 的框 称为设计空间. 通过将 EM 细分为若干 每 em 单位, 赋予此空间 几何坐标.
每 em 单位是字体特征. 每 em 单位的典型值 为 1000 或 2048.
EM 框的坐标空间称为设计空间 坐标系统. 对于可缩放字体, 用于绘制字形的曲线和直线 使用此 坐标系统表示.
通常, 此坐标系统中的 (0,0) 点 位于 EM 框的左边缘, 但不在左下 角. 罗马大写 字母底部的 Y 坐标通常为零. 小写罗马 字母的下伸部具有负坐标值.
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' 特性的示例. 左侧: '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 中, 当包含文本块没有 固定几何形状 (如预格式化文本)时, 行框 紧密包围框内的字形框.
确定行框高度的示例. 首先, 每个字形框 (浅蓝色小框)根据 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)堆叠.
‘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>
两个 ‘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>
| SVG 2 要求: | 允许在 ‘tspan’ 上使用变换. |
|---|---|
| 决议: | SVG 2 将允许在 ‘tspan’ 上使用变换. |
| 目的: | 与已经允许变换的其他元素保持一致, 例如 ‘a’. |
| 负责人: | Cameron (无 action) |
| 状态: | 完成 |
此决定已被撤销. 参见 GitHub Issue 210. CSS/HTML 不允许对行内元素应用变换 , 并且没有渲染器支持在行内时对 ‘a’ 元素 应用变换 (无论 SVG 还是 HTML).
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| x, y | [ [ <length-percentage> | <number> ]+ ]# | (none) | 是 |
如果提供单个 <length>, 则该值表示用于渲染 此元素或其任何后代内第一个字符所对应字形的 当前文本位置的新绝对 X (Y) 坐标.
如果提供由逗号或空格分隔的 n 个 <length>, 则这些值表示 用于渲染此元素或其任何 后代内前 n 个可寻址字符所对应字形的当前文本 位置的新绝对 X (Y) 坐标 .
如果提供的 <length> 数量多于 字符数量, 则额外的 <length> 对 字形定位没有影响.
如果字符数量多于 <length>, 或未指定该属性, 则对于每个额外字符:
在 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>, 或未指定该属性, 则对于每个额外字符:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| 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 | 是 |
要求用户代理实现文本字符串正确的起始和结束 位置, 但中间字形的位置不可预测, 因为用户代理 可能采用高级算法来拉伸或压缩文本 字符串, 以在正确的起止定位 与最佳排版之间取得平衡.
请注意, 对于包含 n 个 字符的文本字符串, 对前进值的调整通常 只发生在 n−1 个字符上 (参见 属性 ‘textLength’ 的说明), 而 字形的拉伸或 压缩将应用于全部 n 个字符.
‘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’ 包含数字列表时, 还适用以下附加规则:
<tspan dx="11 12 13 14 15 0 21 22 23 0 31 32 33 34 35 36">Latin and Hebrew</tspan>
示例 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
示例 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
‘text’ 元素内红色文本的旋转:
"child1" ‘tspan’ 元素内橙色文本的旋转:
"child2" ‘tspan’ 元素内黄色文本的旋转:
"child5" ‘tspan’ 元素内蓝色文本的旋转:
下图说明旋转值如何传播到 嵌套在 ‘text’ 元素中的 ‘tspan’ 元素:
| 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>
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].
内容区域通过在 ‘text’ 元素中指定 inline-size 特性来定义. 如果未提供内容区域, 则内容区域默认为宽度和高度 无限的矩形 (参见 预格式化文本一节).
一旦定义换行区域, 文本就会根据 CSS 规则布局在换行区域内 (遵守本节给出的任何特殊规则).
'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>
文本布局开始时, 将 ‘text’ 元素的内容传递给基于 CSS 的文本渲染器, 其中包括文本数据 以及样式信息和一个或多个 要填充形状的说明. ‘text’ 元素被视为 块元素, 其后代 ‘tspan’, ‘textPath’ 和 ‘a’ 元素被 视为行内元素. CSS 渲染器返回一组排版字符及其 位置, 这些位置是将文本作为绝对定位文本布局的结果 .
一个排版字符可能包含多个 字形. 此处假定 一个排版字符内部字形的相对定位 封装在该排版字符中, 并且 用户无法控制.
一旦定义了内容区域, 使用以下 算法确定给定 ‘text’ 元素的排版 字符 及其位置:
这意味着当 writing-mode 为 horizontal-tb 时, 文本布局时 框宽度设置为 inline-size 值, 否则 框高度设置为 inline-size 值 .
许多 CSS 特性对 SVG 文本 布局没有影响或影响有限:
这确保 ‘text’ 元素被视为 块元素.
这确保 ‘tspan’, ‘textPath’ 和 ‘a’ 元素被 视为行内元素. 注意: transform 特性对 行内元素没有影响.
这确保 ‘text’ 元素内的图形和元数据元素不会渲染.
各种 SVG 属性和特性可能根据内容区域的定义方式重新定位 排版字符:
以下 SVG 文本布局算法返回 ‘text’ 元素子树中 DOM 中每个字符的输出信息 . 该信息包括:
SVG 属性 ‘x’, ‘y’, ‘dx’, ‘dy’, 和 ‘rotate’ 中给出的数组以可寻址字符为索引. 但是, 重新定位应用于 排版字符. 如果一个排版字符 对应多个字符 (例如连字), 只使用 与第一个字符对应的数组值来 定位该排版字符. 与 排版 字符中其他字符对应的数组值 会被跳过 (对于 ‘x’ 和 ‘y’), 会被 累积并应用到下一个排版 字符 (对于 ‘dx’ 和 ‘dy’), 或者如果它 是数组中的最后一个 值, 则应用于后续排版 字符 (对于 ‘rotate’). 这确保, 例如, 无论字体是否具有特定连字, 属性值都应用于相同字符.
SVG 特定的文本布局算法如下:
除非 white-space 特性导致换行, 否则这将是一行文本.
对 result 中索引为 i 的每个数组元素:
由于以下 ‘text’ 元素中存在不能由字形 定位属性寻址的可折叠空白 (使用标准字体), "B" 字形将被放置在 x=300.
<text x="100 200 300"> A B </text>
这是因为 "A" 前的空白以及 "A" 和 "B" 之间除一个空白 字符之外的所有空白都被折叠或修剪掉.
这确保由 text-anchor 移动的块不会 跨越多行.
节点指定的定位调整 (例如 ‘x’ 属性中的值) 应用于该节点中的所有字符, 包括 节点后代中的字符. 但是, 后代节点中指定的调整会覆盖祖先 节点的调整. 本节解析哪些调整应用于 哪些字符. 它还直接设置 result 的 rotate 坐标 .
一个递归过程, 输入一个 node, 其步骤如下:
此循环将 ‘x’, ‘y’, ‘dx’, ‘dy’ 和 ‘rotate’ 属性应用于 node 内的内容.
将标志设置为 false 可确保 ‘x’ 和 ‘y’ 属性在 ‘text’ 元素中设置时, 不会在不应创建锚定块的情况下 在 ‘textPath’ 元素中创建锚定块.
对于路径上的垂直文本, ‘x’ 属性会被忽略.
对于路径上的水平文本, ‘y’ 属性会被忽略.
‘textPath’ 元素总是创建锚定块.
‘dx’ 和 ‘dy’ 调整在 ‘textLength’ 属性导致的调整之前应用, 而 ‘x’, ‘y’ 和 ‘rotate’ 调整在之后应用.
一个递归过程, 输入 node, 其步骤如下:
子节点先于父节点调整.
此循环查找节点内排版字符最左 (最上) 和最右 (最下)的范围, 并检查 强制换行.
要求用户代理将节点中最后一个 排版 字符移动 delta, 当 "horizontal" 标志为 true 且 direction 为 lrt 时沿正 x 方向, 当 "horizontal" 标志 为 true 且 direction 为 rtl 时沿负 x 方向, 否则沿 正 y 方向. 用户代理 可以自由调整中间 排版 字符以获得最佳 排版. 接下来的步骤说明一种 在 ‘lengthAdjust’ 值为 spacing 时调整排版 字符的方法.
在此上下文中, 每个已解析后代节点都被视为 单个 排版 字符.
此循环应用 ‘x’ 和 ‘y’ 值, 并确保 text-anchor 块不会在 排版字符中间开始.
此循环遍历每个锚定块.
此循环查找锚定块内 排版字符最左 (最上) 和最右 (最下)的范围.
此处执行文本锚定.
此处应用 ‘textPath’ 定位.
用户代理可以自由对 mid 作任何额外调整, 以确保由于 ‘spacing’ 值为 'auto' 或 ‘method’ 值为 'stretch' 时具有高质量排版 .
这实现了单个 闭合子路径的特殊换行条件.
设置 mid = mid mod length.
这会将出现在 ‘textPath’ 元素 之后的任何字符的起始点设置为路径末端.
| SVG 2 要求: | 文本布局功能与 CSS 保持一致. |
|---|---|
| 决议: | SVG 2 将对非 SVG 特有的文本布局 (空白, bidi 等)使用 CSS3 定义. |
| 目的: | 促进 HTML 和 SVG 中文本布局规范和实现的共享. |
| 负责人: | Cameron 和 Chris (ACTION-3004, ACTION-3005) |
此选项对应基本的 SVG 1.1 文本布局.
这是默认的文本布局方法, 在没有 显式定义的内容区域时使用. 它还用作 布局路径上的文本的第一步 (规则略有 修改). 在这种布局方法中, 不进行自动断行 或自动换行. 通常, 文本渲染为 宽度和高度无限的矩形内容区域内的单 行. 可以通过预先计算换行并 使用以下方法之一获得多行文本:
SVG 2 中新增.
以下特性不适用于预格式化文本: text-align, text-align-last, line-break, word-break, hyphens, word-wrap, 和 overflow-wrap.
可以通过使用 white-space 值 pre 或 pre-line 创建多行预格式化文本. 在这些情况下, 换行符或回车符会保留为强制 换行, 从而创建新的行框. 行 框按照 CSS 规则堆叠.
按照基本 CSS 文本布局 规则布局文本后, 可以使用 SVG 特定规则重新定位排版字符. 可以通过在 ‘x’ 和 ‘y’ 属性中给出绝对坐标 或通过强制换行来规定绝对重新定位. 绝对 重新定位可能受 text-anchor 特性的影响. 可以通过在 ‘dx’ 和 ‘dy’ 属性中给出 相对坐标来规定相对重新定位. 可以通过在 ‘rotate’ 属性中给出值列表任意旋转 排版字符. 绝对 重新定位 (包括由 text-anchor 特性导致的任何调整)在相对 重新定位和旋转之前进行.
当在 ‘text’ 元素中指定内容区域时, 文本会自动换行. 内容区域 定义用于文本换行的最外层容器. 换行区域与内容区域相同.
当内容区域由 inline-size 特性定义时, 与第一个渲染的 排版字符对应的 ‘x’ 和 ‘y’ 属性 定义初始当前文本位置.
除用于确定初始当前文本位置时外, 自动换行文本中的 ‘text’ 和 ‘tspan’ 元素上的所有 ‘x’ 和 ‘y’ 值 都会被忽略.
‘x’ 和 ‘y’ 属性可以为换行文本的 SVG1.1 渲染器提供 自然的回退机制. 内容生成者可能希望通过将 各行拆分为具有 ‘x’ 和 ‘y’ 属性的 ‘tspan’ 元素来预布局文本. 然后, 例如, 如果使用回退字体 渲染文本, SVG2 渲染器将忽略 ‘x’ 和 ‘y’ 属性, 并使用 回退字体的字体度量重新排版 文本. SVG1.1 渲染器将在渲染文本时使用 ‘x’ 和 ‘y’ 属性, 即使渲染结果与形状不匹配, 通常也会得到 可读文本. 本节中的许多文本换行示例依赖此 机制, 以便在尚未实现 文本换行的浏览器中渲染文本.
以下示例说明在形状中布局 文本时的一些问题.
对于任意形状的换行区域, 第一个 行框可能无法紧贴顶部 (对于 垂直文本则是侧边). 在这种情况下, 第一个行框会移动 直到能够放入.
在 CSS 中, 形状的边缘被视为一系列 1 像素 × 1 像素的浮动区域.
未来的 CSS 规范可能会定义可用于 控制第一行文本位置的行网格, 从而允许不同换行区域 之间的文本对齐.
顶部行框 (浅蓝色小矩形), 由 最小可能的文本块组成, 向下移动直到 行框适合换行 区域 (浅蓝色 路径). 请注意, 行框包含 line-height 特性的效果, 此处设置为 1.25. 红色 矩形紧密包围每个行框中的字形.
这似乎与 SVG 1.2 草案不同, 后者中 换行区域的顶部用作行网格的原点. 第一行按行高向下移动, 直到适合 形状内部.
对于任意形状的换行区域, 单行 文本可能被分成多个部分. 在这种情况下, 会为每个部分创建一个行框. 单行文本中的所有 行框必须具有相同高度 (确保所有部分具有相同基线). 此高度 通过查看该行文本中的所有字形计算.
此默认行为在 2016 年 Sydney 的 CSS/SVG 联合工作 组会议上达成一致.
未来的 CSS 规范可能允许控制 被分成不同部分的形状中哪些部分被填充 (例如, 仅填充 最右侧部分, 仅填充最左侧部分等).
SVG 可以沿由 ‘path’ 元素或基本形状的等效路径定义的路径放置文本. 这是 通过将文本放在 ‘textPath’ 元素中指定的, 该元素具有一个 ‘href’ 属性, 其中的URL 引用指向 ‘path’ 元素或基本形状, 或者通过为 ‘path’ 属性指定一个 直接 指定路径数据的值.
沿基本形状放置文本的功能是 SVG 2 中新增的.
沿基本形状放置文本在 Sydney (2015) 会议上达成决议.
直接使用 'd' 属性指定路径的功能添加到了 SVG 2 中. 在 London (2016) 编辑会议上, 在将 'd' 提升 为呈现属性的同时, 决定将 'd' 属性重命名为 'path'.
从概念上讲, 路径上的文本类似于一行 预格式化文本, 随后 将其变换为沿路径排列. 除另有说明外, 所有 适用于预格式化文本的特性也适用于路径上的 文本.
| SVG 2 要求: | 对文本路径拉伸方法提供更精确的说明. |
|---|---|
| 决议: | 我们将阐明 method="stretch" 在 >'textPath' 元素上的行为. |
| 目的: | 改进该功能的互操作性. |
| 负责人: | Cameron (无 action) |
‘path’ 属性和 ‘href’ 属性 都指定排版字符 将沿其渲染的路径.
如果在 ‘textPath’ 元素上同时指定两个属性, 则使用的路径必须遵循以下 优先顺序:
如果指定了 ‘path’ 属性, 但 路径数据 未产生有效路径段 (例如, 值为空 字符串, 或路径数据中的错误发生在生成任何 有效路径段之前), 则必须改用 ‘href’ 属性. 如果 ‘path’ 属性在第一个错误之前包含有效路径段 , 则按照 路径数据中的错误处理规则使用错误之前的路径 , 并且 ‘href’ 属性不会用作回退.
初始当前 文本位置相对于路径起点的偏移量, 使用用户代理的 沿路径 距离算法计算, 在将路径转换为 ‘textPath’ 元素的坐标系统之后.
如果给定的 <length> 不是百分比, 则 ‘startOffset’ 表示沿路径的距离, 以 ‘textPath’ 元素的当前用户坐标系统度量.
如果给定 百分比, 则 ‘startOffset’ 表示 整条路径的百分比距离. 因此, startOffset="0%" 表示 路径的起点, 而 startOffset="100%" 表示 路径的终点.
允许负值以及大于路径长度的值 (例如 150%).
将值限制在 0%-100% 范围内会妨碍轻松创建 文本沿路径移动之类的效果.
中点不在路径上的任何排版字符 都不会渲染.
‘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, 文本从 中点向两个方向渲染, 直到到达路径上与初始 位置在两个方向距离相等的点 .
路径上的文本引用一个 ‘circle’ 时, 使用不同 ‘startOffset’ 属性值的渲染. 左: 0. 右: 75% 或 -25%. 红色圆标记路径的起点 (在 将圆规范分解为路径之后).
路径上的文本引用一个 ‘circle’ 时, 使用不同 text-anchor 属性值的渲染. 左: 'start'. 中: 'middle'. 右: 'end'. 红色圆标记路径的起点 (在 将圆规范分解为路径之后). 蓝色方块标记渲染的参考起点 (通过 ‘startOffset’ 值 75% 从路径起点移动). 灰色箭头 显示排版字符 放置的方向和排版 字符 放置停止的位置. 如果 direction 特性的值为 rtl, 箭头方向将反转.
在 Sydney (2015) 会议上同意基本形状渲染所有字形 (但会议记录中缺失). 将换行限制为具有单个闭合子路径的路径以及一 圈, 并由 'startOffset' 属性实现, 于 London (2016) 编辑会议上达成一致.
指示文本应沿路径渲染的 方法.
值 align 表示 排版字符应使用简单的 2×3 矩阵变换进行渲染, 从而不会 拉伸/扭曲排版字符. 通常, 会对每个要渲染的排版字符执行附加旋转, 缩放和 平移变换. 因此, 使用 align 时, 在 排版字符设计为相互连接的字体 (例如草书字体)中, 当文本沿路径渲染时连接处可能无法 正确对齐.
值 stretch 表示 排版字符轮廓将 转换为路径, 随后所有端点和控制 点都会调整到路径的垂直向量上 , 从而拉伸并可能扭曲 字形. 使用这种方法, 连续的排版 字符, 例如草书文字中的字符, 将保持 它们的连接. (非垂直直线路径段应 转换为 Bézier 曲线, 使水平 直线路径与 排版字符所沿路径保持 (近似)恒定偏移 .)
不同 ‘method’ 值的路径上文本渲染: 左: 'align'. 右: 'stretch'.
指示用户代理应如何确定 沿路径渲染的排版字符之间的间距 .
值 exact 表示 排版字符应严格按照 路径上的文本布局 规则中指定的间距规则进行渲染.
值 auto 表示 用户代理应使用路径上文本布局算法 调整排版字符之间的间距, 以获得视觉上美观的结果.
确定文本放置在路径的哪一侧 (相对于路径方向). 指定值 right 实际上会反转 路径.
SVG 2 中新增, 以允许文本位于 闭合子路径和基本形状 (例如矩形, 圆和椭圆)的内部或外部.
添加 'side' 的决议在 Sydney (2015) 会议上通过.
描述排版 字符 将渲染到其上的路径的路径数据 字符串. 如果未指定该属性, 或 路径数据 未产生有效路径段 (例如, 值为空 字符串, 或在任何有效路径段之前发生错误), 则改用 ‘href’ 指定的路径. 如果路径数据包含错误, 但在错误之前至少产生一个有效 路径段, 则按照 路径数据中的错误处理规则使用路径的有效部分 .
如果未提供 ‘path’ 属性, 则这是一个指向 将在其上渲染字形的 ‘path’ 元素 或基本形状元素的URL 引用 . 如果使用该属性, 且 <url> 是无效 引用 (例如, 不存在这样的元素, 或被引用的 元素既不是 ‘path’ 元素也不是基本形状), 则 ‘textPath’ 元素处于错误状态, 且用户代理不得渲染其任何 内容.
请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.
被引用 ‘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
示例 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
示例 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
从概念上讲, 对于路径上的文本, 目标路径会被拉直 为水平或垂直直线段. 对于 水平文本布局流, 路径被拉直为 假想的水平线段, 使路径起点 映射到线段左侧. 对于垂直文本 布局流, 路径被拉直为假想的 垂直线段, 使路径起点映射到 线段顶部. 标准 文本布局规则应用于 假想直线段, 并将结果 映射回目标路径. 垂直和 双向文本布局规则 也适用于路径上的文本.
沿路径的每个字形的方向分别确定.
对于水平文本布局流, 给定字形的默认方向 (up
方向)沿一个向量, 该向量起始于字形所附着的
路径交点, 并指向从该交点处曲线角度
逆时针旋转 90 度的
方向. 对于垂直文本布局流,
给定字形的默认方向沿一个向量, 该向量起始于字形所附着的路径
交点, 并指向
从该交点处曲线角度旋转 180 度的方向
.
沿路径的默认字形方向. 左侧, 水平文本. 右侧: 垂直文本.
示例 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
下图首先放大 ‘text’ 元素中的第一个字形 .
上方的小点显示字形附着到 路径的位置. 字形周围的框显示字形被旋转, 使其水平轴平行于 字形附着到路径处曲线的切线. 该框还显示字形的 字符宽度 (即, 使用水平文本 布局绘制字形时当前文本位置在水平方向前进的量 ).
下一张图进一步放大以演示详细的 布局规则.
对于沿路径的从左到右水平文本布局 (即, 当字形方向垂直于 行内基方向时), 布局规则如下:
对于沿路径从上到下的垂直文本 布局使用类似规则 (即, 当字形方向 与行内基方向平行时, 布局规则如下:
在上述计算中, 如果路径上起点或 路径上终点中的任一个超出路径末端, 则在路径端点之外 用一条与路径端点处切线 平行的直线延伸 路径, 使路径上的中点仍可计算.
当行内基方向 为水平时, ‘text’ 或 ‘tspan’ 元素上的任何 ‘x’ 属性表示沿 路径的新绝对偏移量, 从而为 路径上起点提供显式新值. ‘text’ 或 ‘tspan’ 元素上的任何 ‘y’ 属性都会被忽略. 当行内基方向 为垂直时, ‘text’ 或 ‘tspan’ 元素上的任何 ‘y’ 属性表示沿 路径的新绝对偏移量, 从而为 路径上起点提供显式新值. ‘text’ 或 ‘tspan’ 元素上的任何 ‘x’ 属性都会被忽略.
在 ‘textPath’ 内定位所有字符之后, 当前文本位置设置为路径的终点, 对于作为单个闭合环路的 路径, 还要针对 ‘startOffset’ 进行调整 . 换句话说, 跟在 ‘textPath’ 元素之后 (但仍位于 ‘text’ 元素内)且 没有显式定位 信息 (‘x’ 和 ‘y’ 属性)的文本 从路径终点开始定位.
没有显式定位信息时, ‘textPath’ 元素之后文本的起点 位于路径末端 (红点).
选择路径末端而不是 最后一个字符的位置, 是因为前者对作者而言更可预测 (不依赖字体等). 此决定在 London (2016) 编辑会议上作出. 另见 GitHub Issue 84.
‘text’ 元素以 一个或多个块渲染. 每个块 (由文本布局算法生成) 按文档顺序依次渲染. 每个 已渲染块由一个或多个字形组成, 像单个路径一样进行填充和描边.
这意味着块中的所有字形应先填充, 然后所有字形一起描边, 或根据 paint-order 特性的值采用相反顺序.
为了绘制, ‘text’ 有零个, 一个或多个 等效路径, 每个块对应一个. 每个等效路径 由该块内每个字形的一个子路径组成.
由于 fill-rule 特性不 适用于 SVG 文本元素, 因此等效路径内 子路径的具体顺序并不重要.
每个子路径起点的具体位置以及路径 围绕字形形状行进的方向未定义. 但是, 对于给定字体和字形, 用户代理应保持一致.
这意味着文本上的虚线描边在不同实现中 可能不会将虚线图案放置在相同位置.
CSS 提供大量用于设置文本样式的特性. 一般来说 , 只有两组特性适用于 SVG: 确定 要渲染哪些字形的特性 (font-family, font-style 等)以及 在段落级应用的特性 (direction, writing-mode, line-height, letter-spacing, 等).
SVG 文本 元素必须支持的 CSS 特性列表可以在 样式一章中找到.
text-indent, line-break, word-break, hyphens, word-wrap, overflow-wrap.
此外, 必须支持 @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 生成内容伪元素的支持; 作者不应依赖它们会被忽略.
本节涵盖本规范其他地方未涵盖 且 SVG 特有的特性.
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 |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
各值具有以下含义:
在多行 文本上使用 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 的示例.
<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>
此特性已在 SVG 2 中移除.
此特性仅适用于垂直文本. 它在 SVG 2 中已废弃, 并部分由 CSS Writing Modes Level 3 的 text-orientation 特性取代. 以下 SVG 1.1 值仍必须受支持, 方法是将此特性 作为 text-orientation 的简写进行别名处理, 如下:
任何其他值都必须视为无效.
‘kerning’ 特性已在 SVG 2 中移除.
SVG 1.1 使用 'kerning' 特性确定是否应使用字体 字偶距表来调整字形间 间距. 它还允许 <length> 值, 如果给出该值, 则会将其添加到字形之间的间距中 (作为 letter-spacing 特性产生的任何间距的补充). 在 SVG 2 中, 此特性由 CSS font-kerning 特性取代, 后者仅控制 是否启用字体字偶距表.
Chrome 的 UseCounter 数据显示 2014 年使用率为 0.01%. 参见 GitHub issue 80.
本节涵盖本规范其他地方未涵盖的 CSS 特性, 这些特性要么具有 SVG 特定适配, 要么与 SVG 1.1 相比发生了显著 更改.
| SVG 2 要求: | 引用 CSS3 Fonts. |
|---|---|
| 决议: | SVG 2 将依赖 CSS3 Fonts. |
| 目的: | 在 Web 字体功能方面与 CSS 2.1 和 CSS3 保持一致, 并提供 对字体高级排版功能的访问. |
| 负责人: | Chris (ACTION-3123) |
font-variant 特性由 CSS Font Module ([css-font-3])定义.
CSS Font Module 改变了 font-variant 特性在 CSS 2.1 中定义的含义. 它被重新用于 (并且 功能大幅扩展)作为从单个字体内选择字体 变体的简写.
SVG 2 支持所有 font-variant 完整形式特性 (例如 font-variant-ligatures).
SVG 使用 line-height 特性确定 多行文本中各行之间添加的 行距量 (水平和垂直文本都适用). 它不适用于 路径上的文本.
除此处提供的附加信息外, line-height 特性的规范性 定义位于 CSS 2.1 规范中 ([CSS2]).
CSS Inline Module Level 3 可能会更新 'line-height' 的定义.
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 都不允许 多行文本这一事实进一步增加了混淆.
此特性指定 ‘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>
示例
下面是另一个示例, 其中隐式 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:‏
<tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan>
</text>
</svg>
示例
此特性在 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’ 属性对齐.
此特性在 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 特性一起使用.
此特性在 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'.
除另有说明外, 有关 letter-spacing 的定义参见 CSS Text Level 3.([css-text-3]).
SVG 1.1 允许 letter-spacing 特性使用百分比值. 基于 SVG 视口的百分比 值被认为没有 用处, 因此在 SVG 2 中移除. 这使 'letter-spacing' 的定义与 CSS 保持一致.
除另有说明外, 有关 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 保持一致.
| 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 元素, 底行显示应用省略号的文本 .
有人认为此特性毫无用处. 如果与一种可以公开 隐藏文本的机制结合使用, 它会更有用 (悬停在省略号上时显示工具提示?). text-overflow 特性只处理从一行末端溢出的文本. 它 不处理从换行区域末端溢出的文本.
SVG 2 中新增. 添加 white-space 以提供一种更有用的 空白处理控制方式. 使 SVG 和 HTML/CSS 文本 处理保持一致. ‘xml: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. 各行在传统 位置断开.
为了兼容, 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’ 是一个 可继承属性, 可以具有 两个值之一:
"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’ 属性:
可动画: 否.
较旧的 SVG 1.1 内容将使用 ‘xml:space’. 新内容, 以及正在重做的旧内容, 将使用 white-space 并移除 任何现有 ‘xml:space’. 但是, 用户代理可能遇到 在同一元素上同时使用两种方法的内容. 如果 在任何元素上设置了 white-space 特性, 则 ‘xml:space’ 的值 会被忽略.
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
在具有文本选择能力的系统上 (例如, 配备鼠标等指针设备的系统), 并且 具有用于复制/粘贴操作的系统剪贴板时, 符合要求的 SVG 查看器必须支持:
当以下所有情况发生时, 文本选择操作开始:
随着文本选择操作进行 (例如, 用户继续
按住给定鼠标按钮), 与其他
图形元素相关的所有事件都会被忽略 (即, 文本选择操作
是模态的), 并且 SVG 用户代理应通过应用 ::selection 伪类的样式
动态指示哪些字符被选中.
随着
指针在文本选择过程中移动, 文本选择操作的
结束字形是同一 ‘text’ 元素中
字形单元最接近
指针的字形. ‘text’ 元素内位置位于
选择起点和选择终点之间的所有字符都应高亮,
无论其在画布上的
位置如何, 也无论任何图形元素
是否位于选择终点之上.
文本选择操作结束后 (例如, 用户释放 给定鼠标按钮), 所选文本将保持高亮, 直到发生取消文本选择的事件, 例如 指针设备激活事件 (例如, 按下鼠标按钮).
有关确定文本选择操作期间应高亮哪些字符的详细规则 , 请参阅 文本 选择实现说明.
对于具有系统剪贴板的系统, SVG 用户代理 必须提供一个用户界面, 用于启动将当前 所选文本复制到系统剪贴板. SVG 用户代理 只需将所选文本字符串以系统适当的纯文本剪贴板格式 放入即可, 但 如果 SVG 用户代理还提供能够保留与给定文本字符串相关 各种字体特性的富文本 替代格式则更理想.
对于双向文本, 用户代理必须支持按逻辑顺序选择文本, 这会由于字符的双向重排序而导致字形 高亮不连续. 用户 代理可以提供另一种能力, 按视觉渲染顺序选择双向 文本 (即, 在应用双向 文本布局算法之后), 其结果可能是 所选字符数据在逻辑上不连续. 在这种 情况下, 如果用户请求将双向文本复制到 剪贴板, 则用户代理必须进行适当 调整, 仅将视觉上选中的字符复制到 剪贴板.
SVG 作者和SVG 生成器应 排列其文本字符串, 以便在 Web 浏览器等 SVG 查看应用程序中 实现正确顺序的文本 选择; 换句话说, 文本的 DOM 顺序应与 文本的自然阅读顺序一致.
以下实现说明描述 在文本选择 操作期间决定选择哪些字符的算法.
随着文本选择操作发生 (例如, 当用户 点击并拖动鼠标以确定选择范围时), 用户 代理确定一个选择起始位置和一个 选择结束位置, 每个都表示 文本字符串中两个字符之间的位置. 确定 选择起始位置和选择结束 位置后, 用户代理选择适当字符, 得到的文本选择由以下之一组成:
在具有指针设备的系统上, 为确定选择 起始位置, SVG 用户代理根据启动选择 操作事件发生时的当前指针位置, 确定与渲染字形对应的字符之间哪个边界 是最佳目标 (例如最接近) (例如, 鼠标按下事件). 然后用户代理 跟踪选择操作的完成过程 (例如, 鼠标拖动, 最终随后鼠标释放). 在 选择操作结束时, 用户代理确定 哪个字符之间的边界是选择结束位置的最佳目标 (例如最接近).
如果由于双向性没有发生字符重排序, 则选择由选择起始位置和选择结束 位置之间的所有字符组成. 例如, 如果一个 ‘text’ 元素包含 字符串 "abcdef", 且选择起始位置和选择结束 位置分别为 0 和 3 (假设 "a" 的左侧为位置零), 则选择将 由 "abc" 组成.
当用户代理实现 双向文本选择, 且选择在逻辑顺序不连续的字符之间开始 (或结束) 时, 可能有多个潜在的 字符组合可视为选择的一部分. 用于从潜在 选择选项组合中进行选择的算法应选择最 接近文本字符串视觉渲染顺序的选择选项.
当多个字符不可分割地映射到给定的一组 一个或多个字形时, 用户代理可以禁止 选择从字形组中间开始, 或者可以 尝试将字形组所占区域的一部分 分配给与字形对应的字符.
对于支持鼠标等指针设备的系统, 用户代理必须提供一种机制, 即使给定文本具有相关事件处理程序或 链接也能选择文本, 这些事件处理程序或 链接可能由于事件处理优先级规则阻止文本选择 (参见指针事件). 一种实现选项: 对于支持鼠标等指针 设备的平台, 用户代理可以在字符单元格周围提供一个很小的 附加区域, 该区域启动文本 选择操作, 但不启动事件处理程序或 链接.
| SVG 2 要求: | 提供一个 DOM 方法, 将 ‘text’ 元素转换为轮廓路径数据. |
|---|---|
| 决议: | 我们将添加一个 DOM 方法, 将 ‘text’ 元素转换为轮廓路径数据, 可能将该 功能移至 FXTF. |
| 目的: | 允许将文本作为路径进行操作. |
| 负责人: | Cameron (ACTION-3076) |
| 状态: | 未来愿望清单 |
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() 时, 运行以下步骤:
getComputedTextLength 方法用于计算元素内文本的 "长度". 调用 getComputedTextLength() 时, 运行以下步骤:
getSubStringLength 方法用于计算元素内文本子字符串的格式化文本前进距离 . 调用 getSubStringLength(charnum, nchars) 时, 运行以下步骤:
这意味着, 例如, 如果一个连字 只部分包含在子字符串中, 那么 排版字符的前进值 以及任何后续 letter-spacing 或 word-spacing 间距将分配给第一个 字符的文本长度.
先前版本的 SVG 要求此方法 和 getComputedTextLength 还包括 由于子 元素上的 ‘dx’ 或 ‘dy’ 导致的行内方向定位调整, 使返回值等效于 用户代理对 ‘textLength’ 的计算. 但是, 这一定义不明确, 实现不佳, 且收益存疑, 因此已简化以匹配实现.
文本长度方法的更改在 2015 年 8 月 Paris 面对面会议上解决.
要查找 字符对应的排版 字符, 给定元素 element 内索引 index 处的 字符, 运行以下步骤:
getStartPositionOfChar 方法用于获取文本 布局完成后排版 字符的位置. 调用 getStartPositionOfChar(charnum) 时, 运行以下步骤:
getEndPositionOfChar 方法用于获取文本 布局完成后排版字符的尾部位置. 调用 getEndPositionOfChar(charnum) 时, 运行以下步骤:
getExtentOfChar 方法用于计算与给定排版字符对应的字形单元的紧密边界框 . 调用 getExtentOfChar(charnum) 时, 运行以下步骤:
getRotationOfChar 方法用于获取排版 字符的旋转. 调用 getRotationOfChar(charnum) 时, 运行以下步骤:
getCharNumAtPosition 方法用于查找哪个字符导致文本字形 渲染在坐标系统中的给定位置. 因为字符和字形之间并非一一对应, 只返回相关排版 字符的第一个字符 调用 getCharNumAtPosition(point) 时, 运行以下步骤:
selectSubString 方法用于选择元素内的文本. 调用 selectSubString(charnum, nchars) 时, 运行以下步骤:
选择此元素中文本的一个子字符串, 从字符 索引 charnum 开始, 向前延伸 nchars 个字符. 调用此方法时必须遵循以下步骤:
忽略参数检查和异常抛出, 这等效于 执行以下操作:
var selection = document.getSelection(); selection.removeAllRanges(); var range = new Range(); range.setStart(textContentElement, charnum); range.setEnd(textContentElement, charnum + nchars); selection.addRange(range);
此方法已弃用, 因为它重复了 Selection API 的功能.
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’ 内容属性.
SVGTextElement 对象表示 DOM 中的 ‘text’ 元素 .
[Exposed=Window] interface SVGTextElement : SVGTextPositioningElement { };
SVGTSpanElement 对象表示 DOM 中的 ‘tspan’ 元素 .
[Exposed=Window] interface SVGTSpanElement : SVGTextPositioningElement { };
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 类型常量表所述.
定义形状的图形元素 – ‘path’ 元素, 基本形状, 和文本内容元素 – 通过 填充进行渲染, 即绘制对象内部, 以及描边, 即 沿对象轮廓绘制. 填充和描边都是 绘制操作. SVG 2 支持多种 不同的绘制, 可用于绘制图形元素的填充和描边:
用于填充和描边元素的绘制通过 fill 和 stroke 特性指定. 下一节描述 可用于这些特性的不同值.
其他特性, 例如 fill-opacity 和 stroke-width, 也会影响填充和描边绘制应用于 画布的方式. 下面的填充特性和描边特性 各节描述这些特性.
某些图形元素 – ‘path’ 元素和基本形状 – 还可以在其顶点或沿其描述的路径的其他位置绘制标记 符号 . 下面的标记一节描述 如何定义和使用标记.
SVG 2 为形状添加标记. 已在 Tokyo F2F 达成决议.
| 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
可能的值如下:
<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>
有关 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 特性相同的颜色填充.
| 名称: | fill |
|---|---|
| 值: | <paint> |
| 初始值: | black |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同, 但会计算 <color> 值并将 <url> 值转换为绝对值 |
| 动画类型: | 按计算值 |
fill 特性绘制给定图形 元素的内部. 要绘制的区域包括形状轮廓 内的所有区域. 为了确定形状的内部, 会考虑所有子路径, 并根据 fill-rule 特性的当前值相关规则确定内部. 形状的零宽度几何轮廓包含在要 绘制的区域内.
填充操作通过执行填充操作来填充开放子路径, 就像向路径中添加额外的 "closepath" 命令 以连接子路径的最后一点与第一点一样. 因此, 填充操作同时适用于 ‘path’ 元素中的开放子路径 (即, 没有 closepath 命令的子路径)以及 ‘polyline’ 元素.
| 名称: | fill-rule |
|---|---|
| 值: | nonzero | evenodd |
| 初始值: | nonzero |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
fill-rule 特性指示用于确定画布哪些部分包含在形状 内部的算法 (或 环绕规则). 对于简单且不自相交的路径, 哪个区域位于 "内部"从直觉上很清楚; 但是对于更复杂的路径, 例如 自相交的路径, 或一个子路径包围另一个子路径的路径, "内部"的解释就不那么明显.
fill-rule 特性提供两种 确定形状内部的方式:
此规则通过从画布上的点向任意 方向的无穷远绘制一条射线, 然后检查形状的线段与射线 相交的位置, 来确定该点是否位于"内部" . 从计数零开始, 每当路径段从左 向右穿过射线时加一, 每当路径段从右向左穿过 射线时减一. 计数完成后, 如果结果为零, 则该点位于路径外部 . 否则, 它位于内部. 下图 说明 nonzero 规则:
nonzero 填充规则对具有自相交和 包围子路径的路径的效果.
此规则通过从画布上的点向任意 方向的无穷远绘制一条射线, 并计算该射线穿过给定形状的 路径段数量, 来确定该点是否位于"内部" . 如果该数量为奇数, 则该点位于内部; 如果为偶数, 则该点位于外部. 下图 说明 evenodd 规则:
evenodd 填充规则对具有自相交和 包围子路径的路径的效果.
上述描述没有规定当路径 段与射线重合或与射线相切时应如何处理. 由于可以使用任何射线, 可以简单地选择一条不存在这种有问题 交点的不同射线.
| 名称: | fill-opacity |
|---|---|
| 值: | <'opacity'> |
| 初始值: | 1 |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 指定值转换为数字, 并限制在 [0,1] 范围内 |
| 动画类型: | 按计算值 |
fill-opacity 指定用于绘制当前对象填充的 绘制操作的不透明度. (参见 绘制形状和文本).
另请参阅 opacity 特性, 该特性 指定组不透明度.
| SVG 2 要求: | 支持非缩放描边. |
|---|---|
| 决议: | SVG 2 将包含非缩放
描边. SVG 2 将具有 ‘vector-effect’ 特性. |
| 目的: | 支持在页面缩放时宽度不会变化的描边, 例如地图中常见的描边. |
| 负责人: | Chris 或 Erik (无 action) |
| 说明: | 请注意, 这可以成为更通用的非缩放功能的一部分. |
在本节中, 我们定义若干特性, 允许 作者控制描边的不同方面, 包括其绘制, 粗细, 虚线的使用以及 路径段的连接和端帽.
在所有情况下, 所有受 方向性影响的描边特性, 例如与虚线图案有关的特性, 都必须 以使描边操作从与 图形元素开始相同的点开始的方式渲染. 特别是, 对于 ‘path’ 元素, 路径的起点是初始 "moveto" 命令的第一个点.
对于虚线图案等描边特性, 其计算 依赖于沿图形元素轮廓的进度, 距离计算必须使用 SVG 用户代理的 标准沿路径距离 算法.
当使用复杂绘制服务器 (例如 渐变或图案)执行描边时, 描边操作必须与 以下情况产生的结果相同: 将由当前图形元素的 几何形状及其相关描边特性定义的几何形状 转换为等效的 ‘path’ 元素, 然后 使用给定绘制服务器进行填充.
| 名称: | 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) |
| 说明: | 参见提案 页面. |
| 名称: | stroke-opacity |
|---|---|
| 值: | <'opacity'> |
| 初始值: | 1 |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 指定值转换为数字, 并限制在 [0,1] 范围内 |
| 动画类型: | 按计算值 |
stroke-opacity 特性指定 用于描边当前对象的绘制操作的不透明度. (参见 绘制形状和文本.) 与 fill-opacity 相同.
另请参阅 opacity 特性, 该特性指定 组不透明度.
| 名称: | stroke-width |
|---|---|
| 值: | <length-percentage> | <number> |
| 初始值: | 1px |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | 相对于当前 SVG 视口的归一化对角线 (参见单位) |
| 媒体: | 视觉 |
| 计算值: | 绝对长度或百分比, 数字首先转换为绝对长度 |
| 动画类型: | 按计算值 |
此特性指定当前对象上描边的宽度. 值为零时不绘制描边. 负值 无效. <number> 值表示以用户单位为单位的值.
| 名称: | stroke-linecap |
|---|---|
| 值: | butt | round | square |
| 初始值: | butt |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
stroke-linecap 指定 描边开放子路径时用于其末端的形状, 以及无论开放还是闭合的零长度 子路径要绘制的形状. 可能的值如下:
此值表示在每个子路径的每个末端, 表示描边的形状将延伸一个直径等于 描边宽度一半圆. 如果子路径, 无论开放还是 闭合, 长度为零, 则结果是该子路径的描边完全 由以子路径点为中心的完整圆组成.
此值表示在每个子路径末端, 表示描边的形状将延伸一个矩形, 其宽度与描边宽度相同, 长度为描边宽度的一半. 如果子路径, 无论开放还是闭合, 长度为零, 则结果是该子路径的描边完全由一个 边长等于描边宽度的正方形组成, 该正方形以子路径点为中心, 并定向为其两条边与该子路径点处的有效切线 平行. 有关如何确定零长度子路径处切线的详细信息, 请参阅 ‘path’ 元素实现说明.
三种线帽类型.
有关线帽形状更精确的描述, 请参阅下面 端帽形状的定义.
| 名称: | stroke-linejoin |
|---|---|
| 值: | miter | round | bevel |
| 初始值: | miter |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
stroke-linejoin 指定 描边路径或基本形状时在其 拐角处使用的形状. 有关更多详细信息, 请参阅 路径实现说明.
三种线连接类型.
| 名称: | stroke-miterlimit |
|---|---|
| 值: | <number> |
| 初始值: | 4 |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 按计算值 |
当两个线段以锐角相交并且为 stroke-linejoin 指定 miter 值时, 连接可能会延伸 到远超路径描边线条粗细的位置. stroke-miterlimit 对 线连接的延伸范围施加限制.
以前版本的 SVG 规范 还声明 0 到 1 之间的值是错误的, 但用户代理的 CSS 解析器并未很好地实现这一点. 实际上, 任何斜接连接都会超过 0 到 1 之间的斜接限制.
对于 miter 值, 给定 用户坐标系统中线段之间的角度 θ, 斜接长度计算如下:
miter length = stroke-width / sin(theta / 2)
从历史上看, 斜接长度定义为从相交路径段的 内侧描边边缘到斜接尖端的距离. 实际上, 只有直线路径段遵循此定义. 上述基于角度的斜接长度定义 仅取决于连接处路径段的切线, 因此无论路径段曲率如何都能提供一致的结果.
左: 斜接长度的历史定义. 右: 两条不同路径, 在路径段连接点处具有相同的 路径切线. 斜接连接的行为 (回退为斜角或裁剪位置)对两条路径都相同. 它不依赖内侧描边边缘相交的位置.
如果斜接长度除以描边宽度超过 stroke-miterlimit, 那么对于值:
超过 stroke-miterlimit 时对线连接的影响. 橄榄绿色虚线显示当 stroke-miterlimit 值为 3 时 斜接限制的位置. 灰色区域显示没有斜接 限制时连接的外观.
有关线连接形状更精确的描述, 请参阅下面 线连接形状的定义.
| 名称: | stroke-dasharray |
|---|---|
| 值: | none | <dasharray> |
| 初始值: | none |
| 适用于: | 形状和文本 内容元素 |
| 继承: | 是 |
| 百分比: | 相对于当前 SVG 视口的归一化对角线 (参见单位) |
| 媒体: | 视觉 |
| 计算值: | 以逗号分隔的绝对长度或百分比列表, 数字首先转换为绝对 长度, 或指定的关键字 |
| 动画类型: | 参见正文 |
其中:
<dasharray> = [ [ <length-percentage> | <number> ]+ ]#
stroke-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 值按以下方式组合 :
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 - (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 值易于计算.
有关沿路径放置虚线位置的更精确描述, 请参阅下面 虚线位置的定义.
| SVG 2 要求: | 更精确地指定描边虚线. |
|---|---|
| 决议: | SVG 2 应更精确地指定描边虚线 . |
| 目的: | 定义基本形状和路径段上的虚线起点. |
| 负责人: | Cameron (无 action) |
元素的描边形状是 由 stroke 特性填充的 形状. 由于 ‘text’ 元素可以分成多个块渲染, 因此每个块都有自己的 描边形状. 以下算法描述 ‘path’, 基本形状或单个 ‘text’ 块的理想 描边形状, 同时考虑上述描边特性. 所描述的理想描边形状 定义最佳情况的实现, 但为了性能原因, 实现可以在一定程度上 偏离此描述.
描边绘制形状在不同平台上可能不同的示例.
<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>
选择 index 和 last 时是否包含任何零长度线段 并不重要.
给定 ‘path’ 或基本形状的等效路径的 给定子路径的虚线位置 是一系列值对, 表示形成子路径描边的每个虚线段 沿子路径的起始和结束距离. 它 按以下方式确定:
子路径沿给定 position 处的起始和结束端帽 形状按以下方式确定:
三种不同的 stroke-linecap 值应用于 具有单个非零长度子路径的路径. 白线是路径 本身, 粗灰色区域是描边. 顶行中, 绿色线 表示路径端点切线的垂线, 粉色 区域是端帽. 底行显示没有垂线 和端帽高亮的描边.
给定子路径线段的线连接形状 按以下方式确定:
这意味着例如 'M 100,100 h 100 h 100' 不会在两个直线段之间产生线连接形状, 但 'M 100,100 h 100 h -100' 会.
圆角线连接形状的构造, 以粉色显示. 白线是原始路径, 它具有两个汇聚到一点的线段, 灰色区域是描边.
本章说明与绘制相关的 vector-effect. 有关 vector-effect 的其他方面, 请参阅此处.
| 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’ 元素一样, 动画 效果会显示在文档中标记的所有当前使用位置上.
给定元素上的标记按以下顺序从 底部到顶部绘制:
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| markerUnits | strokeWidth | userSpaceOnUse | strokeWidth | 是 |
‘markerUnits’ 属性 定义 ‘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’).
关键字值必须计算为以下百分比:
| 关键字 | 等效百分比 |
|---|---|
| left | 0% |
| center | 50% |
| right | 100% |
| top | 0% |
| bottom | 100% |
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| orient | auto | auto-start-reverse | <angle> | <number> | 0 | 是 (非累加) |
‘orient’ 属性指示标记放置在形状上的位置时 如何旋转. 各值具有以下含义:
标记的方向设置为其正 x 轴 指向相对于标记放置位置处 路径的方向 (参见 渲染标记).
如果由 marker-start 放置, 则标记方向 与指定 'auto' 时使用的方向相差 180°. 对于 所有其他标记, 'auto-start-reverse' 与 'auto' 含义相同.
这允许定义单个箭头标记, 既可用于路径起点也可用于终点, 即从两端 向外指向.
| 名称: | 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 的可能值如下:
对于除 ‘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’ 的描边相匹配.
| 名称: | marker |
|---|---|
| 值: | none | <marker-ref> |
| 初始值: | 简写特性未定义 |
| 适用于: | 形状 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 参见各个特性 |
| 动画类型: | 离散 |
marker 特性设置 marker-start, marker-mid 和 marker-end 特性的值. marker 的值 直接用于所有三个相应的完整形式特性.
当由于将 ‘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 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>
描边绘制在填充下方的文本.
| 名称: | 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 的值具有 以下含义:
sRGB 颜色空间 (即具有 2.2 gamma 曲线的非线性空间)和线性化 RGB 颜色空间 (即颜色值表示为没有 gamma 曲线的 sRGB 三刺激值)之间的转换公式可见于 sRGB 规范 [SRGB]. 为便于说明, 以下公式显示从 sRGB 到线性化 RGB 的转换, 其中 Csrgb 是三个 sRGB 颜色分量之一, Clinear 是相应的 线性化 RGB 颜色分量, 所有颜色值都在 0 到 1 之间:
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 特性值 执行.
| 名称: | shape-rendering |
|---|---|
| 值: | auto | optimizeSpeed | crispEdges | geometricPrecision |
| 初始值: | auto |
| 适用于: | 形状 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
shape-rendering 特性向 实现提供提示, 指示其在渲染 ‘path’ 元素和基本形状 (例如圆和矩形)等矢量图形 元素时应如何权衡. 各值具有以下含义:
| 名称: | text-rendering |
|---|---|
| 值: | auto | optimizeSpeed | optimizeLegibility | geometricPrecision |
| 初始值: | auto |
| 适用于: | ‘text’ |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
text-rendering 特性向实现 提供关于渲染文本时应如何权衡的 提示. 各值具有以下含义:
| 名称: | image-rendering |
|---|---|
| 值: | auto | optimizeQuality | optimizeSpeed |
| 初始值: | auto |
| 适用于: | 图像 |
| 继承: | 是 |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
CSS Image Values and Replacement Content Module Level 4 将来可能重新定义此特性. 特别是它 应允许在放大时选择平滑处理或保持像素化外观.
image-rendering 特性向实现 提供关于在执行 图像处理时如何在速度和质量之间权衡的提示. 各值具有以下含义:
在所有情况下, 即使原始数据和/或目标 设备使用索引颜色, 重采样也必须在真彩色 (例如 24 位)颜色空间中完成. 高质量 SVG 查看器应使用 线性颜色空间执行图像重采样.
有关 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’ 特性.
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’ 属性进行重新序列化.
本节涵盖绘制服务器, 这是一种 允许对象的 fill 或 stroke 由 在其他位置找到的资源定义的方法. 它允许资源在 整个文档中重复使用. 有关填充和描边对象的一般 讨论, 请参阅 绘制: 填充和描边一节.
SVG 定义了多种绘制服务器类型:
| SVG 2 要求: | 形状的任意填充. |
|---|---|
| 决议: | SVG 2 应支持使用任意元素进行填充和 描边. |
| 目的: | 允许例如将视频或图像用作填充源. |
| 负责人: | Alex? (无 action) |
两种绘制服务器. 从左到右: 线性渐变. 图案.
绘制服务器通过在 fill 或 stroke 特性中包含URL 引用来使用 (即 fill="url(#MyLightPurple)").
特性从祖先 继承到绘制服务器元素中; 特性不会从引用 绘制服务器元素的元素继承.
绘制服务器元素永远不会直接渲染; 它们唯一的用途是 作为可以通过 fill 和 stroke 特性引用的对象. 这些元素的 display 值 必须始终由用户代理样式表 设置为 none, 且此声明的重要性必须高于任何其他 CSS 规则或呈现属性. 绘制服务器元素 即使在绘制服务器元素或其任何祖先上的 display 特性设置为 none 时仍可被引用.
大多数绘制服务器元素接受 ‘href’ 属性, 可用于将兼容的绘制服务器元素定义为模板. 为模板元素定义的属性 会在当前元素未指定相应属性时 代替初始值使用 . 此外, 如果当前元素除了描述性元素之外 没有任何子内容 , 则会克隆模板元素的子内容来替换它.
对于 ‘pattern’, 排除描述性内容是 SVG 2 中新增的, 这与渐变的行为一致, 也与使描述性内容对任何 SVG 元素都有效的更改一致.
同样新增的是: 模板交叉引用可以指向外部文件资源 (SVG 1.1 的不同章节在这一点上给出了不一致的指导), 并且子元素的"继承"通过影子树表示.
模板化可以任意层级地间接进行 (受外部文件资源的安全限制约束, 这些限制可能使引用无效). 因此, 如果被引用的模板元素没有相关子内容 或没有定义指定属性, 则属性值或克隆内容会 从模板自身 ‘href’ 属性引用的另一个元素派生.
本章中每个 ‘href’ 属性的描述按如下方式定义 模板化过程的限制:
如果任何指定属性未 在当前元素上定义, 或者当前元素除描述性元素之外没有子元素, 则用户代理必须处理 URL 以标识被引用的资源. 如果 URL 引用不是无效的, 则 URL 的目标元素将用作模板元素, 如下:
对于任何未在当前元素上定义的指定属性, 用户代理必须确定模板元素的属性值 并将其用作当前元素的值 . 如有需要, 模板值从 递归交叉引用派生. 只有在耗尽所有有效 URL 引用后, 才替换为属性的初始值.
如果当前元素除描述性元素之外没有子元素, 则用户代理必须为此元素生成影子树, 其行为必须等效于use 元素影子 树, 但宿主是当前绘制服务器元素. 克隆到影子树中的元素实例在被引用文档 子树中的源元素为:
当绘制服务器元素具有影子树时, 该树中的元素实例 必须用于渲染绘制服务器效果, 就像它们是绘制服务器元素自己的子元素一样.
用于模板化的use 元素影子树模型 允许克隆内容继承与原始内容不同的样式. 此行为在 SVG 2 中新定义; SVG 1.1 未定义如何将样式应用于继承的绘制服务器内容.
渐变由绘图表面上各点之间平滑的颜色过渡组成 . SVG 提供两种类型的渐变:
定义渐变后, 可以通过将 fill 或 stroke 特性设置为引用该渐变, 使用渐变填充或描边图形元素.
线性和径向渐变的颜色过渡由 沿渐变向量的一系列颜色停止点定义 . 渐变法线定义向量中的颜色如何 绘制到表面. 对于线性渐变, 法线是 垂直于向量的直线. 对于径向渐变, 法线是 与向量成直角相交的圆. 每条渐变 法线使用由向量确定的一种颜色绘制.
标示渐变向量的线性和径向渐变 . 向量由以小 圆表示的三个停止点组成. 每个渐变显示一条渐变法线.
对于线性和径向渐变, 渐变向量上两个停止点之间的 颜色值是每个通道上两个停止点颜色的线性插值 , 按与每个停止点的距离加权.
$V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));
其中, 对于每个通道:
当图形元素引用渐变时, 从概念上讲, 图形元素应复制带有渐变法线的渐变向量, 并将其视为自身几何形状的一部分. 应用于图形元素几何形状的任何 变换也会应用于复制的渐变向量和渐变法线. 在引用的渐变上指定的任何 渐变变换会在任何图形元素变换 应用于渐变之前应用.
线性渐变由 ‘linearGradient’ 元素定义.
请注意, ‘x1’,‘y1’, ‘x2’ 和 ‘y2’ 属性 在 ‘linearGradient’ 上不是呈现 属性; 使用值不受 CSS 样式影响. ‘gradientTransform’ 属性是 transform 特性的呈现属性.
定义属性 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的坐标系统.
如果 gradientUnits="userSpaceOnUse", ‘x1’, ‘y1’, ‘x2’, 和 ‘y2’ 表示在引用渐变元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用渐变元素的元素所使用的用户坐标系统), 然后应用由 ‘gradientTransform’ 属性指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.
如果 gradientUnits="objectBoundingBox", 属性 ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的用户坐标系统 使用应用渐变的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘gradientTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.
当 gradientUnits="objectBoundingBox" 且 ‘gradientTransform’ 为恒等矩阵时, 线性渐变的法线在对象边界框空间中垂直于 渐变向量 (即 抽象坐标系统, 其中 (0,0) 位于对象边界框左上角 , (1,1) 位于 对象边界框右下角). 当 对象的边界框不是正方形时, 在对象边界框空间内 最初垂直于渐变向量的渐变法线 在用户空间中相对于渐变向量渲染时 可能不再垂直. 如果渐变向量平行于边界框的某一 轴, 渐变法线将保持 垂直. 此变换是由于应用 从边界框空间到用户坐标系统的非均匀缩放变换 .
包含从渐变坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜渐变等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.
‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 为线性 渐变定义一个渐变向量. 此渐变向量提供 渐变 停止点映射到的起点和 终点. ‘x1’, ‘y1’, ‘x2’ 和 ‘y2’ 的值 可以是数字或百分比.
参见 ‘x1’.
参见 ‘x1’.
参见 ‘x1’.
指示渐变在目标矩形边界内部 开始或结束时会发生什么.
spreadMethod 三种可能值的示意图, 从左到 右: pad, reflect, repeat. 渐变向量跨越 边界框宽度的 40% 到 60%.
指向模板渐变元素的URL 引用; 为使引用有效, 它必须指向 不同的 ‘linearGradient’ 或 ‘radialGradient’ 元素.
请参阅将绘制服务器用作 模板的过程, 以及为URL 引用属性 和 已弃用的 XLink 属性定义的通用处理.
将从模板复制的指定属性为:
如果 ‘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
径向渐变由 ‘radialGradient’ 元素定义.
请注意, ‘cx’,‘cy’, 和 ‘r’ 属性 在 ‘radialGradient’ 上不是 呈现属性; 使用值不受 CSS 样式影响. ‘gradientTransform’ 属性是 transform 特性的呈现属性.
定义属性 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 的坐标系统.
如果 gradientUnits="userSpaceOnUse", ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 表示在引用渐变元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用渐变元素的元素所使用的用户坐标系统), 然后应用由 ‘gradientTransform’ 属性指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.
如果 gradientUnits="objectBoundingBox", 属性 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, 和 ‘fr’ 的用户坐标系统 使用应用渐变的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘gradientTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.
当 gradientUnits="objectBoundingBox" 且 ‘gradientTransform’ 为恒等矩阵时, 径向渐变的环相对于对象边界框空间是圆形的 (即 抽象坐标系统, 其中 (0,0) 位于对象边界框左上角 , (1,1) 位于 对象边界框右下角). 当 对象的边界框不是正方形时, 在对象边界框空间中 概念上为圆形的环 会由于应用从边界框空间 到用户坐标系统的非均匀缩放变换而渲染为椭圆形 .
包含从渐变坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜渐变等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.
‘cx’, ‘cy’ 和 ‘r’ 定义 径向渐变的结束圆. 渐变将按以下方式绘制: 100% 渐变停止点映射 到该结束圆的圆周.
参见 ‘cx’.
参见 ‘cx’.
负值是错误 (参见错误 处理).
‘fx’, ‘fy’, 和 ‘fr’ 定义径向渐变的 起始 圆. 渐变将按以下方式绘制: 0% 渐变停止点映射 到该起始圆的圆周.
如果元素引用了 为 'fx' 指定值的元素, 则 'fx' 的值 从被引用元素继承.
此图显示在 ‘fr’ 为 ‘r’ 的 50% 时如何定义几何属性. 小圆标记最外层圆的中心 (‘cx’,‘cy’), 而十字标记 最内层圆的中心 (‘fx’,‘fy’). 虚线显示两个渐变向量. 向量连接 最内层和最外层圆上的对应点. 外圆之外的区域使用最后一个 stop-color 绘制, 而内圆 内部区域使用第一个 stop-color 绘制.
参见 ‘fx’.
如果元素引用了一个 为 'fy' 指定值的元素, 则 'fy' 的值 从被引用元素继承.
SVG 2 中新增. 添加它是为了与 Canvas 保持一致.
负值是错误 (参见错误 处理).
如果未指定该属性, 其效果就像 指定值 '0%' 一样. 如果元素引用了一个 为 'fr' 指定值的元素, 则 'fr' 的值 从被引用元素继承.
| SVG 2 要求: | 允许在径向渐变中指定焦点圆半径. |
|---|---|
| 决议: | 为 SVG 2 的 ‘radialGradient’> 添加 ‘fr’ 属性. |
| 目的: | 与 Canvas 保持一致. 零偏移停止点将位于由 ‘fx’, ‘fy’ 和 ‘fr’ 属性定义的圆上. |
| 负责人: | Erik (ACTION-3098) |
指示渐变在由渐变绘制的对象边界内 开始或结束时会发生什么. 其 值和含义与 ‘linearGradient’ 元素上的 ‘spreadMethod’ 属性相同.
指向模板渐变元素的URL 引用; 为使引用有效, 它必须指向 ‘linearGradient’ 元素 或 不同的 ‘radialGradient’ 元素.
请参阅将绘制服务器用作 模板的过程, 以及为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.
将从模板复制的指定属性为:
请参阅为URL 引用 属性和 已弃用的 XLink 属性定义的通用处理.
| SVG 2 要求: | 阐明焦点位于圆上的径向渐变. |
|---|---|
| 决议: | 当焦点位于 圆边缘且使用 repeat 时, 重复颜色的第一个和最后一个停止点之间的 距离为 0, 绘制应生成所有 渐变停止点平均值的颜色. |
| 目的: | 改进径向渐变的互操作性. |
| 负责人: | Erik (ACTION-3097) |
| 说明: | SVG 1.1 未定义当焦点 位于圆边缘且使用 'repeat' 时应如何处理. 重复颜色的 第一个和最后一个停止点之间的距离为 0. 已 决议绘制应生成所有渐变停止点的 加权平均颜色 (按偏移量加权). |
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
渐变中使用的颜色向量 由作为 ‘linearGradient’ 或 ‘radialGradient’ 元素子元素的 ‘stop’ 元素定义.
在 SVG 1.1 中, 上文写作: "颜色 渐变带..." 但本节其他地方均未使用 "ramp".
指示渐变停止点的放置位置. 对于线性 渐变, ‘offset’ 属性 表示沿渐变向量的位置. 对于径向渐变, 它 表示从最内层/最小圆的边缘到最外层/最大 圆边缘的分数距离 .
stop-color 特性指示在该渐变停止点使用 什么颜色 . 关键字 currentColor 和其他颜色语法 可以采用与 fill 和 stroke 特性的<paint> 规范中相同的方式指定.
对于渐变, SVG 对 'transparent' 关键字的处理 与 CSS 不同. SVG 不在预乘 空间中计算渐变, 因此 'transparent' 实际表示透明黑色. 指定 值为 'transparent' 的 stop-color 等效于 指定值为 'black' 的 stop-color 和值为 '0' 的 stop-opacity.
stop-opacity 特性定义 给定渐变停止点的不透明度. 用于渐变计算的不透明度值是 stop-opacity 的值与 stop-color 值的不透明度 的乘积. 对于不包含显式不透明度信息的 stop-color 值类型, 该分量的不透明度必须视为 1.
如果两个渐变停止点具有相同的偏移值, 则 后一个渐变停止点控制 重叠点处的颜色值. 特别是:
<stop offset="0" stop-color="white"/> <stop offset=".2" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>
将具有与以下内容近似相同的效果:
<stop offset="0" stop-color="white"/> <stop offset=".1999999999" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>
即一个从白色平滑过渡到红色, 然后从红色突然切换到蓝色, 再 从蓝色平滑过渡到黑色的渐变.
图案用于使用一个可在 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).
请注意, ‘x’,‘y’, ‘width’ 和 ‘height’ 属性 在 ‘pattern’ 上不是 呈现属性; 使用值不受 CSS 样式影响. ‘patternTransform’ 属性是 transform 特性的呈现属性.
定义属性 ‘x’, ‘y’, ‘width’ 和 ‘height’ 的坐标系统.
如果 patternUnits="userSpaceOnUse", ‘x’, ‘y’, ‘width’ 和 ‘height’ 表示在引用 ‘pattern’ 元素时生效的当前用户坐标系统 基础上 (即通过 fill 或 stroke 特性引用 ‘pattern’ 元素的元素所使用的用户坐标系统), 然后 应用由属性 ‘patternTransform’ 指定的变换后所得坐标系统中的值. 百分比 表示相对于当前 SVG 视口的值.
如果 patternUnits="objectBoundingBox", 属性 ‘x’, ‘y’, ‘width’ 和 ‘height’ 的用户坐标系统 使用应用图案的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘patternTransform’ 属性指定的变换. 百分比表示相对于对象 边界框的值.
定义 ‘pattern’ 内容的坐标系统. 请注意, 如果指定了 ‘viewBox’ 属性, 则此属性不起作用.
如果 patternContentUnits="userSpaceOnUse", ‘pattern’ 元素内容的用户坐标系统是 在引用 ‘pattern’ 元素时生效的当前用户坐标系统 基础上所得的坐标系统 (即通过 fill 或 stroke 特性引用 ‘pattern’ 元素的元素所使用的用户坐标系统), 然后应用由 ‘patternTransform’ 属性指定的变换.
如果 patternContentUnits="objectBoundingBox", ‘pattern’ 元素内容的用户坐标系统 使用 应用图案的元素的边界框 建立 (参见对象 边界框单位), 然后应用 ‘patternTransform’ 属性指定的变换.
包含从图案坐标系统到 目标坐标系统的可选附加 变换定义 (即 'userSpaceOnUse' 或 'objectBoundingBox'). 这允许实现例如倾斜图案图块等效果. 此附加变换矩阵后乘到 (即插入到右侧)任何先前定义的 变换, 包括从 对象边界 框单位转换到用户坐标系统所需的隐式变换.
‘x’, ‘y’, ‘width’ 和 ‘height’ 指示图案图块如何放置和间隔. 这些 属性表示由 ‘patternUnits’ 和 ‘patternTransform’ 属性组合指定的坐标 空间中的坐标和值.
参见 ‘x’.
参见 ‘x’.
负值是错误 (参见错误 处理). 值为零会禁用 元素的渲染 (即不应用绘制).
参见 ‘x’.
负值是错误 (参见错误处理). 值为零会禁用元素的渲染 (即不 应用绘制).
指向模板元素的URL 引用, 为使引用有效, 它必须是不同的 ‘pattern’ 元素.
请参阅将绘制服务器用作 模板的过程, 以及为URL 引用属性 和 已弃用的 XLink 属性定义的通用处理.
将从模板复制的指定属性为:
SVG 的用户代理样式表将 ‘pattern’ 元素的 overflow 特性设置为 hidden, 这会在图案图块边界创建矩形裁剪 路径. 除非覆盖 overflow 特性, 图案内 超出图案矩形的任何图形都将被裁剪 . 下面的示例 pattern01显示 裁剪到图案图块的效果.
请注意, 如果 overflow 特性设置 为 visible, 则当前尚未定义 图案在图案边界之外的渲染行为 . SVG 的未来版本可能要求显示 溢出内容. 鼓励 SVG 实现者渲染溢出内容, 因为这是作者期望的行为. 如果渲染溢出内容, 图案图块应按行从左到右渲染, 各行从上到下渲染.
‘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
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’ 属性的数字类型值如上面的 数字扩展类型常量表所述.
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’ 内容属性
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’ 内容属性 .
SVGStopElement 对象表示 DOM 中的 ‘stop’ 元素 .
[Exposed=Window] interface SVGStopElement : SVGElement { [SameObject] readonly attribute SVGAnimatedNumber offset; };
offset IDL 属性 反映 ‘offset’ 内容属性.
请注意, SVGStopElement 没有用于其 ‘path’ 属性的 反映 IDL 属性.
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’ 内容属性.
SVG 内容可以通过利用 SVG 语言中的以下功能实现交互 (即响应 用户发起的事件):
本章描述交互式 SVG 中的脚本 和 DOM 事件处理, 包括事件在什么情况下触发.
相关信息可在其他章节中找到:
| 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" 阶段事件时才解析为具体时间.
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 规范) 支持额外的事件和事件属性. 以下事件类型由于动画中的状态 变化而触发.
这些动画事件的事件属性对 其他元素没有影响.
在支持交互性的用户代理中, 作者通常 会定义 SVG 文档, 使其能够响应 用户界面事件. 可能的用户事件集合 包括指针事件, 键盘事件和文档事件.
响应用户界面 (UI) 事件时, 作者可能 启动动画, 跳转到另一个 Web 页面, 突出显示文档的一部分 (例如更改 指针下方图形元素的颜色), 启动 "roll-over" (例如使一些先前隐藏的图形 元素出现在指针附近)或启动一个 与远程数据库通信的脚本.
由于用户在 指针设备上执行操作而发生的用户界面事件称为指针事件.
许多系统支持鼠标或 轨迹球等指针设备. 在使用鼠标的系统上, 指针事件包括 鼠标移动和鼠标点击等操作. 在 使用不同指针设备的系统上, 指针设备通常 通过提供等效用户操作的机制来模拟鼠标行为 , 例如提供一个按下后 等效于鼠标点击的按钮.
对于每个指针事件, SVG 用户代理确定 给定指针事件的目标元素. 目标 元素是在事件发生时其相关 图形内容位于指针下方的最上层图形元素 . (有关 如何确定元素的相关图形 内容是否位于指针下方, 以及在何种情况下 该图形元素可以成为指针 事件的目标元素, 请参阅特性 pointer-events 的描述.) 当元素未显示时 (即该元素 或其祖先之一的 display 特性 值为 none), 该元素不能成为 指针事件的目标.
如果指针事件存在目标元素, 则 事件根据正常的 事件流 派发到该元素 ([uievents], 第 3.1 节). 对于由 ‘use’ 元素或通过脚本创建的影子树, 事件必须遵循 派发 事件 [dom]
如果指针事件不存在目标元素, 则忽略该事件.
指针设备与元素或区域的交互具有两个不同方面:
确定指针事件是否产生肯定的命中测试 取决于指针的位置, 图形元素的大小和形状, 以及元素上 pointer-events 特性的计算值. 下方 pointer-events 特性的定义描述给定类型图形元素中对指针 事件敏感的精确区域.
请注意, ‘svg’ 元素 不是图形元素, 并且在 符合要求的 SVG 独立文件中, 最外层 svg 元素永远不会成为指针 事件的目标, 尽管事件可以冒泡到此元素. 如果指针事件没有在 图形元素上产生肯定的命中测试, 则它应触发任何用户代理特定的 窗口 行为, 例如显示上下文菜单.
本规范未定义通过引用 或包含嵌入另一个文档中的 SVG 图像之 最外层 svg 元素上的指针事件行为, 例如嵌入 HTML 文档中的最外层 svg 元素 是否拦截鼠标点击事件; 未来规范 可能定义此行为, 但就本规范而言, 该行为 由实现决定.
作为用户界面事件目标的元素可能具有 特定交互行为, 具体取决于元素类型以及 它是否具有显式关联的交互, 例如脚本事件 监听器, CSS 伪类匹配或 使用基于事件定时的声明式动画. 在派发 DOM 事件后, 针对给定目标元素处理 用户界面事件的算法和顺序如下:
preventDefault()
DOM 方法, 则不再对此元素执行进一步处理, 并且
事件遵循事件派发和 DOM 事件流
处理 ([uievents]);:hover,
:active 或 :focus, 则应用相关类
特性;
在不同情况下, 作者可能希望控制 特定图形元素在什么条件下可以成为 指针事件的目标. 例如, 作者可能 希望仅当指针位于给定形状的描边周边上时 才让该元素接收指针事件. 在 其他情况下, 作者可能希望给定元素在所有情况下都忽略 指针事件, 以使位于给定元素下方的图形 元素成为 指针事件的目标.
遮罩和裁剪对于 指针事件具有不同影响. 裁剪路径是 几何边界, 给定点显然位于该 边界内部或外部; 因此, 指针事件必须在被裁剪元素的已渲染区域上正常捕获, 但不得在被裁剪掉的区域上捕获, 如 裁剪路径定义中所述. 相比之下, 遮罩不是二元转换, 而是像素操作, 对完全透明和几乎但并非完全透明采用不同 行为可能显得令人困惑且武断; 因此, 对于应用了遮罩的元素, 即使在遮罩变为零 不透明度的区域中也仍必须捕获指针事件. 如果作者希望实现 遮罩透明部分允许指针事件穿透到下方元素的效果, 可以组合使用 遮罩和裁剪.
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 |
| 媒体: | 视觉 |
| 计算值: | 与指定值相同 |
| 动画类型: | 离散 |
对于文本元素, 命中测试基于字符单元执行:
对于光栅图像, 命中测试基于 整个图像执行 (即图像的矩形区域 决定图像是否接收 事件):
对于 ‘foreignObject’ 元素, 命中测试 在元素的矩形 区域, 即对象边界框上执行. 参见上面对光栅 图像的处理. 用户代理还可以允许 ‘foreignObject’ 元素的外部内容也成为命中测试的目标.
特性 opacity, fill-opacity, stroke-opacity, fill 和 stroke 的值不会影响事件处理.
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’ 元素的子内容一样.
当用户代理支持 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 属性等效的属性.
对于用户代理支持的每个事件类型, 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.
以下是动画事件 属性的定义. 这些属性可以指定在动画元素上.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| onbegin, onend, onrepeat | (见下文) | (none) | 否 |
| 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>
|
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| crossorigin | [ anonymous | use-credentials ]? | (参见 HTML 对该属性的定义) | 是 |
crossorigin 属性是一个CORS 设置属性, 除非另有说明, 遵循与 HTML [HTML]中相同的处理规则.
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| type | (见下文) | application/ecmascript | 否 |
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| href | URL [URL] | (none) | 否 |
URL 会被处理并获取资源, 如链接一章中所述.
SVGScriptElement 对象表示 DOM 中的 ‘script’ 元素 .
[Exposed=Window] interface SVGScriptElement : SVGElement { [Reflect] attribute DOMString type; attribute DOMString? crossOrigin; }; SVGScriptElement includes SVGURIReference;
crossOrigin IDL 属性反映 ‘crossorigin’ 内容 属性.
在互联网上, 资源使用 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
以下任一情况都是无效引用:
无效引用可能是错误, 也可能不是 (参见错误处理), 这取决于引用特性或属性是否定义了回退行为.
国际化资源标识符 (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.
在 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)"/>
URL 引用通常 使用 ‘href’ 属性指定. 此属性的值形成对所需资源 (或 如果存在片段标识符则为次级资源)的引用. ‘href’ 属性的值必须是 URL.
由于任何应用检查 某个值是否为URL 引用都是不切实际的, 本规范在这方面遵循 URL 规范的做法, 并且不对SVG 创作工具施加这种一致性测试 要求. 无效 URL 不会使 SVG 文档不符合要求. SVG 用户代理只需在需要时处理 URL, 如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>
URL 在需要时按如下方式处理以标识资源:
旧式 ‘xlink:href’ 属性 在相应的 ‘href’ 属性本应处理的时间处理, 但仅当元素上不存在此类 ‘href’ 属性时.
处理 URL 包括三个步骤: 生成绝对 URL; 获取文档 (如有需要); 标识目标元素 (如有需要).
URL 引用在处理产生无效引用 或标识出目标资源之前都是未解析的 . 结构外部元素的非呈现属性中的未解析引用会阻止 load 事件 触发. 用户代理可以对不是同文档 URL 引用的引用解析 设置时间限制, 超过该时间后, 引用被视为网络错误 (因此被视为无效引用).
对于动态文档中的同文档 URL 引用, 属性或特性的修改或动画, 或从 DOM 中移除元素, 可能使 URL 引用返回未解析 状态. 用户代理必须再次尝试解析 URI 以标识被引用资源.
如果 URL 引用是相对的, 则使用前必须 计算其绝对版本. 绝对 URL 应使用以下方法之一生成:
‘xml:base’
属性
只会在 XML 文档中生效;
这包括 SVG 文档和 XHTML 文档, 但不包括非 XML 的 HTML 文档.
相比之下, base
元素
会通过改变文档基础
URL,
影响任何 SVG 或 HTML 文档中的相对 URL.
如果 HTTP 等协议不直接支持 URL, 则用户代理必须按照 URL 规范 [rfc3987]第 3.1 节中的描述, 将 URL 转换为 URI.
生成绝对 URL 后:
如果 URL 是在链接激活后处理的, 用户代理必须遵循 HTML 规范 [HTML]中描述的导航到 URL 的 算法 . 此算法的结果取决于 ‘target’ 浏览上下文 和浏览上下文之间的安全限制, 以及链接是否指向当前包含在该浏览上下文中的同一文档 (在这种情况下, 导航到片段而不会重新加载文档). 如果被导航到的文档是 SVG 文档, 则按链接到 SVG 内容中的描述调整目标行为.
如果正在处理的 URL 仅在它引用完整文档文件时才有效 (例如 ‘image’ 和 ‘script’ 元素的 ‘href’ 属性), 则按获取文档中的说明继续处理 (无论 URL 是否指向同一文档).
在其他所有情况下, URL 指向本 SVG 文档中使用的资源. 用户代理必须解析 URL, 从 URL 的其余部分中分离目标片段, 并将其与文档基础 URL 比较. 如果除目标片段之外的所有部分都相等, 则这是同文档 URL 引用, 并且必须按照标识目标元素中的说明 继续处理 URL, 将当前文档作为被引用文档.
否则, URL 引用一个单独的文档, 用户代理必须按照获取文档中的说明 继续处理 URL.
如 CSS Values and Units 中所定义, 样式特性中的仅片段 URL 必须视为 同文档 URL 引用, 无论该特性声明在哪个文件中.
SVG 特性和属性可以引用其他文档. 处理此类 URL 时, 用户代理应按本节所述获取被引用文档, 以下情况除外:
如果 URL 引用来自 SVG 动画 元素上的 href 属性, 则仅允许同文档 URL引用 [svg-animation]. 引用不同文档的 URL 无效, 并且不得获取该文档.
如果包含引用的文档正在 安全静态模式或安全动画模式中处理, 则不允许外部文件引用. 除非引用是 data 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 引用有效), 则获取到的文档就是被引用资源.
否则, 必须解析子资源以标识目标元素. 如果获取到的文档属于用户代理可以解析 以创建文档对象模型的类型, 则必须以安全静态模式 处理它 (即不获取任何额外外部资源, 不运行脚本或播放动画). 为外部子资源引用生成的文档模型 必须不可变 (只读), 且不能被修改.
如果可以从获取的文件生成文档对象模型, 则必须按照标识目标元素中的说明 继续处理 URL, 并将解析后的子资源文档作为被引用文档. 用户代理可以在文档完全解析之前 开始目标标识过程.
用户代理可以维护外部资源 URL 及其相关解析文档的列表, 并可以为后续引用重新使用这些文档, 只要这样做不违反资源的处理模式, 缓存和 CORS 要求.
对于指向特定元素的 URL 引用, 引用是否有效取决于 是否可以在被引用文档中找到该元素 以及它是否属于允许的类型.
使用在之前处理步骤中标识的被引用文档 (外部子资源文档或当前文档), 按以下方式标识目标元素:
如果 URL 未在目标片段中指定特定元素, 则目标元素是被引用文档的根元素.
否则, URL 以特定元素为目标. 如果当前在被引用文档中存在匹配元素, 则它就是目标元素.
否则, 当前不存在匹配元素. 如果被引用文档不可变, 则 URL 引用无效. 外部子资源文档一旦完全解析后始终不可变; 如果当前文档以 动态交互模式以外的任何模式处理, 则当前文档在解析后也不可变.
否则, 观察被引用文档的变更, 直到 URL 能够成功解析 以定义目标元素, 或直到文档变得不可变 (例如非动态文档完成解析).
当且仅当目标元素是该引用的有效 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
如果上述 SVG 文件由同时支持 SVG 和 HTML 的用户代理查看, 则点击椭圆将使当前窗口 或框架替换为 W3C 主页.
属性定义:
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| href | URL [URL] | (none) | 是 |
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| target | _self | _parent | _top | _blank | <XML-Name> | _self | 是 |
当结束资源存在多个可能目标时应使用此属性, 例如当父文档嵌入 HTML 或 XHTML 文档中, 或使用选项卡式浏览器查看时. 此属性指定 激活链接时 文档应打开到的浏览上下文名称 (例如浏览器选项卡或 (X)HTML iframe 或 object 元素):
浏览上下文和浏览上下文之间导航操作的 安全限制的规范性定义 位于 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) | 否 |
a 元素的定义相同.
SVG 工作组正在等待 HTML 规范澄清这些属性的处理模型和 算法. 这些属性应遵循HTML 规范中指定的 定义和算法.
有关正在进行的澄清工作的更多详细信息, 请参阅由于 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 片段标识符可以采用以下形式:
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 文档的初始视图, 如下:
‘view’ 元素定义如下:
我们已决定移除 viewTarget 属性.
决议: Paris 2015 F2F 第 3 天.
负责人: BogdanBrinza.
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:
要为 更新 href 一个 SVGAElement:
referrerPolicy IDL 属性 反映 ‘referrerpolicy’ 内容 属性, 并仅限于 已知值.
SVGViewElement 对象表示 DOM 中的 ‘view’ 元素 .
[Exposed=Window] interface SVGViewElement : SVGElement {}; SVGViewElement includes SVGFitToViewBox;
本附录是规范性的.
本附录包含 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;
以下说明描述软件开发人员在将内容 转换为 SVG 语言功能所需格式或从这些格式转换内容时 可使用的算法和其他策略.
为与其他路径段表示法保持一致, SVG 路径中的弧根据曲线上的起点和终点定义.
椭圆弧的这种参数化方式将称为 端点参数化. 端点参数化的一个 优点是它允许一种一致的路径语法, 其中所有路径命令都以新的 "当前点"坐标结束 .
但是, 这并不是软件或数学中 描述弧几何形状的唯一方式. 本节描述另一种中心参数化方式, 以及如何在它与 SVG 的端点参数化方式之间进行转换.
SVG 路径命令所表示的椭圆弧 按顺序由以下参数描述:
(x1, y1) 是路径上 当前点的绝对坐标, 由前一个路径命令的最后两个 参数获得.
rx 和 ry 是椭圆的半径 (也称为其半长轴和 半短轴).
φ 是从当前坐标 系统的 x 轴到椭圆 x 轴的角度.
fA 是 大弧标志, 如果选择跨度小于或等于 180 度的弧, 则为 0 , 如果选择跨度大于 180 度的弧, 则为 1.
fS 是 扫掠标志, 如果 从圆心到弧的连线沿角度减小方向扫掠, 则为 0, 如果它沿 角度增大方向扫掠, 则为 1.
(x2, y2) 是 弧终点的绝对坐标.
椭圆弧上的任意点 (x, y) 可以用以下二维矩阵方程描述:
(公式 3.1)
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 和 Δθ 分别是在拉伸和旋转操作之前 弧的起始角, 结束角和扫掠角. 这产生另一种在图形 API 中常见的参数化方式, 称为中心 参数化. 在以下各节中, 将给出 中心参数化与端点参数化之间双向映射的 公式.
给定以下变量:
cx cy rx ry φ θ1 Δθ
任务是求:
x1 y1 x2 y2 fA fS
可以使用以下公式完成:
|
|
(公式 4.1) |
|
|
(公式 4.2) |
|
|
(公式 4.3) |
|
|
(公式 4.4) |
给定以下变量:
x1 y1 x2 y2 fA fS rx ry φ
任务是求:
cx cy θ1 Δθ
经过一次平移后方程会简化, 该平移 将原点置于连接 (x1, y1) 与 (x2, y2) 的线段中点, 然后 旋转使坐标轴与椭圆轴对齐. 所有变换后的坐标都使用撇号表示. 它们作为 求所需中心参数化变量过程中的中间值 计算. 此过程包括 以下步骤:
步骤 1: 计算 (x1′, y1′)
|
|
(公式 5.1) |
步骤 2: 计算 (cx′, cy′)
|
|
(公式 5.2) |
其中, 如果 fA ≠ fS, 则选择 + 号, 如果 fA = fS, 则选择 − 号.
步骤 3: 计算 (cx, cy) 根据 (cx′, cy′)
|
|
(公式 5.3) |
步骤 4: 计算 θ1 和 Δθ
一般而言, 两个向量 (ux, uy) 和 (vx, vy) 之间的角度可计算为
|
|
(公式 5.4) |
其中此处出现的 ± 号取 ux vy − uy vx 的符号.
此角度函数可用于按如下方式表示 θ1 和 Δθ:
|
|
(公式 5.5) |
|
|
(公式 5.6) |
其中 Δθ 固定在范围 −360° < Δθ < 360° 内, 使得:
如果 fS = 0, 则 Δθ < 0,
否则如果 fS = 1, 则 Δθ > 0.
换句话说, 如果 fS = 0 且 (公式 5.6) 的右侧大于 0, 则减去 360°, 而如果 fS = 1 且 (公式 5.6) 的右侧小于 0, 则加上 360°. 在所有其他情况下 保持原样.
本节描述超出范围的 rx 和 ry 所需的数学调整, 如路径实现说明中所述. 从算法上看, 这些调整包括以下 步骤:
步骤 1: 确保半径非零
如果 rx = 0 或 ry = 0, 则将 此情况视为从 (x1, y1) 到 (x2, y2) 的直线并停止. 否则,
步骤 2: 确保半径为正
取 rx 和 ry 的绝对值:
|
|
(公式 6.1) |
步骤 3: 确保半径足够大
使用方程 (公式 5.1) 的带撇号坐标值, 计算
|
|
(公式 6.2) |
如果上述方程的结果小于或等于 1, 则无需对 rx 和 ry 作进一步更改. 如果 上述方程的结果大于 1, 则进行 以下替换
|
|
(公式 6.3) |
步骤 4: 继续计算
继续进行剩余的椭圆弧计算, 例如 从端点转换为 中心参数化算法中的计算. 注意: 由于本节中的 半径校正, 椭圆中心的方程 (5.2) 始终至少有一个解 (即 被开方数永远不会为负). 当 使用方程 (公式 6.3) 放大半径时, (公式 5.2) 的被开方数为零, 并且椭圆 中心恰好只有一个解.
本节是资料性的.
SVG 的实数精度为 单精度. 处理需要表达超过单精度信息的技术数据的符合要求的 SVG 生成器, 例如地图和技术图纸, 建议遵循本节概述的流程, 以确保在符合要求的 SVG 查看器中一致显示.
通过利用 生成 CTM 时必须至少使用双精度浮点数这一事实, 可以获得有效精度高于 单精度的呈现 (参见 符合要求的 SVG 查看器一节中的 CTM 生成处理). 利用这一点生成内容的步骤如下:
| 拆分前 | 拆分后 | |
|---|---|---|
|
|
| 步骤 1 : 拆分内容 | 步骤 5 : 使用较少有效数字和适当平移排列图块 | |
|---|---|---|
![]() |
![]() |
|
| 此示例使用用户坐标系统为七位数的图块提供八位 有效数字. | ||
本附录是资料性的,而非规范性的。
本附录重点介绍 SVG 的无障碍功能以及用于 支持 SVG 的无障碍相关规范,并说明它们旨在支持的相关 W3C Web 内容无障碍 指南 (WCAG) 2.0 [WCAG2] 要求。
本节列举与 SVG 无障碍相关的规范和创作指南。
SVG 支持随时间改变矢量图形的能力, 以创建动画效果。 SVG 内容可以通过以下方式进行动画:
SVG 不强制要求支持这些动画方法中的任何一种。 但是,支持这些方法的用户代理应当在 SVG 文档 和其他文档中的 SVG 片段中支持它们。 支持声明式或脚本动画的用户代理必须遵守 一致性一章中定义的基于处理模式的限制 ,以及关于use 元素影子 树中的动画的特殊要求。
本附录是资料性的,而非规范性的。
以下是 SVG 语言中的元素:
本附录是资料性的,而非规范性的。
下表列出了 SVG 语言中定义的所有属性,但 呈现属性除外,这些属性 将在 下面的 呈现属性 一节中处理。对于每个属性,还会给出可在其上指定该属性的元素 。
如样式一章所述,对于每个 特性,都存在相应的呈现属性。 下表列出了这些呈现属性。
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本附录是资料性的,而非规范性的。
| 名称 | 值 | 初始值 | 适用于 | 继承 | 百分比 | 媒体 | 动画类型 | 计算值 |
|---|---|---|---|---|---|---|---|---|
| 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 视口的高度(参见 单位) | 视觉 | 按计算值 | 绝对长度或百分比 |
本附录是资料性的,而非规范性的。
以下是本规范中定义的所有 IDL 接口的列表:
本附录是规范性的。
本附录按照 BCP 13 和 W3CRegMedia 注册新的 MIME 媒体类型 "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 结合使用;也被移动电话和数码相机使用, 作为桌面出版中图形资源交换的格式,用于工业过程 可视化、显示标牌,以及许多其他需要可缩放静态或 交互式图形能力的应用。
请注意,扩展名 'svgz' 用作 'svg.gz' 的别名 [rfc1952], 即 image/svg+xml 类型的八位字节流,随后 使用 gzip 压缩。
请注意,Macintosh 文件类型代码 'svgz'(全部小写)用作 GZIP [rfc1952] 压缩的 "svg " 的别名,即 image/svg+xml 类型的八位字节流,随后使用 gzip 压缩。
org.w3c.svg 符合 public.image 和 public.xml
Chris Lilley (www-svg@w3.org),或在 GitHub 上提出 issue: https://github.com/w3c/svgwg/issues/685
COMMON
无
SVG 规范是万维网联盟 SVG 工作组的工作成果。
W3C 对本规范拥有变更控制权。
本附录是资料性的,而非规范性的。
本附录总结了自 SVG 1.1 第二版推荐标准以来所作的变更。 自最初的 SVG 2 候选 推荐标准以来所作的变更会突出显示。
为了提高可读性,对本规范进行了多项样式上的调整。其中包括 以下内容:
除了上述编辑性变更之外,还进行了以下实质性的新增、变更和 删除 。
suspendRedraw、unsuspendRedraw 和
unsuspendRedrawAll 方法。
body 上的事件处理程序内容属性和 IDL 属性一样。
SVGElementInstance 和 SVGElementInstanceList 接口,以及
SVGUseElement 接口上对应的属性。
viewport 属性。
zoomAndPan 属性和相关文本。
Issue 讨论
instanceRoot 和 animatedInstanceRoot
特性,
因为所有浏览器都已移除它们。
Issue 讨论
SVGPathSeg* 和 SVGAnimatedPathData 接口以及 SVGPathElement 上的相关
方法。<number> 更改为 <length>
。
csswg-drafts#13901
(决议,2026 年 5 月 20
日)
stroke-linejoin
移除
miter-clip 和 arcs 值(Issue #1065)zoomAndPan 属性和相关文本。(none) 初始值,
并且也适用于其他规范中定义的接口(例如 Geometry)。