Wie machen Sie eine SVG-interaktiv?

Wie machen Sie eine SVG-interaktiv? Weiß jemand, wo finden Sie tutorials? Ich hätte wirklich gerne eine gute Liste der letzten Ressourcen, mit deren Hilfe jeder lernen, dynamische und interaktive Grafiken mit SVG.

Beispiel der 'Interaktivität', die ich Suche, gibt ein SVG-event-Handler und lassen ein Benutzer senden oder empfangen von neuen Daten durch die Grafik (AJAX).

Alle Bücher auf SVGs sind von 2008 oder früher ist, so gibt es keine Verwendung von modernen Techniken (jQuery oder AJAX). Alle Beiträge auf scripting SVG auf Stackoverflow sind von 2010 und die meisten sind auch von 2008.

Aktuellen Ressourcen für die SVG:

Raphael

Raphael scheint, wie die weit verbreitete Bibliothek für die Arbeit mit SVG. Es scheint, um eine gute high-level-Funktionen.

Tutorial für Raphael

Alter SO ein post auf SVG-Bücher, alle Kommentare sind von 2008

w3schools SVG tutorial. Sehr basic.

Dies ist nicht eine Debatte über canvas vs. svg. Bitte nur bieten, SVG-Interaktivität-bezogenen Informationen an.

