将SVG文档嵌入SVG文档中，但保持可访问性

Question

为了滚动嵌入的SVG文档，我需要在另一个SVG文档中包含一个SVG文档（实际上是3个）。

我使用Batik JSVGCanvas在Java应用程序中显示它。 由于将该画布放入JScrollPane并将画布的大小设置为非常大的大小会消耗大量内存（ JSVGCanvas似乎没有任何内存效率），因此我考虑过通过使用来减少SVG的可见部分viewBox属性，并使用SVG滚动条在文档内部滚动。

但是似乎通过<image>标签将SVG嵌入SVG中只能将该文档作为图像导入，而不能作为另一个SVG文档导入。 甚至没有评估<desc>或<title>标记来提供有关元素的工具提示。 我还需要嵌入式SVG中的动态功能（某些元素必须是可单击的，并且在Java应用程序中为这些单击提供了处理程序）。 另外，我还需要在运行时修改嵌入式SVG DOM。 我不知道如何从Batik中访问嵌入式SVG。

似乎所有这些都是不可能的。 我误解了<image>标签吗？ 还有另一种方法可以在保持动态功能的同时将SVG文档嵌入另一个SVG文档中？

我正在尝试做的是这样的：

 +-------------------------------------------------------------+
 |+-----------------------------------------------------------+|
 ||                                                           ||
 ||                  upper embedded SVG                       ||
 ||                                                           ||
 |+-----------------------------------------------------------+|
 |+-----------------------------------------------------------+|
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                  lower embedded SVG                       ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 |+-----------------------------------------------------------+|
 |+-----------------------------------------------------------+|
 ||<               horizontal scrollbar                      >||
 |+-----------------------------------------------------------+|
 +-------------------------------------------------------------+

滚动条应滚动上部和下部嵌入式SVG的viewBox。 但是我仍然需要访问这些文档来修改其DOM，并且需要保持动态（对鼠标悬停，单击等进行反应）。

Answer 1

您不需要使用<image>来嵌入其他SVG。 在另一个内部包含一个<svg>是合法的。 例如：

<svg>
  <svg id="upper">
     ...etc...
  </svg>
  <svg id="lower" y="200px">
     ...etc...
  </svg>
</svg>

你有尝试过吗？