È possibile manipolare un documento SVG incorporato in un documento HTML con JavaScript?

Question

Ho creato un'immagine SVG, o più come una mini applicazione, per visualizzare grafici di dati. Voglio includerlo in una pagina HTML e chiamare metodi sull'immagine SVG.

Esempio:

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

È possibile chiamare metodi sul documento SVG? In tal caso, come posso dichiarare i metodi da esporre nel file SVG e come posso chiamarli dal documento HTML?

Answer 1

Soluzione:

in svg:

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

in html (usando il prototipo per aggiungere listener di eventi):

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

Devi ascoltare l'evento load sull'immagine. Una volta caricata l'immagine, puoi usare element.contentDocument per accedere alla variabile del documento sul documento svg. Tutti i metodi aggiunti a questo, saranno disponibili.

Answer 2

Le cose sono in realtà più semplici di quanto ti aspetti. Non hai davvero bisogno di leggere tutorial contorto per capire il concetto, né devi usare JQuery. Ecco il layout di base:

• Una funzione JavaScript nel tuo documento html.

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

• Un elemento SVG che stiamo cercando di manipolare.

  <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 pulsante incorporato che attiva la modifica. Si noti che nel mio esempio l'evento può essere attivato anche facendo clic sul cubo stesso.

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

Answer 3

Alcuni anni fa, mi è stato chiesto di creare un gioco basato su Ajax per 2 giocatori usando SVG. Potrebbe non essere esattamente la soluzione che stai cercando, ma può aiutarti ad ascoltare gli eventi nel tuo SVG. Ecco il controller SVG:

a proposito, l'SVG veniva trascinato e rilasciato (era Stratego)

/****************** 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);
}

La mia app era pura SVG + JavaScript, ma questa è la sostanza.

Answer 4

Vorrei fare riferimento al Dr. David Dailey come le più fantastiche informazioni SVG / JS che troverai http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

Ho esplorato lo svg di JavaScripts. Vedi il blog: Scalare la grafica SVG con JavaScripts

Answer 6

Vedi anche il plugin SVG jQuery

Answer 7

Per supporto in IE6, dai un'occhiata a SVGWeb .

Ci sono esempi su come manipolare SVG con JavaScript nel codice di esempio fornito con la libreria.

C'è anche una buona quantità di informazioni negli archivi della mailing list.