Javascript et SVG

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.

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)

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.

Merci de vos r�ponses claires et nettes

Bonjour,
Comment je vais l'enregister via ajax?

Merci d'avance

Citation:

---

Envoy� par gatlin

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

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:

---

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

---

ensuite je recupere le document

Code:

---

1 2 3

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

---

Merci d'avance

Citation:

---

Envoy� par gatlin

ensuite je recupere le document

Code:

---

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:

---

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.

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 :

Citation:

---

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

---

SAlut,

Citation:

---

Envoy� par 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:

---

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

---

ensuite je recupere le document

Code:

---

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:

---

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

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

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

Code:

---

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

Excuse:

Code:

---

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

---

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

ERE

Merci encore

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.