javascript - 通过动态 XML+XSL 的 SVG

Question

这个有点模糊的概念一直在脑子里翻来覆去，很好奇有没有优雅的解决方法。也许它应该被当作一个思想实验。

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

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

但是有没有一种优雅的方式让 Javascript 在 source XML 文档的 DOM 上工作，而不是在呈现的 SVG 上工作？你为什么问？好吧，假设您有非常复杂的 XSL 转换，其中对一个属性的修改会导致对 SVG 的复杂更改。您希望在您的 Javascript 代码中保持简单，但也希望通过一种简单的方式将修改后的 XML 持久保存回服务器。

这可能如何运作的一些可能性:

1. 修改源 DOM 后，只需重新运行 XSL 转换并替换原来的 DOM。 缺点:蛮力，操​​作成本可能很高。
2. 在源和目标 XML/SVG 中创建 id/class 命名约定，以便元素可以相互关联，并仅对新 DOM 的一个子集进行 XSL 转换。换句话说，修改临时 DOM，对其应用 XSL，从 SVG 中删除更改的元素，然后插入新元素。 缺点:可能无法将 XSL 应用于浏览器内的临时 DOM(？)。此外，维护起来可能有点复杂或难看。

我认为有可能提出一个框架来处理第二种情况，但挑战在于使其轻量级并且不与实际的 XML 模式紧密相关。任何想法或其他可能性？或者是否存在我不知道的现有方法？

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

Answer 1

我们已经在浏览器内的 XML 编辑器 Xopus 中完成了这项工作。你可以看一个例子 here .我们加载 XML 源文档、一个 XML 模式和一个输出 HTML+SVG 的 XSLT。我们在内部将您的 XSLT 重写为 XSLT'，这将使我们能够跟踪输出 HTML+SVG 回到原始 XML，即 XSL 中的上下文以输出该 HTML 或 SVG 节点。这就是您所指的框架。

为了便于编辑，我们将光标放在您的 XSLT 输出上，并在您键入或插入元素时更新 XML DOM。每次更改后，我们将重新运行 XSLT。出于性能原因，我们将 XSLT 输出与之前的输出进行比较，并使用 HTML DOM 操作将更改应用于所见即所得 View 。

我们使用另一个 XSLT 比较两个 XSLT 输出。我们之所以能够这样做，是因为我们已经修改了原始 XSLT(生成 XSLT')，以便为每个输出节点输出唯一且持久的 ID。因此，所有新节点都将具有新 ID，缺少 ID 的节点将被删除。

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