Hallo SVG'ler,
Ich möchte ein SVG-Objekt, dass in ein HTML-Dokument eingebettet ist durch Ziehen mit der Maus vergössern, ähnlich wie in einem Grafikprogramm.
Ich konzentriere mich zunächst nur auf die Funktionsfähigkeit im FF.
Erklär das noch ein wenig genauer. Wo möchtest du du ziehen? An den Ecken bzw. Rändern? Dann benötigst du keinen Event auf dem Object Element.
1.) SVG lässt sich im Firefox nur mit dem <object>-Tag einbetten. Mit dem <embed>-tag funktioniert es bei mir nicht. Mach ich hier etwas falsch?
Doch geht beides. Achte darauf, dass beim embed-Element die Datei nicht mit dem Attribut data sondern mit dem Attribut src eingebunden werden muss.
Über die Verwendung von object bzw. embed und die unterschiedlichen Vor- und Nachteile findest du bei den folgenden Quellen weitere Infos:
Vor- Nachteile
Kommunikation mit Javascript
Authoring Guidelines
Alternative: SVG mit JavaScript erstellen (Libraries)
2.) Die Ereignishandler funktionieren im object-Tag, also auf dem SVG, nicht. Ich muss ein zusätzliches <DIV> über die SVG drüberlegen.
Nein das funktioniert nicht, da hast du recht. Das SVG-Objekt "empfängt" den Klick nicht. Was du aber machen könntest ist den Klick _im_ SVG Dokument selbst abzufangen und dann (mit parent.) auf das einbindende Dokument zuzugreifen.
Siehe aber meine Eingangsfrage. Muss das überhaupt so funktionieren?
3.) Ich muss die ursprüngliche Grösse (zumindest die Breite, bei mir 155px) des SVG kennen und im object-Tag angeben. Ansonsten kann es passieren, dass der FF die Grafik mit Scrollbalken anzeigt. Kann man das umgehen?
Wenn du im Element <svg> relative Grössen (z.B. 100%) für Breite und Höhe verwendest, sollte sich das SVG Object perfekt anpassen.
4.) Die Änderung der Breite mittels der Javascript-Funktion tut es nicht.
Wie kann ich die Grösse der SVG denn nun verändern?
Doch es funktioniert. Bei einem Klick auf das DIV verändert das (dahinterliegende!) SVG-Objekt seine Breite.
Grüsse
Siramon,
ja der Penner aus Nr. 14