SVG 图像“填充”属性的 CSS 动画在 Safari 中不起作用答案

【问题标题】：A CSS animation of a SVG Images 'fill' property not working in SafariSVG 图像“填充”属性的 CSS 动画在 Safari 中不起作用
【发布时间】：2014-12-30 00:35:17
【问题描述】：

我正在尝试为 SVG 图像的特定部分的填充颜色创建 CSS 动画。为此，我使用关键帧和“id”来链接动画和 SVG 矩形。你可以在这里看到一个工作示例：

http://jsbin.com/deyaqo/3/

这适用于除 Safari 之外的大多数浏览器（也许还有 IE，我不知道）。我不确定这是因为我的实施还是由于缺乏该供应商的支持。

感谢您的宝贵时间！

【问题讨论】：

你试过用animateColor代替@keyframes吗？
对不起，我缺乏知识，你的意思是SVG元素吗？
是的 svg 元素。
animateColor 已被弃用。始终使用 animate 而不是 animateColor。
对于 IE 你可以使用 fakeSmile

标签： css svg

【解决方案1】：

您可以改用animate 元素。

<svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051">
  <rect id="laukia"
        x="56.74"
        y="23.094"
        width="17.895"
        height="2.932"
        fill="black" />
  <animate xlink:href="#laukia"
           attributeType="XML"
           attributeName="fill"
           from="red" to="rosybrown"
           values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown"
           repeatCount="indefinite"
           dur="5s" />
</svg>

【讨论】：

谢谢！不错，请问如何添加 IE 支持？
正如@Robert Longson 指出的，您可以使用FakeSmile 来支持IE。
@Merqurio - 不客气。 :)