Ist es möglich, ein SVG-Dokument eingebettet in einem HTML-Dokument mit JavaScript zu manipulieren?

Question

Ich habe ein SVG-Bild gemacht, oder mehr wie Mini-Anwendung, für grafische Darstellungen von Daten anzeigen. Ich möchte dies in einer HTML-Seite schließen, und rufen Methoden auf dem SVG-Bild.

Beispiel:

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

Ist es überhaupt möglich, Methoden auf dem SVG-Dokument zu nennen? Wenn ja, wie erkläre ich die Methoden in der SVG-Datei zu belichten, und wie rufe ich sie aus dem HTML-Dokument?

Answer 1

Lösung:

in svg:

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

in HTML (mit Prototyp-Ereignis-Listener hinzugefügt werden):

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

Sie müssen das Ladeereignis auf dem Bild hören. Nachdem das Bild geladen ist, können Sie die element.contentDocument verwenden, um die Dokumentvariable auf dem SVG-Dokument zuzugreifen. Beliebige Verfahren hinzugefügt, dass verfügbar sein wird.

Answer 2

Die Dinge sind tatsächlich einfacher als Sie erwarten. Sie brauchen nicht wirklich gewundene Tutorial zu lesen, das Konzept zu verstehen, du auch nicht JQuery verwenden. Hier ist das grundlegende Layout:

• Eine JavaScript-Funktion in Ihrem HTML-Dokument.

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

• Ein SVG-Element, das wir zu manipulieren versuchen.

  <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>
  

• Ein Inline-Knopf, der die Änderung auslösen würde. Beachten Sie, dass in meinem Beispiel kann das Ereignis auch durch einen Klick auf den Würfel selbst ausgelöst werden.

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

Answer 3

Vor ein paar Jahren wurde ich gebeten, ein 2-Spieler-Ajax-basiertes Spiel mit SVG zu erstellen. Es kann nicht genau die Lösung sein, die Sie suchen, aber es kann man für Veranstaltungen in Ihrer SVG helfen zu hören. Hier ist die SVG-Controller:

FYI, wurde der SVG per Drag & Drop (es war 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);
}

Meine app war reiner SVG + JavaScript, aber dies ist der Kern von ihm.

Answer 4

würde ich Dr. David Dailey als fantastischste SVG / JS Info Referenz finden Sie http://srufaculty.sru.edu/david.dailey/svg/

Answer 5

Ich habe das svg von JavaScripts erforscht. Sehen Sie den Blog: Skalierung SVG-Grafiken mit JavaScripts

Answer 6

Siehe auch die jQuery SVG-Plugin

Answer 7

Für die Unterstützung in IE6, hat einen Blick auf SVGWeb .

Es gibt Beispiele dafür, wie im Beispielcode im Lieferumfang der Bibliothek SVG mit JavaScript zu manipulieren.

Es gibt auch eine angemessene Menge an Informationen, die in den Archiven der Mailingliste.