svg Bild zoomen, schwenken und bearbeiten

Question

Ich habe eine SVG-Bild. Ich möchte zoomen, wenn die Maus scrollt und ich das Bild ziehen möchte. Ich kann es ziehen und zoomen, wenn es ein Bild ist. Aber ich möchte, dass das SVG-Bild zur weiteren Bearbeitung im Objekt ist.

<div id="pcontainer1" class="pancontainer"> <img src="abc.svg" id="abc_svg" data="abc.svg" width="900" type="image/svg+xml" height="900"/> </div> 

ich verwendet, um diese folgenden Skripte: - jquery.kinetic.min.js - jquery.mousewheel.min.js - imagepanner.js

die abc.svg zu zoomen. Es funktioniert gut. Aber wenn ich es wie ein Objekt wie folgt aus:

<div id="pcontainer1" class="pancontainer"> <object id="abc_svg" data="Corp_BluePrint_FACT_Accounting_updated.svg" width="900" height="900" type="image/svg+xml"> </object></div> 

die Zoom- und Schwenk nicht funktioniert, wenn ich es als als Objekt platzieren oben

Answer 1

svg-pan-zoom scheint für Sie eine gute Wahl zu sein. Es ist eine einfache Schwenk/Zoom-Lösung für SVGs in HTML. Ich habe mit dieser Bibliothek mit einer Reihe von Projekten gearbeitet und es funktioniert einfach wie ein Zauber.

Schauen Sie sich diese einfache demo an und erfahren Sie mehr auf ihrer GitHub-Seite.