SVG图像'填充'属性的CSS动画在Safari中不起作用

Question

我正在尝试为SVG图像的特定部分的填充颜色创建CSS动画。为此，我使用了关键帧和一个＆＃39; id＆＃39;链接动画和SVG矩形。你可以在这里看到一个有效的例子：

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

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

谢谢你的时间！

Answer 1

您可以使用animate元素。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;