JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip">
      <circle cx="30" cy="30" r="20"/>
    </clipPath>
  </defs>

  <rect x="10" y="10" width="100" height="100" fill="white"
      clip-path="url(#myClip)"/>
</svg>

CSS

svg {
  border: 3px dashed #999;background-color:blue;fill:blue;
}
svg > rect:hover {
  fill: green;
}