將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>

你有嘗試過嗎？