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

问题描述：

我需要使用Batik覆盖2个SVG文件。一个文件用作背景图像，为308px×308px，而第二个文件（260px×260px）是必须居中的前景图像（即背景图像的中心）。我希望将操作的结果保存在第三个SVG文件中。
如果您熟悉Batik，我将非常感谢您的建议。

I have 2 SVG files I need to overlay using Batik. One file serve as the background image and is 308px by 308px while the second file (260px by 260px) is the foreground image that must be centered (that is at the center of the background image). I'd like the result of the operation to be saved in a third SVG file. If you are familiar with Batik, I'd appreciate your suggestions.

谢谢，

Olivier。

答

如果你不需要在最后一个文件中包含背景和前景文档的内容，你可以使用只需引用它们：

If you don't need to include the contents of the background and foreground documents in the final one, you can use simply reference them:

<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构建a的示例，请参见此处文件。

It should be simple to construct this document using the DOM. See here for an example of using the DOM APIs to construct a document.

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

If you need to merge the two documents into one, then you could:

让 a = 文件由解析 background.svg

让 b = 解析foreground.svg产生的文件

让 e = a。 importNode （b.getDocumentElement（），true）

设置 x 和 y e 到24的属性

call a.getDocumentElement（）。appendChild（e）

let a = the Document resulting from parsing background.svg
let b = the Document resulting from parsing foreground.svg
let e = a.importNode(b.getDocumentElement(), true)
set the x and y attributes of e to "24"
call a.getDocumentElement().appendChild(e)

现在 a 是一个带有佛的文件重新合并内容。

Now a is a document with the foreground contents merged in.

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

相关推荐