Fatal编程技术网
  • html/
  • Html 如何在关键帧动画中更改svg对象的填充

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

html css svg

Html 如何在关键帧动画中更改svg对象的填充,html,css,svg,css-animations,svg-animate,Html,Css,Svg,Css Animations,Svg Animate,更新代码 <!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> 第一次尝试 您的浏览器

更新代码

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

.style0{笔划：#FFFFFF；笔划斜接限制：10；填充：#231F20；
}.style0{
动画：mymove 5s无限；
-webkit动画：mymove 10s infinite；/*Safari和Chrome*/
-webkit变换原点：中心；
}
@-webkit关键帧mymove
{
0%，100%{-webkit变换：旋转（0度）；填充：#000000；}
25%{-webkit变换：旋转（90度）；填充：#78ab98；}
50%{-webkit变换：旋转（180度）；填充：#aa7454；}
75%{-webkit变换：旋转（270度）；填充：#123456；}
}
此代码实现了所需的变换，但当矩形旋转时，部分矩形不会显示。

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

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}
-如果您希望支持所有浏览器，请为
-moz
制作一个
关键帧

-没有旋转效果

更新的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;
}



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


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


-如果您希望支持所有浏览器，请为
-moz
制作一个
关键帧

-没有旋转效果

更新的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）尝试过，但没有成功。我看了你的JSFIDLE，它对我也适用，我复制了你的代码，但它不起作用。你们知道为什么吗？@nvncbl
fill
和
transform
属性都应用于
元素，但是
fill
对
元素没有影响，而且
fill
由于CSS的工作方式没有继承到svg文档中（注意：svg文档是一个单独的文档，与包含
的文档不同）。不起作用。我以前尝试过类似的方法，但结果相同。还有其他想法吗？@nvncbl您使用的是什么浏览器？josh，我使用的是chrome，尽管我已经尝试过ie（使用各自的css）没有成功。我查看了你的JSFIDLE，它对我也有效，我复制了你的代码，但它不起作用。你们知道为什么吗？@nvncbl
填充
和
转换
属性都应用于
元素，但是
填充
对
元素和
填充
没有影响>由于CSS的工作方式，不会继承到svg文档中（注意：svg文档是一个单独的文档，不同于包含
的文档）。可能重复的