如何在关键帧动画中更改 svg 对象的填充答案

【问题标题】：how to change fill of svg object in keyframes animation如何在关键帧动画中更改 svg 对象的填充
【发布时间】：2013-10-25 00:42:37
【问题描述】：

更新代码

<!DOCTYPE>
<html>
<head>
</head>
<body>
<h1> first svg try</h1>
<object type="image/svg+xml" data="svg.svg" id="img">Your browser no support</object>
</body>
</html>

使用我的 svg 文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="215.069px" height="121.917px" viewBox="0 0 215.069 121.917" enable-background="new 0 0 215.069 121.917" xml:space="preserve"><style>.style0{stroke: #FFFFFF;stroke-miterlimit:  10;fill:    #231F20;


}.style0 {
animation:mymove 5s infinite;
-webkit-animation:mymove 10s infinite; /* Safari and Chrome */ 
-webkit-transform-origin:center;
}

@-webkit-keyframes mymove
{
0%, 100%   {-webkit-transform: rotate(0deg); fill: #000000;}
25%  {-webkit-transform: rotate(90deg); fill: #78ab98;}
50%  {-webkit-transform: rotate(180deg); fill: #aa7454;}
75%  {-webkit-transform: rotate(270deg); fill: #123456;}
}
</style><style>
</style><rect width="215.1" height="121.9" class="style0"/></svg>

这段代码实现了所需的转换，但是当矩形旋转时，它的一部分没有显示出来。

【问题讨论】：

How to apply a style to an embedded SVG?的可能重复

标签： html css svg css-animations svg-animate

【解决方案1】：

将动画添加到.style0，而不是#img。

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}

jsFiddle here - 如果您想支持所有浏览器，请为 -moz 创建一个 keyframe。

jsFiddle - 没有旋转效果。

更新的 CSS

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}
@-webkit-keyframes mymove {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        fill: #000000;
    }
    25% {
        -webkit-transform: rotate(90deg);
        fill: #78ab98;
    }
    50% {
        -webkit-transform: rotate(180deg);
        fill: #aa7454;
    }
    75% {
        -webkit-transform: rotate(270deg);
        fill: #123456;
    }
}
.style0 {
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
    fill: #231F20;
}

【讨论】：

没用。我之前尝试过类似的东西，结果相同。还有其他想法吗？
@nvncbl 你用的是什么浏览器？
josh，我正在使用 chrome，虽然我已经尝试使用 ie（及其各自的 css）但没有成功。
我查看了您的 jsfiddle，它也适用于我，我复制了您的代码，但它不起作用。你们知道为什么吗？
@nvncbl fill 和 transform 属性都应用于<object> 元素，但fill 对<object> 元素和fill 没有影响由于 CSS 的工作方式，它不会被继承到 svg 文档中（注意：svg 文档是一个单独的文档，与其中包含 <object> 的文档不同）。