用於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/