How do I superimpose one SVG image onto another using Apache 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.
Thanks,
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>
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:
- 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
andy
attributes of e to "24" - call
a.getDocumentElement().appendChild(e)
Now a is a document with the foreground contents merged in.
精彩评论