<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <circle cx="100" cy="50" r="30" class="circle"/>
</svg>
.circle {
  fill: red;
  transition: fill, 0s, 3s;
}

.circle:hover {
  fill: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.