JSFiddle - React, Tailwind, and code Playground

by wio_dude

HTML

<svg>
  <g fill="#0000" stroke="black">
    <g id="g" style="cursor: pointer">
      <circle cx="20" cy="20" r="15"></circle>
      <circle cx="60" cy="60" r="15"></circle>
    </g>
  </g>
</svg>

JavaScript

const g = document.getElementById('g');


g.addEventListener('mouseenter', (event) => {
	g.setAttribute('fill', 'white');
	g.setAttribute('stroke', 'green');
});

g.addEventListener('mouseleave', (event) => {
	g.removeAttribute('fill');
  g.removeAttribute('stroke');
});

g.addEventListener('click', (event) => {
	g.setAttribute('fill', 'green');
});