nicht angemeldet
Zoomfunktion für SVG
Hallo Forum,
ich habe jetzt schon etliche Quellen (inkl. Forum) durchsucht, aber noch keine wirklich befriedigende Lösung gefunden:
Wie lässt sich möglichst einfach, aber komfortabel eine Zoomfunktion für SVG-Grafiken implementieren? Evtl. hat ja jemand zufällig ein Beispiel oder Code-Schnipsel parat :-)
Danke,
Erwin
-
Hallo Erwin,
Wie lässt sich möglichst einfach, aber komfortabel eine Zoomfunktion für SVG-Grafiken implementieren?
Ändere die Eigenschaft currentScale am Objekt document.documentElement.
<svg ... onload="evt.target.ownerDocument.documentElement.currentScale=2">...</svg>setzt den Zoom-Faktor auf 2.
Grüße,
Thomas-
Hallo Thomas,
<svg ... onload="evt.target.ownerDocument.documentElement.currentScale=2">...</svg>danke, das funktioniert wirklich wunderbar. Ich habe das Ganze mittlerweile ans Mausrad gebunden und kann so (ähnlich Google Maps) heraus- und hereinzoomen. Allerding stellt sich noch eine Frage: Der View-Port bleibt in diesem Fall immer gleich - wie kann ich diesen am einfachsten auf die aktuelle Mausposition setzen?
Danke,
Erwin-
Hallo Erwin,
Der View-Port bleibt in diesem Fall immer gleich - wie kann ich diesen am einfachsten auf die aktuelle Mausposition setzen?
evt.clientX bzw. evt.clientY abfragen und das viewBox-Attribut am svg-Element neu setzen. Evtl. helfen auch die aktuellen Verschiebungen (svgrootelement.currentTranslate.x bzw. svgrootelement.currentTranslate.y bei der Umrechnung). Hilfreich ist hierbei noch die am svg-Element angesiedelte Methode getBBox(), welche die Eigenschaften x, y, height und width direkt ermittelt.
Grüße,
Thomas-
Hi Thomas,
Super - Danke!
-
-
-