Rotate & Transform SVG Elements With One Finger – rotodrag-js

Preview:

Description:

rotodrag-js is a mobile-friendly JavaScript drag & rotate library that enables you to translate and rotate SVG objects using mouse or touch events.

How to use it:

To get started, include the rotodrag-js library on the html page.

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

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

<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 element group and position the SVG object using 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"
>

Changelog:

02/14/2021

• Set style.touchAction to none to prevent Android scrolling

10/24/2018

• Changed to matrix transforms, added x-y-rotation function