SVG組的CSS動畫

與我在這裏提到的問題不同，我試圖用CSS獲得動畫效果，因爲我將它應用於JS。我很高興用動畫過濾器實現同樣的效果，但我不知道如何。SVG組的CSS動畫

爲什麼我的CSS動畫不能在SVG組上工作？如果我將它應用於SVG本身，它的確行得通。如何在這裏通過示例在SVG中使用CSS對組進行動畫處理。 FIDDLE here too.

.pulse { 
    background: blue; 
    width: 400px; 
    height: 100px; 
    animation-name: example; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
} 

@keyframes example { 
    0% { 
    filter: brightness(1); 
    filter: contrast(1); 
    -webkit-filter: brightness(1); 
    -webkit-filter: contrast(1); 
    } 
    50% { 
    filter: brightness(0.1); 
    filter: contrast(0.1); 
    -webkit-filter: brightness(0.1); 
    -webkit-filter: contrast(0.1); 
    } 
    100% { 
    filter: brightness(1); 
    filter: contrast(1); 
    -webkit-filter: brightness(1); 
    -webkit-filter: contrast(1); 
    } 
}

來源

2017-09-06 TheRealPapa

如果您想在svg元素上使用動畫，請檢查https://css-tricks.com/guide-svg-animations-smil/。它可能會幫助您 –

嗨@Ovidiu Unguru感謝您的鏈接。已經閱讀並認爲它不僅僅是我想要達到的目標。我有其他類應用到'g'元素，所以我不明白爲什麼這個不起作用。 – TheRealPapa

[動畫SVG組]的可能重複（https://stackoverflow.com/questions/41872057/animating-an-svg-group） – LuudJacobs