1

更新代码

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

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

4

1 回答 1

1

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

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

jsFiddle 这里- 如果你想支持所有浏览器，请创建一个keyframefor-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;
}
于 2013-10-22T21:30:43.607 回答