用于SVG不工作的CSS动画

Question

我明白这个动画应该像在HTML元素上一样工作在SVG上，但显然我错了！

如何在SVG上使用CSS实现这种效果？ Fiddle here。

div { 
    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); 
    } 
} 

Answer 1

将div从css更改为svg。这个对我有用。

或者，如果你想同时看到div and svg，只需添加div, svg { css code..}

例子：http://jsfiddle.net/4ebv7jzd/1/