在 SVG 文档中嵌入 SVG 文档，但保持可访问性答案

【问题标题】：Embedding an SVG document inside an SVG document, but maintaining accessibility在 SVG 文档中嵌入 SVG 文档，但保持可访问性
【发布时间】：2013-10-03 23:58:29
【问题描述】：

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

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

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

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

我想做的是这样的：

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

滚动条应该滚动上下嵌入 SVG 的 viewBox。但我仍然需要访问这些文档来修改它们的 DOM，并且需要动态（对鼠标悬停、点击等做出反应）。

【问题讨论】：

标签： java image svg embed batik

【解决方案1】：

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

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

你试过了吗？

【讨论】：

啊！是的，你当然是对的。这是一个更好的方法。而且我不需要将内部 SVG 的内容外包出去，这样更可取。