Discussion :

[gatlin]

Salut tout le monde

J'ai un fichier SVG que je modifie dynamiquement avec javascript en y ajoutant des rectangles,du texte etc.

Je veux savoir s'il est possible de sauvegarder les modifications apportées au fichier svg.

Merci d'avance.

[k1rby]

Je veux pas dire de conneries mais à priori non. Pour des raisons évidentes de sécurités, on ne peut pas enregistrer des fichiers en JavaScript (enfin je crois, j'ai un doute d'un coup oO)

[jnore]

Bonsoir,

Sauvegarder tes modif coté client, cela doit être dur dur...

On peut peut-être envisager 2 solutions coté serveur:

1) Une fois ton xml/svg modifié, il faudrait l'enregistrer via ajax sur ton seveur avec un nom unique stocké dans une session. Du coup quand le visiteur revient, tu recuperes le nom du fichier xml et tu le recharges. Le visiteur retrouve ainsi son xml modifié. --> Le problème, il peut à terme y avoir bcp de fichier xml sur ton serveur.

OU

2) Il faudrait serializer le dom/svg et le stocker directement dans une session puis le rappeler lors du futur passage du client.

Cela reste à discuter en fonction de tes besoins.

[gatlin]

Merci de vos réponses claires et nettes

[gatlin]

Bonjour,
Comment je vais l'enregister via ajax?

Merci d'avance

[jnore]

Bonjour,
Comment je vais l'enregister via ajax?

Merci d'avance

1) Il va te falloir le serializer, cad, faire que la structure du DOM soit converti en chaine de caractère.

2) l'envoyer (si possible en post) sur une page PHP qui va recupérer ta chaine de caractère et la traduire en XML

3) Une fois la chaine traduite en xml --> faire un save du xml.

Ceci est un résumé. Tu rencontreras certainement des prob tout au long de ce parcours.

Première chose, manipuler ajax;

Si tu ne veux pas manipuler ajax, il y a toujours moyen après l'étape 1 de remplir un input de ta chaine xml puis de transmettre via un formulaire vers ta page php.

C'est possible mais moins gracieux.

Bon courage

[gatlin]

Comment je vais serialiser ce doucment en javascript car les modifications ne sont pas visibles dans la JSP?
Car c'est un document incorporé dans la page html avec la balise

source:

Code :

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

1
2
 
<embed id="sv" src="pagesweb/svg/parameter.svg" width=5000 height=5000 />

ensuite je recupere le document

Code :

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

1
2
3
 
var S=document.getElementById("sv");
 SD=S.getSVGDocument();

Merci d'avance

[jnore]

ensuite je recupere le document

Code :

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

1
2
3
 
var S=document.getElementById("sv");
 SD=S.getSVGDocument();

Merci d'avance

Bonsoir,

Le problème, (j'essaie de reproduire chez moi), c'est que je n'arrive pas à récupérer le contenu du document, en tout cas sur FF.
L'objectif c'est de récupérer ta première balise SVG puis de serializer de la façon suivante.

Code :

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

1
2
3
4
5
 
var noeud= //ICI RECUPERER LE 1ER NOEUD DU SVG
var x	=new XMLSerializer();//ON CREE UN NOUVEL OBJECT
var txt	=x.serializeToString(noeud);//ON TRANSFORME EN CHAINE
alert(txt);//Juste pour vérifier le contenu.

C'est la démarche, à toi de voir pour récupérer le 1er noeud de ton document svg.

[danielhagnoul]

Bonsoir.

Je ne connais pas le problème, mais une petite recherche avec Google m'a amené à http://stackoverflow.com/questions/2...the-client-dom, en espérant que cela vous sera utile :

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

[emmanuel.remy]

SAlut,

Comment je vais serialiser ce doucment en javascript car les modifications ne sont pas visibles dans la JSP?
Car c'est un document incorporé dans la page html avec la balise

source:

Code :

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

1
2
 
<embed id="sv" src="pagesweb/svg/parameter.svg" width=5000 height=5000 />

ensuite je recupere le document

Code :

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

1
2
3
 
var S=document.getElementById("sv");
 SD=S.getSVGDocument();

Merci d'avance

Attention car XMLSerializer est un objet propre à Firefox et Opera.

Pour IE, étant donné qu'il y a besoin du plugin d'Adoble, la fonction printNode(rootSVG) fait l'affaire.

Et sinon, ce code doit aussi pouvoir s'appliquer (car cela reste un "simple" document XML):

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
25
26
27
28
29
30
31
 
 
//à appeler ainsi: serialize(sv);
 
function serialize(R){
  var s="<"+R.nodeName+listAttributes(R)+">";
  for (i=0;i<R.childNodes.length;i++){
	if (R.childNodes.item(i).nodeName!="#text"){
 		var node=R.childNodes.item(i)
		var nn=node.nodeName
 		s+="<"+nn
		s+=listAttributes(node)
		if (insiders[nn]){
			if (nn=="script")s+="><![CDATA["+node.childNodes.item(0).nodeValue+"]]>"
			else s+=">"+node.childNodes.item(0).nodeValue
			s+="</"+nn+">\n"
		}
		else s+="/>\n"
	}
  }
  s+="</"+R.nodeName+">";
  return s;
}
function listAttributes(n){
	var s=""
	for (j=0;j<n.attributes.length;j++){
		s+=" "+n.attributes.item(j).nodeName+"=\""
		s+=n.attributes.item(j).nodeValue+"\""
	}
	return s
}

Bons tests,

ERE

[gatlin]

Merci pour vos réponses, vous me sauvez la peau

[gatlin]

C'est quoi insiders dans la fonction,tu l'as définie comme fonction ou c'est une méthode de javascript?

Code :

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

1
2
3
4
5
6
 
if (insiders[nn]){
			if (nn=="script")s+="><![CDATA["+node.childNodes.item(0).nodeValue+"]]>"
			else s+=">"+node.childNodes.item(0).nodeValue
			s+="</"+nn+">\n"
		}

Merci d'avance

[emmanuel.remy]

Excuse:

Code :

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

var insiders = {text: true, script: true}

Intéressant: plus d'infos ici si besoin.

ERE

[gatlin]

Merci encore

[Mobius]

Autre info complémentaire : Enregistrer un fichier sur le poste client en javascript : C'EST POSSIBLE !!!

Et oui, aussi surprenant que cela puisse paraitre, on peut le faire.
Je ne vais pas détailler comment mais je vous invite à essayer de comprendre le fonctionnement de tiddlywiki ( http://www.tiddlywiki.com/ et http://tiddlywiki.org/ )
Le principe de ce wiki, c'est que tout est contenue dans un unique fichier, lorsque le fichier est ouvert localement (avec une url de type file://... ) il est possible d'enregistrer les modifications sur le disque (après bien sur avoir demandé l'autorisation).
Si l'autorisation est permanante, cela provoque un trou de sécurité relativement important.