css - SVG 图像 'fill' 属性的 CSS 动画在 Safari 中不起作用

Question

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

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

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

感谢您的宝贵时间!

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