0

下面的代码片段是从 J Eisenberg 的SVG Essentials的示例 11-9 中稍作修改而提取的。

<!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>

代码的目的是呈现一个圆圈，其填充和描边颜色在 2 秒的时间间隔内从#ff9黄色和灰色 (resp.) 变为红色和蓝色 (resp.)。

当我使用 Firefox 访问此页面时，我确实看到了一个带有灰色轮廓的黄色圆圈，但颜色从未改变。

为了达到预期的效果

我必须如何更改上面的代码？



PS：当然，艾森伯格的书很旧（2002 年），但是 AFAICT 的语法animateColor仍然是他所描述的。此外，FWIW、Firefox 正确显示了我在同一本书中尝试过的其他动画示例。

4

1 回答 1

2

<animateColor>在 SVG 规范中已弃用，不应使用。幸运的是，有一个简单的修复方法只需将其替换为<animate>

于 2013-01-27T18:47:27.010 回答