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

绑定机制

当下列条件被满足时，绑定应该被立即附加：（A）元素被绑定给指定的绑定，（B）元素被创建，且（C）绑定被加载。绑定机制就是<definition>元素，它会声明哪些绑定应该被附加给哪些元素。

当新绑定被附加的时候，用户代理（UA）必须进行下面的操作：

• 事件必须开始通过绑定的<handlerGroup>元素被发送，如果有这样一个元素的话；
• 然后影子内容模板被克隆，如果需要的话，创建影子树，然后预绑定事件在被附加之前启动；
• 一旦任何子代元素的所有绑定被附加，一个bound事件就会针对被绑定元素启动。
• 在取消绑定之前，一个unbinding绑定事件会对绑定元素启动。影子内容节点、影子树，以及用于绑定的任何事件都被从元素里删除。

事件机制

正如你可能已经猜测到的，sXBL使用事件驱动的逻辑来定义SVG模型的交互行为。每当针对被绑定元素的事件被启动的时候（不论是在捕捉、设定目标还是气泡阶段），如果指定元素的任何事件侦听程序存在于相对应的<handlerGroup>元素上，那么这些侦听程序都必须被调用。<handlerGroup>元素可以满足任何事件侦听元素，尤其是ev:listener和svg:handler元素。<handlerGroup>元素的事件处理程序能够根据在被绑定元素里流动的事件被调用。当指定事件被绑定元素接收的时候，如果相应的事件侦听程序已经被附加给了<handlerGroup>元素，那么该事件将被转发（forwarded）给该事件侦听程序。

通常，XBL的开发人员想要把相同的事件侦听程序注册给所有与指定的<definition>元素相对应的被绑定元素。例如假设你的XBL包含有下面这样的<definition>（定义）：

                <xbl:definition element="myNS:button">
        ...
          </xbl:definition>

同时假设你像下面这样创建了“myNS:button”的三个实例：

  <myNS:button id="b1">...</myNs:button>
  <myNS:button id="b2">...</myNs:button>
        <myNS:button id="b3">...</myNs:button>

假设你想要把一个“DOMActivate”事件侦听程序附加给这三个实例中的每一个。你当然可以使用三个单独的事件侦听程序来注册元素（例如在SVG的情况下，你可以使用svg:handler），也可以使用三个单独的DOM方法调用（例如对EventTarget::addEventListener元素的三次调用）来注册三个单独的事件侦听程序。但是，有的时候一次性定义事件侦听程序会更加方便，将其作为<definition>元素的一部分，然后让指定的事件侦听程序被自动地分配给每个被绑定元素的实例，这些事例与指定的<definition>相对应。为了提供这样的便利，XBL提供一个自动的事件转发机制，用于所有附加给<handlerGroup>元素的事件侦听程序。

为了说明这一点，如果我们像下面这样更新上面的例子并添加<handlerGroup>和<svg:handler>元素：

<xbl:definition element="myNS:button">
   <xbl:template>...</xbl:template>

   <xbl:handlerGroup>
      <svg:handlerev:event="DOMActivate"...>...</svg:handler>
   </xbl:handlerGroup>
</xbl:definition>
...
<myNS:button id="b1">...</myNs:button>

<myNS:button id="b2">...</myNs:button>
        <myNS:button id="b3">...</myNs:button>

那么结果是，用户代理必须自动地把一个隐含的DOMActivate事件侦听程序附加给每个<myNS:button>元素。如果DOMActivate事件被启动并分派给<myNS:button>元素中的任何一个，那么用户代理就必须调用通过<svg:handler>元素定义的DOMActivate事件处理程序。

影子内容

<content>元素被用在影子内容的内部，以便为可能已经存在于被绑定元素之下的明确内容指定插入点。关于相关的表示模型，位于被绑定元素和<content>元素之间的绑定空间里的任何影子内容都是在被绑定元素及其子元素之间交替分布的，而没有影响到文档模型（见xbl_image_1.png / Figure B）。

如果绑定有一个影子内容模板，那么其<template>元素就会被深度克隆。否则，就不会生成用于被绑定元素的影子内容，它的“xblShadowTree”属性将会是null（空），而它的“xblChildNodes”属性会等于其“childNodes”（子节点）属性。新克隆的<template>元素然后就被重新命名为XBL命名空间里的<shadowTree>元素。

使用标准的DOM API是有可能操控包含在被绑定元素之下的影子内容的。如果含有<content>元素的影子内容被删除，那么任何明确地被分配给该元素的子元素就会被重新分配给与之相匹配的第一批<content>元素。

让我们来看一个更加复杂的例子（Example3.svg）。在这个例子里，绑定被用来让三个新的元素像有颜色的文本块一样动作。

Example3.svg

<svg:svgxmlns:svg="http://www.w3.org/2000/svg" version="1.2"
            xmlns:xbl="http://www.w3.org/2004/xbl">
  <svg:defs>
   <xbl:xbl>
    <xbl:definition element="red">
     <xbl:template>
      <svg:text fill="red"><xbl:content/></svg:text>

     </xbl:template>
    </xbl:definition>
    <xbl:definition element="green">
     <xbl:template>
      <svg:text fill="green"><xbl:content/></svg:text>

     </xbl:template>
    </xbl:definition>
    <xbl:definition element="blue">
     <xbl:template>
      <svg:text fill="blue"><xbl:content/></svg:text>

     </xbl:template>
    </xbl:definition>
   </xbl:xbl>
  </svg:defs>

  <red> Red text. </red>

  <green> Green text.</green>
  <blue> Blue text. </blue>

</svg:svg>

在下面的例子里（Example4.svg），SVG文件会通过<import>元素参考一组能够从可扩展文件（Example4-flowcharts.svg）里生成流程图的自定义元素，然后使用流程图自定义元素布置并生成一个流程图。

Example4.svg

<svg width="12cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.2"
     xmlns:xbl="http://www.w3.org/2004/xbl">
  <desc>Example example4 - simple flowchart example using sXBL</desc>

  <!--XPointer reference to the location for the flowchart extensions -->
  <xbl:import bindings="example4-flowcharts.svg#flowcharts"/>

  <!-- Define elements that use the flowchart extensions. As a result of using
       the extensions, a shadow tree of low-level SVG (circle, rect, path elements)
       is attached  to the 'flowchart' element. The user agent renders the shadow tree. -->
  <flowchart xmlns="http://example.org/flowcharts"
             x="0%" y="0%" width="100%" height="100%">
    <terminalNode>Start</terminalNode>
    <processNode>Step 1</processNode>
    <processNode>Step 2</processNode>

    <terminalNode>End</terminalNode>
  </flowchart>
</svg>

图C（xbl_image_2.png）就是我们获得的输出结果。

前途无量

sXBL规范仍然在发展。随着sXBL的第一个草案的发布，先前被称为生成自定义内容（RCC，Rendering Custom Content）的SVG 1.2特性已经被提取为它自己的可重复使用命名空间，并被其他XBL语法接纳为能够用在未来的特性。sXBL是一种用于定义特定元素（在命名空间里描述）的表示和交互行为的机制，而不是带有“绑定”的SVG的。绑定可以被附加给元素，方式是在XBL里通过声明特定命名空间里特定元素由特定的绑定来实现。被附加了绑定的元素叫做被绑定元素，它会通过绑定获得指定的新行为和表示。

SVG 1.2是正在被开发的一种规范，它为统一XML里的二维图形和图形应用程序提供了一种新方式。所以SVG的前景是无限的。

责任编辑：张琎

查看本文的国际来源