我需要在另一个 SVG 文档中包含一个 SVG 文档(实际上是 3 个)，以便滚动嵌入的 SVG 文档。
我使用Batik JSVGCanvas将其显示在 Java 应用程序中。自从将该 Canvas 放入 JScrollPane并且将 Canvas 的大小设置为非常大的尺寸会消耗大量内存( JSVGCanvas 似乎没有任何内存效率)，我考虑通过使用 viewBox 属性并使用来减少 SVG 的可见部分SVG Scrollbars在文档内滚动。
但似乎可以通过 <image> 将 SVG 嵌入到 SVG 中tag 仅将该文档作为图像导入，而不是作为另一个 SVG 文档导入。甚至连<desc>都没有或<title>评估标签以提供元素上的工具提示。我还需要嵌入式 SVG 中的动态功能(某些元素必须是可单击的，并且我在 java 应用程序中为这些单击提供了处理程序)。我还需要在运行时修改嵌入的 SVG DOM。我不知道如何从 Batik 中访问嵌入的 SVG。
看来这一切都是不可能的。我是否误解了<image>标签？是否有另一种方法可以将 SVG 文档嵌入到另一个 SVG 文档中，同时保持动态功能？
我想做的是这样的:
+-------------------------------------------------------------+
|+-----------------------------------------------------------+|
|| ||
|| upper embedded SVG ||
|| ||
|+-----------------------------------------------------------+|
|+-----------------------------------------------------------+|
|| ||
|| ||
|| ||
|| lower embedded SVG ||
|| ||
|| ||
|| ||
|| ||
|| ||
|+-----------------------------------------------------------+|
|+-----------------------------------------------------------+|
||< horizontal scrollbar >||
|+-----------------------------------------------------------+|
+-------------------------------------------------------------+
滚动条应该滚动上部和下部嵌入的 SVG 的 viewBox。但我仍然需要访问这些文档来修改它们的 DOM，并且需要动态(对鼠标悬停、单击等使用react)。
最佳答案
您不需要使用 <image>嵌入其他 SVG。拥有一个是合法的<svg>在另一个里面。例如:
<svg>
<svg id="upper">
...etc...
</svg>
<svg id="lower" y="200px">
...etc...
</svg>
</svg>
你尝试过吗？
关于java - 将 SVG 文档嵌入到 SVG 文档中，但保持可访问性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19054961/