第1页:利用sXBL让可伸缩向量图形更具活力第2页：利用sXBL让可伸缩向量图形更具活力

可伸缩向量图形（SVG）工作组已经公布了SVG XML绑定语言（sXBL）的最新工作草案。sXBL语言定义了SVG命名空间以外的元素的表示和交互行为。sXBL的作用是用来让XML词表（标记集）以SVG元素的形式实现。例如，用来描述流程图的一个标记集可以被映射到底层的SVG路径和文本元素上，这可能包括可交互性和动画。sXBL是第一个专门用于SVG的更加通用的XBL规范（例如原来的2001年的XBL 2.0规范）。

未来的考虑是，一个通用的、用模块定义的XBL规范将被开发出来，以替代这个规范并定义支持SVG以外的方案所需要的其他特性，例如集成到支持CSS的Web浏览器。一旦定义好了通用的XBL，sXBL就将成为XBL规范下的一个SVG专用的子集。

XBL不能被用来给予文档新的语义（除非由XML调用的脚本明确地改变了原来的DOM）。文档的内容不会被与之相关的任何绑定改变，改变的只是它的表示和交互行为。

sXBL规范是多个小组多年心血工作的顶峰之作：其中包括已经提到的、由Mozilla.org于2001年提交的XBL（XML绑定语言），1999年提交的CSS行为扩展，作为几个SVG 1.2草案一部分的生成自定义内容（RCC，Rendering Custom Content）等等。

你好，世界！

下面是一个简单的SVG的例子（Example1.svg），其中一个自定义元素（<myNS:HelloWorld/>）要求获得由文件顶部的元素所定义的交替表示行为。通过使用绑定所附加的影子树的内容，可以生成<myNS:HelloWorld/>元素。影子树包括一个<svg:text>元素，其中带有“Hello, world, using sXBL”字符串：

Example1.svg

<?xml version="1.0"?>
<svg width="10cm" height="3cm" viewBox="0 0 200 60"
     xmlns="http://www.w3.org/2000/svg" version="1.2"
     xmlns:xbl="http://www.w3.org/2004/xbl"
     xmsns:myNS="http://www.example.com">
  <title>Example example1.svg - "hello world" sample file</title>
  <desc>A simple "Hello, world" sXBL example where the
         rendering behavior of a custom element 'myNS:HelloWorld'
         consists of an 'svg:text' element which has the string
         "Hello, world, using sXBL" inside.</desc>
  <defs>
 
    <xbl:xbl>
 
      <!-- The following 'xbl:definition' element defines the
         presentation and interactive behavior that must be used
         for all 'myNS:HelloWorld' elements in this document. -->
      <xbl:definition element="myNS:HelloWorld>
        <xbl:template>
          <text>Hello, world, using sXBL</text>
 
        </xbl:template>
      </xbl:definition>
 
    </xbl:xbl>
  </defs>
 
  <rect x="1" y="1" width="198" height="58" fill="none" stroke="blue"/>
 
  <g font-size="14" font-family="Verdana" transform="translate(10,35)">
 
    <!-- Here is an instance of an 'myNS:HelloWorld' element.
       The above binding definition attaches a shadow tree which
       defines alternative rendering and interactive behavior for this element.
       Instead of the standard SVG behavior where unknown elements are not rendered,
       the binding definition causes an 'svg:text' element to be rendered. -->
    <myNS:HelloWorld/>
 
  </g>
 
</svg>

上面的例子所生成的结果与下面的SVG类似（Example2.svg）。高亮显示的部分（即<g>和<text>元素）表示绑定定义（上面定义的<xbl:definition>元素）附加给自定义元素的影子树。SVG用户代理会在自定义元素的位置生成影子树（hello-world-sxbl.png／图A）

Example2.svg

<svg width="10cm" height="3cm" viewBox="0 0 200 60"
       xmlns="http://www.w3.org/2000/svg" version="1.2">
 
    <title>Example example2.svg -
           equivalent rendering for "hello world" sample file</title>
 
    <rect x="1" y="1" width="198" height="58" fill="none" stroke="blue"/>
    <g font-size="14" font-family="Verdana" transform="translate(10,35)">
 
      <!-- The document is rendered as if the 'myNS:HelloWorld' element
           were replaced by an SVG 'g' element with a 'text' element inside. -->
      <g>
 
        <text>Hello, world, using sXBL</text>
      </g>
 
    </g>
 
  </svg>

XBL详解

任何XBL子树的开始都是一个<xbl>元素。这一点都不有趣，所以就让我们把注意力放在<xbl:definition>元素上吧。

在XBL术语里，binding指的是一个行为定义，这个定义能够被用在一个元素上，以定义其表示。这意味着SVG文档的任何元素都能够被绑定到处理其行为的sXBL代码上。因此被绑定元素（bound element）是发生绑定的任意XML命名空间里的元素。

被绑定元素的影子树（shadow tree）是一些节点的子树，这些节点被作为XBL的处理结果附加给被绑定元素。影子树的内容会用交替行为来增加被绑定元素的标准表示和交互行为。正常的DOM处理是看不到影子树的（所以它被叫做“影子”）。影子树被附加给被绑定元素。一旦完成附加，这个影子树就只能通过XBL专用的DOM扩展来访问，因为它无法通过核心DOM导航程序访问到。影子内容（shadow content）这个术语指的是被绑定元素的影子树里的不同节点。影子内容是在绑定附件的过程中通过克隆影子内容模板来创建的。

<definition>元素用来描述将表示和交互行为添加给非SVG元素的单个XBL绑定。每个绑定都有下面这些可选的组件：

• 模板（Template）
• 行为（Behavior）

可选的子元素<template>与模板组件相对应，并为被绑定元素定义了最初的影子内容（如前所述，它只是附加给元素的新节点的子树，只不过正常的DOM模型看不见）。

对于行为（Behavior）组件，绑定可以为各种事件类型定义事件侦听程序（event listeners）。其中的一些例子是：被绑定元素或者影子内容里的元素的用户界面事件（例如键盘和鼠标事件）；被绑定元素及其子代的突变事件；以及与XBL的绑定操作相关的事件。

另外一种选择是，绑定可以通过“ref”属性来参考已有的绑定。在本文里，“ref”属性必须参考一个<definition>元素，这个元素反过来会提供绑定定义。绑定可以被当作是一种附加机制，在引入绑定的时候，这种机制会使用“element”属性，为与给定绑定相关的元素指定命名空间和本地名字。除了上面提到的，<definition>元素可以包含XBL命名空间以外的任何元素，例如svg:defs。它们被处理的方式与在其他任何上下文里的方式是一样的，都会被XBL处理模型所忽略。值得一提的还有，<definition>元素会定义表示和行为绑定，但不会定义元素的语义。

<template>元素包含能够用在任何命名空间里的子节点。<template>元素所指定的子树也叫做影子内容模板（shadow content template）。当绑定被附加的时候，<template>元素的子节点被克隆并被附加给被绑定元素下的被绑定文档。由于这些被克隆的节点相对于其父节点来说是未知的，并且位于正常的文档树之外，所以他们被叫做“影子内容”。在<template>元素被克隆的时候，它被重新命名为<shadowTree>，我们稍后会作进一步讨论。