JSFiddle - React, Tailwind, and code Playground

by Andy Kuds

HTML

<script src="http://svgjs.com/javascripts/svg.js"></script>
<script src="http://svgjs.com/javascripts/svg.draggable.js"></script>
<div id="canvas"></div>

JavaScript

// create canvas
var draw = SVG('canvas')

// create group and make draggable
var group = draw.group().draggable()

// add callbacks
group.dragstart = function() {}
group.dragend = function() {}

// add background
var back = group.image('http://distilleryimage5.s3.amazonaws.com/aa5f9a7cc3c811e2969522000a9f14e8_7.jpg', 200, 200)

// add button
var button = group.image('http://distilleryimage8.s3.amazonaws.com/87a5e472bbd111e282b422000a1f9ab7_7.jpg', 50, 50).move(125, 125).style('cursor', 'pointer')

// add button click
button.click(function(){
  console.log('clicked')
})