SVG per Js zoomen

  • Hallo Forum! :)

    Ich programmiere gerade in HTML5 und steh nun vor einem kleinem (eher großen) Problem:

    <script ...>
    function zoom()
    {
    var karte = document.getElementByName("Karte");
    alert(karte.height); // selbst der einfache Zugriff funktioniert nicht
    }
    </script>

    <body>
    <p>
    <img name="Karte" src="*.svg" ... usemap="#landkarte">
    <map name="landkarte">
    <area ...href="#" onclick="zoom()">
    </map>
    </p>
    </body>

    Ich möchte also eine vektorbasierte Karte laden, die mit verweis-sensitiven Bereichen gekennzeichnet ist. Einige bereiche sollen neue Fenster öffnen, einige Bereiche (im späteren sind das dann Buttons) sollen aber in die Karte hineinzoomen ! Doch leider kann ich auf die SVG zugreifen, wie der alert-Test zeigt. Was kann ich machen, das ich auf das Bild zugreifen kann und später dann hineinzoomen???
    Vielen vielen Dank schon einmal im Voraus!

    Über Tipps bin ich sehr dankbar :)

  • ich wüsste nicht, dass sowas überhaupt "in echt" geht.
    du kannst zugreifen auf die merkmale des img-tags, aber mehr auch nicht,
    angenommen du "zoomst" die svg, was du machen müsstest wäre sowas wie einen clip-rect-bereich erstellen und dahinter mit verdecktem bild die größe ändern.

    quasi wie ein fenster wo man durchgucken kann. verweis-sensitive flächen bei zoom-aktionen kannste dann knicken, außer du hast fest definierte zoomstufen und hälst für jede stufe ein set area-koordinaten bereit.

    hab da schon konkrete ideen, aber leider nicht die zeit dir beispiele zu frickeln.

    mit jquery könntest du prima nen plugin schreiben, was diese ganzen aufgaben übernimmt :)

  • Unabhängig davon: es heißt nicht

    Code
    document.getElementByName("Karte");

    sondern

    Code
    document.getElementsByName("Karte");

    da mehrere Elemente einen Namen haben könnten. Wenn Du etwas eindeutiges haben willst, arbeite mit IDs und document.getElementById().