Discussion :

[MelodyBibi]

Bonjour,

Je travaille actuellement sur une application graphique (manipulation d'un fichier SVG) en Java avec l'utilisation de batik DOM pour manipuler directement le document SVG.

Mes différents éléments sont déclarés dans des balises "symbol" et sont utilisés/affichés grâce aux balises "use".

Voici le document SVG :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" width="100%" zoomAndPan="magnify" contentStyleType="text/css" height="100%" preserveAspectRatio="xMidYMid meet" version="1.0">
 
    <defs>
        <g id="module-list">
            <symbol preserveAspectRatio="xMidYMid meet" id="chaise_1.1.2" version="1.1.2" viewBox="0 0 200 256" module="chaine">
                <polygon fill="inherit" clip-rule="evenodd" fill-rule="evenodd" points="184.055,256.09 184.055,256.09 184.055,148.195 199.135,148.195 199.135,256.09  "/>
                <polygon fill="inherit" clip-rule="evenodd" fill-rule="evenodd" points="83.006,201.214 83.006,201.214 83.006,187.532 182.656,187.532       182.656,201.214  "/>
                <polygon fill="inherit" clip-rule="evenodd" fill-rule="evenodd" points="83.006,169.963 83.006,169.963 83.006,149.286 182.656,149.286       182.656,169.963  "/>
                <path fill="inherit" clip-rule="evenodd" d="m94.664,133.266L94.664,133.266c8.183-2.792,23.189-5.077,45.008-6.836      c21.818-1.76,38.142-1.219,48.972,1.631c10.831,2.85,16.246,9.305,16.246,19.354H82.382      C82.382,140.779,86.473,136.071,94.664,133.266z" fill-rule="evenodd"/>
                <path fill="inherit" clip-rule="evenodd" d="m55.951,25.838c-5.393-15.133-5.964-23.633-1.714-25.497      c7.672-1.866,13.17,6.633,16.486,25.497c7.25,35.553,10.885,69.858,10.885,102.921v127.33H66.369l0.308-126.706      C66.677,96.004,63.104,61.497,55.951,25.838z" fill-rule="evenodd"/>
            </symbol>
        </g>
    </defs>
    <g id="plan-list">
        <g id="nameZone1">
            <rect fill="#000000" x="0" width="500" height="500" y="0"/>
            <use x="50" y="20" fill="#F5A9D0" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200" xlink:show="embed"/>
            <use x="50" y="60" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200" xlink:show="embed"/>
        </g>
        <g id="nameZone2">
            <rect fill="#0000FF" x="500" width="500" height="500" y="0"/>
            <use x="550" y="20" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200" xlink:show="embed"/>
            <use x="550" y="60" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200" xlink:show="embed"/>
        </g>
    </g>
</svg>

J'ajoute un évent sur un élément du SVG :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
((EventTarget) objAdd.getNodeUse()).addEventListener( "mousedown", new EObject(), false);
((EventTarget) objAdd.getNodeDefs()).addEventListener( "mousedow", new EObject(), false);

La classe EObject implémente org.w3c.dom.events.EventListener :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import org.w3c.dom.Element;
import org.w3c.dom.events.Event;
 
public class EObject implements org.w3c.dom.events.EventListener
{
    public void handleEvent(Event evt) 
    {
        System.out.println("YOUPIIII JE SUIS CLIQUE");    
        Element e = (Element) evt.getTarget();
        System.out.println(e.toString());
 
        // Test de récupération de la balise use de l'élément sélectionné :
 
        //SVGOMUseElement elem = (SVGOMUseElement)evt.getTarget();
        //System.out.println("USE : " + elem.getNodeName());
 
        if(e.getNodeName().compareTo("polygon") == 0 || e.getNodeName().compareTo("path") == 0)
        {
            e = ((Element)e.getParentNode());
        }
 
        System.out.println(((Element)e.getParentNode()).getClass());
    }
}

Je souhaiterais récupérer l'élément "use" correspondant à l'élément cliqué.

Cependant un simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Element e = (Element) evt.getTarget();

récupère des composants de l'élément (polygon ou path).

Et lorsque je fais un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

e = ((Element)e.getParentNode());

j'obtiens l'élément "svg".

Des idées sont les bienvenues.

Je vous remercie d'avance pour votre aide précieuse.

[joel.drigo]

Essaye avec getCurrentTarget() au lieu de getTarget().

Sinon, au lieu d'utiliser "mousedown" et de risquer d'écrire "mousedow", utilise SVGConstants.SVG_MOUSEDOWN_EVENT_TYPE

[MelodyBibi]

Bonjour,

Merci pour votre réponse.

Elle m'est bien utile car je voulais aussi récupérer la zone sélectionnée par l'utilisateur.

En effet getCurrentTarget() sur un object me renvois l'élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<g id="nameZone1">

Qui correspond à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<g id="nameZone1">
            <rect fill="#000000" x="0" width="500" height="500" y="0"/>
            <use x="50" y="20" fill="#F5A9D0" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200"     xlink:show="embed"/>
            <use x="50" y="60" width="20" xlink:href="#chaise_1.1.2" xlink:type="simple" xlink:actuate="onLoad" height="200" xlink:show="embed"/>
</g>

Cependant j'aimerais aussi récupérer le use sélectionné.. Auriez-vous une autre idée ?

Merci pour votre aide.



J'ai remarquer que les événements ajoutés comme je le fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
((EventTarget) objAdd.getNodeUse()).addEventListener( SVGConstants.SVG_MOUSEDOWN_EVENT_TYPE, new EObject(), false);
((EventTarget) objAdd.getNodeDefs()).addEventListener( SVGConstants.SVG_MOUSEDOWN_EVENT_TYPE, new EObject(), false);

Ne semble pas avoir d'impact.

En effet, dans mon code je fais également un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Element elt = doc.getElementById("nameZone1");
EventTarget t = (EventTarget)elt;
t.addEventListener(SVGConstants.SVG_MOUSEDOWN_EVENT_TYPE, new EObject(), false);

(Et lorsque j'enlève le bout de code ci-dessus, un clique sur un élément n’engendre rien.)

C'est surement pour cela que getCurrentTarget() me renvois l'élément g correspondant.

Le problème doit certainement être l'ajout d'événement sur l'élément.

Encore une fois si vous avez une idée, elle est la bien venue..

[MelodyBibi]

S'il vous plais

Désolée d'insister mais je suis bloquée dans mon avancement et ne trouve pas de solutions...