demo · v144

Animated SVG via CSS

The shape below is authored with fill="#ff0000" in markup — a presentation attribute. In SVG1 the only way to override it was inline style. SVG2 cascading lets a stylesheet rule beat the attribute, so you can hover, transition, and even @keyframes the fill property.

cascading: checking…

Hover the circle — the CSS :hover { fill: emerald } beats the inline fill="#ff0000" attribute. Pre-SVG2 it didn't.

the API

<svg><circle cx="200" cy="120" r="80" fill="red"/></svg>
<style>
  circle:hover { fill: green; }   /* SVG2: this wins */
  circle { transition: fill 0.4s; }  /* and you can transition it */
</style>

see also