SVG - Zoomen, Schwenken (Pan)

[Christopher]

Hallo,

ich habe eine Deutschland-SVG-Datei vorliegen. Diese moechte ich zu Ausschnitten in einer Seite einbinden (da die Karte an sich recht grosz ist). Der Benutzer soll mittels Scrollrad ran- und rauszoomen koennen, und mittels gedrueckter Maustaste den Viewport des SVGs bestimmen (also nach unten, oben, links oder rechts verschieben) koennen.

Vor einiger Zeit habe ich das bereits fuer eine Bildergalerie mit jQuery und ein paar Plugins umsetzen koennen (Bilder als BackgroundImage in einem DIV mit fester Groesze, und dann ueber CSS die BackgroundPosition bestimmen).

Bei dem SVG fehlt es mir akut jedoch noch an Vorstellungskraft, wie ich das Problem am Besten angehen kann.

Bereits bei der Einbindung des SVGs komme ich ins Gruebeln: Object, Embedded, IFrame? Ich denke letzteres waere fuer mein Vorhaben wohl am praktischsten.

Und kann ich mit JS ueberhaupt den Inhalt eines IFrames verschieben (also nicht einfach die Scrollbars, sondern durch ziehen des gedrueckten Mauszeigers)? Gibt es evtl. fuer das Zoomen chicke SVG-Eigenschaften?

Wenn mir hier einer ein paar Tips oder Anregungen geben koennte, waere ich sehr dankbar.

Grusz,
Christopher

[peter]

Hi

Und kann ich mit JS ueberhaupt den Inhalt eines IFrames verschieben (also nicht einfach die Scrollbars, sondern durch ziehen des gedrueckten Mauszeigers)? Gibt es evtl. fuer das Zoomen chicke SVG-Eigenschaften?

versuchs doch mal mit

setAttribute("transform","scale(...)");

statt ... natürlich den skalierungsfaktor einsetzen!

Gruß
Peter

[Christopher]

Hallo Peter,

danke fuer deine Antwort.

Ich habe in der Zwischenzeit mit der Kombination von SVGPan (+Patches) und der ViewBox ein gutes Ergebnis erreicht - es laeuft sowohl unter FF, als auch unter Safari und Chrome.
Die Bibliotheken sind waermstens zu empfehlen.

Grusz,
Christopher