java - 如何使用 Apache Batik 将一个 SVG 图像叠加到另一个图像上？

Question

我有 2 个 SVG 文件需要使用 Batik 进行叠加。一个文件用作背景图像，大小为 308px x 308px，而第二个文件(260px x 260px)是必须居中的前景图像(即位于背景图像的中心)。我希望将操作结果保存在第三个 SVG 文件中。如果您熟悉 Batik，非常感谢您的建议。

谢谢，

奥利维尔。

Answer 1

如果你不需要在最后一个包含后台文件和前台文件的内容，你可以简单地引用它们:

<svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     width='308' height='308' viewBox='0 0 308 308'>
  <image xlink:href='background.svg' width='308' height='308'/>
  <image xlink:href='foreground.svg' x='24' y='24' width='260' height='260'/>
</svg>

使用 DOM 构造此文档应该很简单。参见 here有关使用 DOM API 构建文档的示例。

如果您需要将两个文档合并为一个，那么您可以:

• 让 a = 从 parsing 产生的 Document背景.svg
• 让 b = 解析 foreground.svg 产生的 Document
• 设e = a. importNode (b.getDocumentElement(), true)
• 将 e 的 x 和 y 属性设置为“24”
• 调用a.getDocumentElement().appendChild(e)

现在 a 是合并了前景内容的文档。