SVG通过动态XML + XSL

Question

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

假设您有一个带有相应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（？）。此外，维护可能有点复杂或丑陋。

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

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

Answer 1

我们在浏览器中的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。

Answer 2

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

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

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