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

【问题标题】：How do I superimpose one SVG image onto another using Apache Batik?如何使用 Apache Batik 将一个 SVG 图像叠加到另一个上？
【发布时间】：2011-03-03 13:09:14
【问题描述】：

我有 2 个 SVG 文件需要使用 Batik 覆盖。一个文件用作背景图像，大小为 308 像素 x 308 像素，而第二个文件（260 像素 x 260 像素）是必须居中的前景图像（即位于背景图像的中心）。我希望将操作结果保存在第三个 SVG 文件中。如果你熟悉蜡染，我会很感激你的建议。

谢谢，

奥利维尔。

【问题讨论】：

标签： java svg batik

【解决方案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 构造这个文档应该很简单。有关使用 DOM API 构建文档的示例，请参阅 here。

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

让 a = 由parsing background.svg 产生的Document
让 b = 解析foreground.svg 得到的Document
让e = a.importNode(b.getDocumentElement(), true)
将e的x和y属性设置为“24”
致电a.getDocumentElement().appendChild(e)

现在a是一个合并了前台内容的文档。

【讨论】：