11550 sujets

JavaScript, DOM et API Web HTML5

[résolu] Javascript et SVG <embed> ou <object>

Bonjour j'ai écrit un script (en python) qui produit un document SVG (diagramme de machine à états à partir de code source). A l'heure actuelle je suis obligé de passer par Internet Explorer et le plugin d'Adobe pour avoir un support complet des spécifications 1.1 du SVG (textpath en particulier) et visualiser mon document.
Le problème c'est qu'IE n'a pas toutes les fonctionnalités qu'on pourrait attendre d'un visionneur SVG : scrolling overflow, zoom,... du coup je suis obligé d'intégrer mon document SVG dans une page XHTML et d'utiliser du javascript.
Le site W3School affirme qu'un <object> ne supporte pas les scripts et sous-entend qu'il faut passer par un <embed> (non standard) et ne précise pas s'il s'agit de javascript ou de script SMIL.
Est-ce que quelqu'un aurait déjà rencontré ce problème ?
Suis-je condamné à utiliser la balise <embed> ?
Modifié par stephane (21 Aug 2006 - 19:45)
J'ai un peu investigué depuis vendredi (j'aurais du commencer par là). Je ne vais pas me lancer dans une longue dissertation sur le support du SVG par les navigateurs, car cela n'est pas le sujet de ce forum, mais j'aime autant vous dire que quand on veut rajouter du javascript ça ne simplifie pas les choses.
En bref, la plupart des sites actuels qui utilisent du SVG l'incluent dans leur code HTML avec les balises <embed> qui ne font pas partie des spécifications W3C. On peut très bien utiliser des balises <object> mais comme je le craignais le code javascript du fichier SVG ne fonctionne pas dans tous les navigateurs (ça passe pour FF mais pas pour IE), enfin on peut utiliser <iframe> mais là encore ça peut poser des problèmes dans certains navigateurs (Opéra par exemple).
Pour ceux que ça intéresse j'ai construit un petit exemple pour tester ces 3 méthodes avec un SVG tout bête avec javascript, dont voici le code source.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <script type="text/ecmascript">
  <![CDATA[
    function changeCouleurRectangle(evt) {
      var rouge = Math.round(Math.random() * 255);
      var vert = Math.round(Math.random() * 255);
      var bleu = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ rouge +","+ vert+","+bleu+")");
    }
  ]]>
  </script>
  <g id="firstGroup">
    <rect id="monRectangle" width="100" height="50" x="40" y="20" fill="blue" onclick="changeCouleurRectangle(evt)"/>
    <text x="40" y="100">Cliquez sur le rectangle.</text>
  </g>
</svg>


Je terminerais par vous recommander un site qui donne beaucoup d'exemples d'utilisation de javascript avec du SVG (et qui utilise des <embed>) :
http://www.carto.net/papers/svg/samples/
Sujet clos
Aller à