文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么animateColor在这里失败了？

问为什么animateColor在这里失败了？
EN

Stack Overflow用户

提问于 2013-01-27 18:45:07

回答 1查看 118关注 0票数 0

下面的代码片段是从Essentials的SVG要点的示例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>

代码的目的是呈现一个圆圈，其填充和笔画颜色从#ff9黄色和灰色(resp.)开始，间隔时间为2s。到红色和蓝色。

当我使用Firefox访问这个页面时，我确实看到一个黄色的圆圈，它的轮廓是灰色的，但是颜色不会改变。

为了达到预期的效果

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

PS:当然，艾森伯格的书(2002)很古老，但是animateColor的语法仍然和他描述的一样。另外，FWIW，Firefox正确地显示了我从同一本书中尝试过的其他动画示例。

animation

colors

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-01-27 18:47:27

SVG规范中不推荐使用，不应该使用它。幸运的是，有一个简单的修复方法，只需用<animate>替换它

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14550842

复制

相似问题

问为什么animateColor在这里失败了？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么animateColor在这里失败了？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么animateColor在这里失败了？
EN