Remplacement d'une balise object contenant une image svg par son contenu modifié

Salut à tous!

Je débute en javascript....et là, :arf:

J'affiche dans une page ceci :

Code:

<object id="image" data="<%=session.getAttribute("synoptique")%>" type="image/svg+xml" width="800" height="600"></object>

<%=session.getAttribute("synoptique")%> vaut ceci : "images/synoptic.svg"

Et je dois modifier des battributs de balise dans le fichier svg "images/synoptic.svg", et afficher le modifier.
Je ne dois pas écrire dans le fichier svg, mais modifier uniquement à l'affichage (côté client).

Du coup, je récupère le fichier dans un flux xml, je modifie le flux récupéré (jusque là pas de problème).
Et ensuite je dois faire un truc du genre :

Code:

document.getElementById("image").innerHTML=monFluxXMLEnHtml

Quelqu'un voit ce que je souhaite faire et voit comment le faire?

J'ai fait :

Code:

1
2
3
4
5
6
var items = xmlData.getElementsByTagName("g");
	//on fait juste une boucle sur chaque élément "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		 window.document.getElementById("divMapSvg").innerHTML += items.item(i).firstChild.data;
	}

...mais ca marche pas....
Je ne vois vraiment plus comment faire

Grâce à la fonction suivante, je récupère le fichier xml modifié en flux HTML, mais de type HTML Undefined Element :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function copyDOMTree(elt)
{
	//newTree=null;
	//printDOMTree(elt,true);
alert('copyDOMTree');
	var newTree=recCopyDOMTree(elt,newTree);
	return newTree;
}
 
 
function recCopyDOMTree(elt,_newNode)
{
//alert('recCopyDOMTree type node = '+elt.nodeType);
	var child=elt.childNodes;
 
	var type;
	var newNode;
	var attributs
	var attribut;
	var attName;
	var attValue;
 
	if(elt.nodeType==1)
	{
		newNode=window.document.createElement(elt.nodeName);
		//on supprime les parametre deja mis automatiquement.
		attributs=newNode.attributes;
		for(var j=0;j<attributs.length;j++)
		{
			newNode.removeAttributeNode(attributs.item(j));
		}
		//il faut copier les parametres
		attributs=elt.attributes;
		for(var j=0;j<attributs.length;j++)
		{
			attribut=attributs.item(j);
			attName=attribut.name;
			attValue=attribut.value;
			newNode.setAttributeNS(attribut.namespaceURI,attName,attValue);
		}
	}
	else if(elt.nodeType==3) // Cas d'un noeud Text
		{
 
			if(elt.text!=undefined){
				newNode=window.document.createTextNode(elt.text);
			}
			else{
				newNode=window.document.createTextNode("");
			}
		}
		else
		{
		//alert("Ce noeud n'est pas copie (fonction recCopyDOMTree) : \ncaracteristique du neoud : "+ elt.tagName+"  "+elt.nodeType+"  "+child.length);
		}
 
	//Parcour r?cursif des fils
	for(var i=0;i<child.length;i++)
	{
			recCopyDOMTree(child.item(i),newNode);
	}
 
 
	if(_newNode==null) //cas de la racine
	{
		_newNode=newNode;
	}
	else
	{
		_newNode.appendChild(newNode);
	}
 
 
	return _newNode;
}

dans ma fonction js appelée à la modif de l'image svg (clic sur un bouton), je fais ceci :

Code:

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
28
29
30
31
32
33
34
/*
 * effectue les modifications de l'image SVG a partir des donnees recues
 */
function processXMLRich(level){
	var values; //ensemble des valeurs
	var value; //une valeur
	var i;
	var svgNode;
	var clonedNode;
	var id;
	var type;
	var zmax;
	var zmin;
	var pictureSvg;
	alert("processXMLRich      >>>>>    "+xmlData);
	values = xmlData.getElementsByTagName("g");
	alert("nb de g = "+values.length);
	for(i=0;i<values.length;i++)
	{
		//modifs du flux xml
	}
	svgNode = xmlData.documentElement;
	clonedNode=copyDOMTree(svgNode);
	//Suppression de l'ancienne image
	pictureSvg=window.document.getElementById("divMapSvg");
	for (var j=0; j<pictureSvg.childNodes.length; j++)
	{
		pictureSvg.removeChild(pictureSvg.childNodes.item(j));
	}
	//Insertion de la nouvelle image
	clonedNode.innerHTML="<?xml version=\"1.0\"?><svg contentScriptType=\"text/ecmascript\" width=\"800\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" zoomAndPan=\"magnify\" contentStyleType=\"text/css\" height=\"600\" preserveAspectRatio=\"xMidYMid meet\" viewbox=\"\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\">"+clonedNode.innerHTML+'</svg>';
	alert("clonedNode.innerHTML"+clonedNode.innerHTML);
	pictureSvg.innerHTML=clonedNode.innerHTML;
}

et là dans l'alert j'ai bien tout ce qu'il me faut, mais ca ne s'affiche pas....

Suis-je obligée de passer par la balise "<object...></object>" pour mettre du svg dans ma page jsp? Parce que si tel est le cas cela explique que ca ne marche pas.... Mais bon, ca parait bizarre....

J'avais trouvé cette discussion mais le solution donnée ne marche pas non plus....

Ce site peut aider pas mal :)...ca m'a permis de résoudre mes problemes :)