SVG dynamisch aktualisieren

8

Ich habe einige Objekte innerhalb von Svg, die vom Benutzer angeklickt werden können.

Gibt es einen Weg zu: - Informationen über das Objekt (ID), auf das der Benutzer geklickt hat, an das "Haupt-HTML-Dokument" senden? - Zeichnen Sie von außerhalb Dokument in der Svg-Datei.

Wahrscheinlich ist meine Beschreibung unklar, ... Ich möchte so etwas umsetzen:

  1. Benutzer klicken auf ein beliebiges Objekt innerhalb von svg-image;
  2. Hauptdokument erhält die ID des angeklickten Objekts und:
    • zeigt einige Informationen über dieses Objekt an;
    • Zeichnen Sie ein zusätzliches Objekt innerhalb des Svg-Images.

Fragen: Wie kommuniziert man von SVG zu Dokument und von Dokument zu SVG?

Vielen Dank, alle Gedanken sind willkommen!

P.S. Wahrscheinlich ist SVG nicht der beste Weg das zu tun? Was ist dann besser?

BEARBEITEN: Ich sah eine Empfehlung bezüglich der Verwendung von Raphael, .. aber ich würde gerne "native" Optionen sehen. (Zur Zeit analysiere ich die Raphaels-Implementierung, um das zu sehen, aber glaube nicht, dass es genau das tut, was ich brauche).

    
Budda 11.05.2011, 15:00
quelle

4 Antworten

6

Sehen Sie dieses Beispiel , um zu erfahren, wie Sie die DOM einer referenzierten Svg aus dem übergeordneten Dokument.

Und hier ist ein Beispiel von wie Sie können von einer SVG-Datei zum übergeordneten Dokument aufrufen.

SVG ist sehr gut geeignet, um das zu tun, was du beschreibst.

    
Erik Dahlström 11.05.2011, 17:59
quelle
4

Ich würde vorschlagen, eine Bibliothek wie Raphaël zu verwenden, um euer SVG-Gebäude zu unterstützen. Sie können Ereignisse an DOM-Objekte anhängen, die Sie über die node -Eigenschaft einer Bildkomponente erhalten können.

    
Nick 11.05.2011 15:06
quelle
0

Raphaël.js ist in der Tat eine gute Lösung, wenn Sie bei SVG / VML bleiben wollen. Jetzt können Sie auch Canvas (neue HTML 5-Funktionalität) verwenden. Canvas ist ein neues HTML-Tag (mit ID, Ereignissen, ...), mit dem Sie freie Formen ein wenig wie SVG zeichnen können. Natürlich unterstützt der IE nicht nativ Canvas, und Sie brauchen "excanvas.js" (dieses oder das andere, aber dieses funktioniert ziemlich gut ...), um es IE-kompatibel zu machen.

Ich kenne nur eine Einschränkung in Bezug auf die Leinwand: Die Verwendung von Hintergrundbildern macht IE sehr langsam. Ich würde Raphaël.js verwenden, wenn es etwas wäre, was Sie in Erwägung ziehen würden.

Viel Glück

    
Zaziffic 11.05.2011 15:40
quelle
0

Niemand hat vorgeschlagen, aber versehentlich habe ich festgestellt, dass Svg bereits von jQuery unterstützt wird! Ссылка

Wahrscheinlich ist das nicht der beste Ansatz, aber ich werde versuchen, mit Svg mit jQuery zu arbeiten. Und tatsächlich, das scheint vernünftig zu sein

    
Budda 15.05.2011 01:50
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Was macht INSTALLED_APPS in Django eigentlich?