此動畫適用於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>標籤被複制：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前綴，因爲它完全支持鉻：http://caniuse.com/#search=animation

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