0

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

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

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

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

我想做的是这样的：

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

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

4

1 回答 1

1

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

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

你试过吗？

于 2013-09-28T01:56:42.667 回答