JSFiddle - React, Tailwind, and code Playground

by Shaojiang Cai

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.resize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.draggable.min.js"></script>
<div id="canvas"></div>

CSS

#canvas {
  cursor: move;
}

circle {
  cursor: nwse-resize;
}

.svg_select_boundingRect {
  pointer-events: none !important;
  /* important added */
}

JavaScript

const pen = new SVG('canvas').size(500, 500);

const rect = pen.rect(100, 100).fill('orange');

// Make it draggable
rect.draggable();

// Make it resizable, but then not draggable
// If comment out this line, it's draggable
rect.selectize().resize();

pen.remove();