11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je suis en pleine écriture d'un fichier SVG avec une structure fixe, et une structure dynamique. C'est à dire que j'ai créé un groupe vide

    <g id="meshFrontSide">
    </g>

auxquels j'accède par

   var meshFrontSide = document.getElementById('meshFrontSide');

puis que je remplis dynamiquement en javascript en fonction des clics utilisateurs

  document.getElementById('meshFrontSide').appendChild(newLine);


Lorsque la génération est terminée, j'ai prévu un bouton qui devrait me permettre de sauver le SVG ainsi généré. Comment faire ? J'ai pensé à une fonction récursive qui parcours les child et qui ferait un printf des balises et attributs, mais je ne sais pas comment faire un équivalent au printf. Et si ça marche en local, comment imaginer cette même fonction étendue à un utilisateur distant quand ma page sera publiée ? MERCI
Salut,

Tu as plus ou moins les mêmes fonctions côté serveur (php).
Tu pourrais donc envoyer tes données svg via une requête ajax à un script php qui gèrerait l'écriture et la sauvegarde.

tm
Modifié par tm™ (20 Dec 2012 - 10:56)
En général, la doc php propose une série de cas concrets (ex : fwrite).

Pour ta requête AJAX, google devrait pouvoir être ton ami. Smiley lol
Perso, j'utilise volontiers jQuery, qui simplifie grandement la chose...
- http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-pour-faire-plus.html
- http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
- http://blog.arnaud-k.fr/2009/04/22/tutorial-connexion-en-ajax-avec-jquery-et-php/
- ...

tm
Merci beaucoup !
J'ai commencé à me pencher dessus, et avant de me lancer dans un vrai traitement, je veux tester la bonne exécution avec une simple boite alert.

J'ai donc ajouter ce simple code à mon fichier SVG

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" />
  <script>
    $(document).ready(function(){ 
      alert('Coucou !');
    });
  </script>


Je m'attends donc à avoir cette boite de dialogue au chargement de ma page, mais rien ne se passe. Partout sur le net, je vois ce type de code ajouté à un code HTML mais pas à un code SVG. Voici la trame de mon fichier SVG


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<svg version="1.1" baseProfile="full" width="200cm" height="150cm" viewbox="0 0 200 150" xml:lang="fr" preserveAspectRatio="yes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">

  <style type="text/css"><![CDATA[
... mes styles ...
  ]]></style>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" />
  <script>
    $(document).ready(function(){ 
      alert('Coucou !');
    });
  </script>

  <script type="text/ecmascript"><![CDATA[
... mes fonctions de création de contenu SVG dynamique ...
  ]]></script>

  <title>Mon titre</title>
... mon contenu SVG statique...
</svg>

Est-ce que je peux faire ça ? Dans du SVG ?
Salut,

Tu as oublier de mettre l'attribut type="text/javascript" dans la balise script et comme c'est du svg, il faut mettre le code dans un<![CDATA] ]]> au risque d'avoir des surprises Smiley cligne .

Sinon, jquery ne fonctionne pas bien dans un document svg, il vaux mieux utilisé autre chose.
Puis pour ne faire qu'une requête ajax, je te conseille de cherche une classe qui ne s'occupe que de ça ou le faire en js pur en cherchant un tuto. Après il suffira de mettre un onclick="la_fonction_ajax" à ton bouton.

Tu ne le sais peut-être pas mais selon le navigateur visé cela ne fonctionnera pas: certains ne supporte pas le svg ou en on une implémentation partielle.