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

変更にsvgにCSSからdiv。わたしにはできる。

それとも両方div and svg見たい場合は、単にdiv, svg { css code..}

例追加：http://jsfiddle.net/4ebv7jzd/1/