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" width="200" height="150" stroke="red" fill="pink"></rect>
</svg>

JavaScript

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

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

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