Transition SVG

by stopsatgreen

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="300">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="80" fill="white" />
  <text x="150" y="125" font-size="60" text-anchor="middle">SVG</text>
</svg>

CSS

rect, text { transition: 1s; }
svg:hover rect { fill: green; }
svg:hover text { transform: rotate(15deg); }

JavaScript

var svg = document.querySelector('svg');
svg.addEventListener('transitionend', function(e) {
    console.log(e);
});