CODEWITHSUNDEEP
javascriptjquerysvg
user6175763
user6175763

Reputation: 11

svg image zoom , pan and edit

I have an svg image. I want to zoom when the mouse scroll and I want to drag the image. I am able to drag and zoom it when it is an image. But I want the svg image to be in the object for further editing.

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

I used these following scripts: - jquery.kinetic.min.js - jquery.mousewheel.min.js - imagepanner.js

To zoom the abc.svg. It is working fine. But If i place it as an object like this:

<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>

the zoom and pan is not working when i place it as an object as above

Upvotes: 1

Views: 5010

Answers (1)

XYZ
XYZ

Reputation: 27397

svg-pan-zoom seems to be a good option for you. It is a simple pan/zoom solution for SVGs in HTML. I have worked with this lib with a number of projects, and it just works like a charm.

Check out this simple demo 404 and find out more on their GitHub page.

Upvotes: 1

Related Questions