JSFiddle - React, Tailwind, and code Playground

HTML

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.draggable.js@latest/dist/svg.draggable.min.js"></script>

JavaScript

// create canvas
var draw = SVG().size(200, 200).addTo('#canvas')

// pattern of checkerboard
var patt = draw.pattern(20, 20)
patt.rect(20, 20).fill({color: '#fff'})
patt.rect(10, 10)
patt.rect(10, 10).move(10, 10)

// nested svg document
var nested = draw.nested()

// rect + pattern
nested.rect(80, 80).attr({
	fill: patt
})

// drag on
nested.draggable()



/*
// this works too, but its slow:

// group + draggable
var group = draw.group().draggable()

// move handler
group.on('dragmove', (e) => {
  const {x, y} = e.detail.box
  patt.move(x, y)
})

// rect with pattern
var r = group.rect(80, 80).attr({
	fill: patt
})


// not helping:
patt.attr({
  patternContentUnits: 'objectBoundingBox',
  patternUnits: 'objectBoundingBox',
})

*/