SVG通过动态XML + XSL

时间:2009-10-05 13:26:31

标签: javascript xml xslt dynamic svg

这是一个模糊的概念,我一直在脑海里跑来跑去,如果有一种优雅的解决方法,我很好奇。也许它应该被视为思想实验。

假设您有一个带有相应XSL转换的XML架构,它在浏览器中将XML呈现为SVG。 XSL使用适当的Javascript处理程序生成SVG,最终实现类似编辑的功能,以便用户可以编辑SVG画布上的对象属性或其位置。例如,可以将元素从一个位置拖动到另一个位置。

现在,这并不是特别困难 - 拖放示例只是改变SVG对象的(x,y)坐标,或者调整大小操作只需更改其宽度或高度即可

但是有一种优雅的方法让Javascript在 XML文档的DOM上工作而不是渲染的SVG吗?你为什么问?好吧,想象一下你有非常复杂的XSL转换,其中一个属性的修改导致SVG的复杂变化。您希望在Javascript代码中保持简洁性,同时也是将修改后的XML保留回服务器的简单方法。

这可能起作用的一些可能性:

  1. 修改源DOM后,只需重新运行XSL转换并替换原始版本。 下行:暴力,可能是昂贵的操作。
  2. 在源和目标XML / SVG中创建id / class命名约定,以便元素可以相互关联,并仅对新DOM的子集执行XSL转换。换句话说,修改临时DOM,对其应用XSL,从SVG中删除更改的元素,然后插入新的元素。 下行:可能无法将XSL应用于临时浏览器内的DOM(?)。此外,维护可能有点复杂或丑陋。
  3. 我认为有可能提出一个处理第二种情况的框架,但挑战在于它使它变得轻量级并且与实际的XML模式没有太大关联。任何想法或其他可能性?或者是否有一种我不知道的现有方法?

    更新:为了澄清,正如我在下面的评论中所提到的,这有助于将绘图代码与编辑代码分开。有关如何使用它的更具体示例,请设想一个元素,该元素根据相邻元素的属性值确定如何绘制它。最好直接在绘图代码中压缩该逻辑,而不是在编辑代码中复制它。

2 个答案:

答案 0 :(得分:2)

我们在浏览器中的XML编辑器Xopus中完成了这项工作。您可以看到示例here。 我们加载XML源文档,XML Schema和输出HTML + SVG的XSLT。在内部,我们将您的XSLT重写为XSLT,这将允许我们将输出HTML + SVG追溯到原始XML,该原始XML是XSL中的上下文,以输出该HTML或SVG节点。这是你所指的框架。

为便于编辑,我们将光标放在XSLT输出上,并在键入或插入元素时更新XML DOM。每次更改后,我们将重新运行XSLT。出于性能原因,我们将XSLT输出与先前的输出进行比较,并使用HTML DOM操作将更改应用于WYSIWYG视图。

我们使用另一个XSLT来区分两个XSLT输出。我们可以这样做是因为我们修改了原始的XSLT(导致XSLT'),因此它将为每个输出节点输出唯一且持久的ID。因此,所有新节点都将具有新ID,并且缺少ID将被删除节点。

XSLT'是您提供的原始XSLT的重写版本。它仍然是XSLT,但我们添加了一些内容,因此它为所有输出节点输出ID(我们使用另一个XSLT)。除此之外,它在功能上等同于您原来的XSLT。

答案 1 :(得分:0)

也许使用can AJAX:不是在本地编辑文档,而是将原始XML的编辑命令发送到再次转换的服务器,然后再发送新的SVG。

这里的主要问题是当您更新当前页面上的SVG元素时会发生什么。拖拽还会感觉顺畅吗?如果没有,那么您可能不得不采用两种方法的混合:使用JavaScript拖动SVG节点,当用户删除节点时,向服务器发送更新以获取新SVG。

您将希望避免尝试同步XML和本地SVG中的更新(这意味着在JavaScript中复制部分XSLT - >留在一个世界,不要混合)。