SVG和XForms呈现定制内容.docVIP

SVG 和 XForms: 呈现定制内容 使用 SVG 1.2 新的基于 XML 的扩展机制 Antoine Quint?(antoine.quint@)), SVG 顾问与研究科学家, Fuchsia Design 简介：?第一个可伸缩向量图形（Scalable Vector Graphics，SVG 1.0）规范奠基了 XML 表示二维交互式图像和动画的标准。从那以后，W3C SVG 工作组一直致力于改进它的特性，使 SVG 更容易在 Web 和桌面应用程序开发中使用。SVG 1.2 一个很有前途的特性是呈现定制内容（Rendering Custom Content, RCC）——它提供了清晰的以 XML 为中心的扩展机制，在一个 SVG 文档中混合与匹配不同的 XML 名称空间。本文在介绍 RCC 机制的同时将引导您创建一个简单的按钮部件。 在过去的两年中，SVG 团体已经研究出了新的方法，利用 SVG 的 XML 基础在单个 SVG 文档中混合与匹配多个名称空间。 在关注的主要焦点中，用户界面工作成为在 SVG 文档中内嵌使用定制 XML 标记的基本用例。?呈现定制内容（RCC）——在最新的 SVG 1.2 草案中推介的一项新技术——提供了一种新的框架，允许自定义 XML 语法作为格式良好的扩展无缝集成到 SVG 文档中。在本系列文章中的?基础知识一文中曾经提到，由于提供了混合与匹配这两类标记的基础，RCC 在 SVG 和 XForm 的集成中起着重要的作用。本文中将介绍 RCC 的基础，探讨如何实现一个用户界面部件（按钮），并提供一个更丰富的 UI 应用程序的演示。 RCC 基础 在开始用 RCC 编写这个简单的按钮部件之前，我将回顾一下基本知识和新推出的 RCC 元素家族。 将 XML 绑定到图形 使用 RCC，您可以规定给出的外部名称空间元素在 SVG 文档中的行为。下面这些是最基本的 SVG 代码，在开始用 RCC 编程时您一定会用到： 清单 1. 设置 RCC 环境 extensionsDefs namespace=/MyCustomNamespace/ elementDef name=myCustomElement prototype !-- SVG markup specifying rendering here -- /prototype /elementDef /extensionsDefs 清单 1 中引入了两个新的 SVG 1.2 元素。?extensionDefs?是一个顶层元素，您将要包括的所有给定名称空间中的元素定义都将放在这个元素中。名称空间在明确的?namespace?属性中定义，该属性直接以 URI 作为属性值。仅仅是为了避免造成更大的混乱，这个属性与 XML 的?xmlns?属性并不完全相似——这里的名称空间永远是 SVG ——?namespace?属性在这里只是表明所描述的定制元素属于哪个名称空间。从概念上讲，?extensionDefs?帮您定义了一个库。现在，您需要定义在这个名称空间库中有哪些东西。要注册一个元素，您需要使用?elementDef?元素，并用?name?属性指定元素的名称。 基本上，RCC 是一种绑定机制，把非 SVG 的 XML 元素匹配到 SVG 树中。但是，RCC 并不是为各种绑定而设计的，相反，这种机制主要用于应该有某种交互式呈现的定制 XML 标记的绑定，从而映射到 SVG 片段。正如我在第一篇“基础知识”文章中提到的那样，SVG 片段在 RCC 世界中实际上是一个影像树。我无法用言语表达影像树所带来的种种不可思议的神奇作用，但是我将在以后再讨论它，因为它对于理解这种特性非常重要。要在预设的影像树中链接自定义的元素，您需要使用新的?prototype?元素。该元素的内容被自动复制到绑定时定义的每个元素实例的影像树中。 绑定可以在文档生命期中的两个不同阶段完成。第一次是在加载文档的时候：SVG 实现在一开始检查文档中已有的?extensionDefs元素，并确定哪些外部元素是已知的，然后在解析树的其他部分时每当遇到这些已知的元素就触发 RCC 绑定机制。绑定也可以发生在这些已知元素中的某一个被添加到树中的时候，比如通过?insertChild()?DOM 调用增加元素。这使得整个绑定机制是?活动的，这是该过程与 XSLT 使用模板将 XML 元素绑定到另一个 XML 输出之间的一个重要区别，后者本质上是一次性的批处理操作。 影像树 现在绑定机制已经清楚了，非常重要的一点是要完全理解影像树在 RCC 上下文中的重要性和使用方法。我在以前的文章中曾经提到，影像树对于呈现定制元素的巨大好处是它保留了一个健康的、井井有条的文档树。使用 RCC 编写组件，比