Question

以下代码片段在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）。

当我使用Firefox访问此页面时，我看到一个带有灰色轮廓的黄色圆圈，但颜色永远不会改变。

为了达到预期的效果

我该如何更改上面的代码？

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

Answer 1

<animateColor>在SVG规范中已弃用，不应使用。幸运的是，只需将其替换为<animate>

即可轻松解决

为什么animateColor在这里失败？

1 个答案: