In this tutorial, we will talk about how to zoom and drag svg.
For demo, please click [DEMO]
Additional Plugins Required
- jQuery SVG Plugin: http://keith-wood.name/svg.html
- jQuery mouse wheel event plugin: http://brandonaaron.net/code/mousewheel/docs
- jQuery drag event plugin: http://threedubmedia.com
- 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
- Please refer: http://www.w3.org/TR/SVG/coords.html#TransformAttribute
- translate(<tx> [<ty>]), which specifies a translation by tx and ty. If <ty> is not provided, it is assumed to be zero.
- scale(<sx> [<sy>]), which specifies a scale operation by sx and sy. If <sy> is not provided, it is assumed to be equal to <sx>.
- When drag event was fired, reset group transform translate
- You have to put any svg shapes, images etc into one specific svg group, otherwise, it wont be zoomed in/out together.