CODEWITHSUNDEEP
animationcolorssvg
kjo
kjo

Reputation: 35321

Why does animateColor fail here?

The following snippet is lifted with minor modifications from example 11-9 of J Eisenberg's SVG Essentials.

<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="300" height="200" viewBox="0 0 300 200">
      <circle cx="60" cy="60" r="30"
       style="fill: #ff9; stroke: gray; stroke-width:10;">
        <animateColor attributeName="fill"
         begin="0.5s" dur="2s" from="#ff9" to="red" fill="freeze"/>
        <animateColor attributeName="stroke"
         begin="0.5s" dur="2s" from="gray" to="blue" fill="freeze"/>
      </circle>
    </svg>
  </body>
</html>

The code's intent is to present a circle whose fill and stroke colors change, over an interval of 2 s., from #ff9 yellow and gray (resp.) to red and blue (resp).

When I visit this page with Firefox, I do see a yellow circle with a gray outline, but the colors never change.

In order to achieve the intended effect

how must I change the code above?



PS: Granted, Eisenberg's book is pretty old (2002), but AFAICT, the syntax for animateColor is still as he described it. Also, FWIW, Firefox correctly displays other animation examples I have tried from the same book.

Upvotes: 0

Views: 138

Answers (1)

Robert Longson
Robert Longson

Reputation: 124169

<animateColor> is deprecated in the SVG specification and should not be used. Fortunately there's an easy fix just replace it with <animate>

Upvotes: 2

Related Questions