此动画在 FireFox 中有效，但在 Chrome 中无效。代码有什么问题？ [复制]

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>tag 复制它们：https://www.w3schools.com/graphics/svg_filters_intro.asp

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

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

svg {
  animation: gray 3s infinite linear;
}

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

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

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