Est-il possible de manipuler un document SVG incorporé dans une doc HTML avec JavaScript?

Question

J'ai créé une image SVG, ou plutôt une mini-application, pour afficher des graphiques de données. Je souhaite l'inclure dans une page HTML et appeler des méthodes sur l'image SVG.

Exemple:

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

Est-il possible d'appeler des méthodes sur le document SVG? Si tel est le cas, comment déclarer les méthodes à exposer dans le fichier SVG et comment les appeler à partir du document HTML?

Answer 1

Solution:

dans svg:

<script>document.method = function() {}</script>

en HTML (utilisation d'un prototype pour ajouter des écouteurs d'événement):

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

Vous devez écouter l'événement de chargement sur l'image. Une fois l'image chargée, vous pouvez utiliser element.contentDocument pour accéder à la variable document du document svg. Toutes les méthodes ajoutées à cela seront disponibles.

Answer 2

Les choses sont en réalité plus simples que prévu. Vous n'avez pas vraiment besoin de lire le didacticiel compliqué pour comprendre le concept, vous ne devez pas non plus utiliser JQuery. Voici la présentation de base:

• Une fonction JavaScript dans votre document HTML.

  <script type="text/javascript">
  function change(){
      var s=document.getElementById("cube");
      s.setAttribute("stroke","0000FF");
  }
  </script>
  

• Un élément SVG que nous essayons de manipuler.

  <svg width=100 height=100 style='float: left;'>
    <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
  </svg>
  

• Un bouton en ligne qui déclencherait le changement. Notez que dans mon exemple, l’événement peut également être déclenché en cliquant sur le cube lui-même.

  <button onclick="change()">Click</button>
  

Answer 3

Il y a quelques années, on m'a demandé de créer un jeu à 2 joueurs basé sur l'Ajax et utilisant SVG. Ce n'est peut-être pas précisément la solution que vous recherchez, mais cela peut vous aider à écouter les événements de votre SVG. Voici le contrôleur SVG:

fyi, le fichier SVG était glissé et déposé (c'était une stratégie)

/****************** Track and handle SVG object movement *************/
var svgDoc;
var svgRoot;
var mover='';       //keeps track of what I'm dragging

///start function////
//do this onload
function start(evt){
    //set up the svg document elements
    svgDoc=evt.target.ownerDocument;
    svgRoot=svgDoc.documentElement;
    //add the mousemove event to the whole thing
    svgRoot.addEventListener('mousemove',go,false);
    //do this when the mouse is released
    svgRoot.addEventListener('mouseup',releaseMouse,false); 
}

// set the id of the target to drag
function setMove(id){ mover=id; }

// clear the id of the dragging object
function releaseMouse(){ 
    if(allowMoves == true){ sendMove(mover); }
    mover=''; 
}

// this is launched every mousemove on the doc
// if we are dragging something, move it
function go(evt){
    if(mover != '' && allowMoves != false) {
        //init it
        var me=document.getElementById(mover);

        //actually change the location
        moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece
        moveY = evt.clientY-65;
        me.setAttributeNS(null, 'x', evt.clientX-135);
        me.setAttributeNS(null, 'y', evt.clientY-65);
    }
}

function moveThis(pieceID, x, y) {
    $(pieceID).setAttributeNS(null, 'x', x);
    $(pieceID).setAttributeNS(null, 'y', y);
}

Mon application était purement SVG + JavaScript, mais c'est l'essentiel.

Answer 4

Je citerais le Dr David Dailey comme l’information SVG / JS la plus impressionnante que vous trouverez http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

J'ai exploré le svg avec JavaScripts. Voir le blog: Mise à l'échelle de graphiques SVG avec JavaScripts

Answer 6

Voir également le plug-in jQuery SVG

Answer 7

Pour obtenir de l'aide sur IE6, consultez SVGWeb .

Il existe des exemples de manipulation de SVG avec JavaScript dans l'exemple de code fourni avec la bibliothèque.

Les archives de la liste de diffusion contiennent également de nombreuses informations.