JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350" viewBox="200 150">
    <rect id="mySvgArea" width="400" height="350" stroke="black" fill="lightgrey"></rect>
    <rect id="changeCurArea" x="100" y="100" width="200" height="150" stroke="red" fill="pink"></rect>
</svg>

JavaScript

var item = document.getElementById("changeCurArea");
item.addEventListener("mousedown", func, false);
item.addEventListener("mouseup", func1, false);

function func() {
    item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
}

function func1() {
    // item.setAttribute("cursor", "auto");
    item.setAttribute("style", "cursor: auto;");
}