InformationsquelleAutor Don P | 2011-12-25

  1. 5

    Ich würde auf jeden Fall einen Blick auf RaphaelJS die es ermöglicht die Manipulation von SVG-einfacher als es mit javascript von Grund auf. Es gibt einige Beispiele auf, wie es zu implementieren mithilfe von Ereignissen. Allerdings können Sie manipulieren Sie mit javascript-mit oder ohne die Hilfe einer der gängigen javascript-frameworks gibt. Die Sache mit SVG ist, dass es verwendet Elemente, die behandelt werden, als Teil des DOM. So, ein Bild wäre ein element des Containers. Dies ist hilfreich, da Sie können Sie auf Veranstaltungen, auf denen Kinder Elemente .

    Dank Mitch - ja, das ist definitiv ein Grund für die Verwendung von SVG über die Leinwand. Die Tatsache, dass alle SVG-Elemente sind Teil der DOM heißt, Sie richten Ihre grafischen Elemente. Ich bin auf der Suche nach einem Ort, der gibt moderne Beispiele dieser jedoch.
    Hier etwas, dass ich peitschte vor Ewigkeiten mit SVG. Don T Geist einige javascript, die nicht optimiert ist. Es ändert sich eine gezeichnete Linie auf der Grundlage ziehen ein div um

    InformationsquelleAutor mitch

  2. 4

    Werfen Sie einen Blick auf http://snapsvg.io/

    Ihre website:

    Snap geschrieben wurde, völlig aus dem nichts durch den Autor Raphaël (Dmitry Baranovskiy), und wurde speziell für den modernen Browsern (IE9, Safari, Chrome, Firefox und Opera). Auf mehr modernen Browsern bedeutet, dass Snap unterstützt Funktionen wie Maskierung, zuschneiden, Muster, voller Steigungen, Gruppen und mehr.

    Dies sieht sehr beeindruckend aus - ich denke, ich werde es zu benutzen.

    InformationsquelleAutor Michael Heraghty

  3. 3

    D3 ist eine JavaScript-Bibliothek für die Manipulation von SVG:

    http://mbostock.github.com/d3/

    Es auch ein paar helper Methoden für das laden der Daten asynchron (z.B. d3.json, d3.csv, d3.xml). Im Gegensatz zu Raphaël, mit D3 arbeiten Sie direkt mit SVG-Elementen (oder HTML, CSS).

    InformationsquelleAutor mbostock

  4. 3

    Folgende ist nur ein kleiner Teil aus einer aktuellen online-Artikel von Zack Grossbart die ich denke, macht einige große Punkte. Lesen Sie die ganze Sache, aber vor allem werfen Sie einen Blick auf Abschnitt ÜBERSICHT...

    Vor dem auftragen etwas in einem browser, Fragen Sie sich drei Fragen:

    1. Müssen Sie die Unterstützung für ältere Browser?
      Wenn die Antwort ja ist, dann Ihre einzige Wahl ist, Raphaël. Es Griffe Browser den ganzen Weg zurück zu IE 7 und Firefox 3. Raphaël hat sogar einige Unterstützung für IE 6, obwohl einige seiner zugrunde liegenden Technik kann nicht implementiert werden, da.

    2. Brauchen Sie Unterstützung von Android?
      Android-keine Unterstützung für SVG, so werden Sie zu verwenden Paper.js oder Processing.js. Einige Gerüchte sagen, dass Android 4 behandelt SVG, aber die Mehrheit der Android-Geräte wird nicht unterstützt es seit Jahren.

    3. Ist Ihre Zeichnung interaktiv?
      Raphaël und Paper.js Fokus auf Interaktion mit gezeichneten Elemente durch klicken, ziehen und Tippen. Processing.js unterstützt nicht jedes Objekt-level-Ereignisse, also das reagieren auf user-gesten ist sehr schwierig. Processing.js zeichnen kann eine Coole animation auf Ihrer Homepage, aber die anderen tools sind besser für interaktive Anwendungen.

    Nach caniuse.com/svg, Android browser unterstützt SVG seit 3.0, und es sieht gut unterstützt auf allen Android-Browsern (Chrome für Android, Firefox für Android).
    Sie könnte erwägen, WARUM Sie fühlte sich der Teil der Antwort war irreführend. Dabei sollten Sie auch das Datum, die Antwort wurde gegeben. Wenn die Dinge haben sich seitdem verändert, dann ist die Antwort gut war, für' seine Zeit und braucht nicht verdient zu werden, gewählt. Auch, versuchen Sie nicht, um persönliche Vorurteile in den Kommentaren. Der Grund, warum Menschen können nicht akzeptieren, Ihre Bearbeitungen werden konnte, weil Sie in der Tat falsch, oder deine Bearbeiten (selbst) kommen kann aus so hart. Viel Glück!

    InformationsquelleAutor Prisoner ZERO

  5. 2

    Fast alle manipulation .svg-Dateien mit JavaScript. AJAX ist nur etwas, was Sie tun, mit Javascript, also, wenn Sie brauchen, um zu verwenden, die (für das dynamische laden von neuen Inhalten oder das speichern von Interaktionen) müssen Sie lernen, die separat und wenden Sie es.

    Ich würde anfangen mit dem lernen, wie zu zeichnen und Dinge zu behandeln, wie events wie "mouseOver" und "onClick".

    Hier ist ein weiteres tutorial:
    http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/

    Und hier ist eine auf AJAX:
    http://www.w3schools.com/ajax/ajax_example.asp

    Dank Raymond - diese sind hilfreich. Kennen Sie tutorials, die mithilfe von AJAX und SVG zusammen? Ich habe AJAX in der Vergangenheit viel und verstehen es ziemlich gut, aber benutze es mit SVG ist ein bisschen komplizierter. Die carto.net tutorial ist besser als die meisten, aber doch ein bisschen veraltet (von 2009).
    Ich weiß nicht, alle tutorials dieser Sorte, leider. Was genau ist es, das Sie brauchen, AJAX? SVG ist von Natur aus sehr dynamisch, aber wenn Sie brauchen, um zu dienen, ein neues bit von XML jedes einmal und eine Weile, ich sehe keinen Grund, warum es nicht funktionieren sollte, wie be jedem anderen bit von XML dynamisch. That being said, meine SVG-wissen ist so alt wie all die tutorials. Es ist schon ein paar Jahre. 😛
    Auch Sie konnte man in eine javascript-Bibliothek für die Leinwand, die Ihnen erlauben würde, um alles, was anklickbar ist. "processing.js" ist schön. Ich dachte, ich würde erwähnen, dass nachdem ich Ihr Gespräch mit mitch.
    Ja, ich habe in gesucht processing.js aber es scheint nicht, wie es ist, flexibel. Ich denke, es war meist für Menschen gemacht, die wollte mathematischen Bilder, nicht bauen interaktive Dinge.

    InformationsquelleAutor rfinz

  6. 1

    Umfassendes interaktives Beispiel:

    http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2

    gibt Ihnen eine Liste der Funktionen für die neueste version.

    Arbeiten interaktiv mit den aktuellen Funktionen, und verweisen Sie die aktuelle Dokumentation zur gleichen Zeit.

    InformationsquelleAutor Chasbeen

  7. 1

    @mitch würde ich dir empfehlen Reine SVG...ich weiß, es ist schwer zu verwenden, aber es gibt Ihnen eine Vielzahl von Möglichkeiten der manipulation mit JS. Für mich auch andere Optionen wie Raphael Bibliothek eignet sich hervorragend für einfache arbeiten, aber wenn Sie brauchen, um zu zwicken, Ihr Kodex es gibt nichts wie SVG.
    Ansonsten finden Sie sich selbst in einer situation, wenn Sie Stapel und konnte nicht weiter gehen.

    Javascript/Ajax Sie haben spezifische Bibliotheken, die verkürzen kann Ihre Programmierung, wenn app ist zu Komplex...Was soll ich sagen!?

    Werfen Sie einen Blick auf: http://www.kevlindev.com/tutorials/index.htm

    InformationsquelleAutor Alex

Schreibe einen Kommentar