JavaScript Library To Drag And Rotate SVG With One Finger | rotodrag-js

How to make use of it:

To get began, embody the rotodrag-js library on the HTML web page.

<script src="rotodrag.js"></script>

Add the CSS class ‘draggables’ to the SVG component.

<svg class="draggables"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 280 150"
     version="1.1"
     id="svg4601"
>

Add the CSS class ‘draggable’ to the SVG component group and place the SVG object utilizing the ‘transform’ attribute.

<g class="draggable" id="example" transform="translate(70,90)">

Customize the rotodrag-js library with ‘data-dragstyle’ and ‘data-slip-radius’ attributes as follows:

<g class="draggable" 
   id="example" 
   transform="translate(70,90)" 
   data-dragstyle="slippery" 
   data-slip-radius="20"
>

Rotate & Transform SVG Elements With One Finger, rotodrag-js Plugin/Github

See Demo And Download