Question

这个简单的动画适用于FireFox，但不适用于Chrome。

我认为他已遵守所有规则，但有些事情逃脱了我。

您认为Chrome的代码有什么问题？

由于

<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
                                xmlns='http://www.w3.org/2000/svg'
                                xmlns:xlink='http://www.w3.org/1999/xlink'>

<style type="text/css">

@keyframes gray {
  from { filter: grayscale(0);  -webkit-filter: grayscale(0);}
  to   { filter: grayscale(1);  -webkit-filter: grayscale(1);}
}

.box {
  animation: gray 3s infinite linear;
  -webkit-animation: gray 3s infinite linear;
}

</style>

    <g>
        <rect id="rectanguloDeFondo1" class="box" fill="green" width="120" height="245"/>
    </g>

</svg>

Answer 1

问题是过滤器无法应用于svg内的元素，但可以使用<filter>标记复制它们：https://www.w3schools.com/graphics/svg_filters_intro.asp

在您的情况下，快速解决方法是将过滤器应用于svg而不是.box：

＆＃13;

@keyframes gray {
  from { filter: grayscale(0);}
  to   { filter: grayscale(1);}
}

svg {
  animation: gray 3s infinite linear;
}

＆＃13;

<svg>
    <g>
        <rect id="rectanguloDeFondo1" class="box" fill="green" width="120" height="245"/>
    </g>
</svg>

＆＃13;

我删除了-webkit前缀，因为它完全支持chrome：http://caniuse.com/#search=animation

其他来源：Why don't CSS filters work on SVG elements in Chrome?

此动画适用于FireFox，但不适用于Chrome。代码中有什么问题？

1 个答案: