Comment superposer une image SVG sur une autre en utilisant Apache Batik?

Question

J'ai 2 fichiers SVG que j'ai besoin de superposer en utilisant Batik. Un fichier sert d'image d'arrière-plan et est 308px par 308px tandis que le second fichier (260px par 260px) est l'image de premier plan qui doit être centrée (c'est-à-dire au centre de l'image d'arrière-plan). Je voudrais que le résultat de l'opération soit enregistré dans un troisième fichier SVG. Si vous êtes familier avec Batik, j'apprécierais vos suggestions.

Merci,

Olivier.

Answer 1

Si vous n'avez pas besoin d'inclure le contenu de l'arrière-plan et des documents de premier plan dans le dernier, vous pouvez utiliser les référencer simplement:

<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> 

Il devrait être simple à construire ce document en utilisant les DOM . Voir here pour un exemple d'utilisation des API DOM pour construire un document.

Si vous avez besoin de fusionner les deux documents en un seul, alors vous pouvez:

• laisser un = le Document résultant de parsing background.svg
• let b = le Document résultant de l'analyse syntaxique foreground.svg
• nous e = a.importNode(b.getDocumentElement(), true)
• définir les x et y attributs de e à "24"
• appel a.getDocumentElement().appendChild(e)

Maintenant un est un document avec le contenu de premier plan fusionné dans.