Question

更新代码

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

此代码实现了所需的转换，但是当矩形旋转时，部分内容不会显示。

Answer 1

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

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

jsFiddle here - 如果您希望在所有浏览器中获得支持，请为keyframe制作-moz。

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

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

1 个答案: