Gire & transformar elementos SVG con un dedo-rotodrag-JS
| Autor: | asgordon |
|---|---|
| Views Total: | 1,192 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 24, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
rotodrag-JS es un arrastrar JavaScript amigable para móviles & rotar la biblioteca que le permite traducir y rotar objetos SVG usando eventos de ratón o táctiles.
Funcionamiento
Para empezar, incluya la biblioteca rotodrag-JS en la página HTML.
<script src="rotodrag.js"></script>
Agregue la clase CSS ' draggables ' al elemento SVG.
<svg class="draggables" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 150" version="1.1" id="svg4601" >
Añada la clase CSS ' arrastrable ' al grupo de elementos SVG y posicione el objeto SVG utilizando el atributo ' Transform '.
<g class="draggable" id="example" transform="translate(70,90)">
Personalice la biblioteca rotodrag-JS con los atributos ' Data-dragstyle ' y ' Data-slip-RADIUS ' de la siguiente manera:
<g class="draggable" id="example" transform="translate(70,90)" data-dragstyle="slippery" data-slip-radius="20" >
Registro de cambios
10/24/2018
- Se ha cambiado a transformaciones matriciales, se ha añadido la función x-y-Rotation
