SVG Image Zoom and Drag Demo

In this tutorial, we will talk about how to zoom and drag svg.

For demo, please click [DEMO]

Additional Plugins Required

Explain:

  • Create SVG Group.
  • Add any svg images, texts or shapes inside group.
  • When mousewheel event was fired, change the scale variable based on wheel up/down, reset group transform scale
  • When drag event was fired, reset group transform translate

Notice:

  • You have to put any svg shapes, images etc into one specific svg group, otherwise, it wont be zoomed in/out together.
Advertisements

4 Comments

  1. How can I use a group if I load an SVG file with the svg.load command instead of loading an image like in your example?.

  2. var svg = $(‘#svgdiv’).svg(‘get’);
    var g = $(‘g’, svg.root())[0];

    $(g).bind(‘mousewheel’, function(event, delta) {

    }

    works fine for me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s