SVGグループのCSSアニメーション

Question

私がここで言及した質問とは異なり、私はJSでアニメーションエフェクトを取得しようとしています。私は、アニメーションフィルタで同じことを達成してうれしいですが、私はどのようにわかりません。

私の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); 
    } 
} 

Answer 1

どのブラウザでテストしていますか？すべてのブラウザがSVG要素のCSSフィルタをサポートしているわけではありません。それはSVGの子要素をここでは意味しています。

Firefoxはありますが、唯一のものかもしれません。

ルート<svg>要素に適用されたフィルタ（インライン展開されている）は、効果的にHTML要素として扱われるため、Chromeで動作します。

http://jsfiddle.net/strdyy77/9/

<g>要素をフィルタリングするために、あなたはSVG <filter>を使用する必要がありますが、これらのフィルタエレメントの値は、CSSでアニメーションすることはできません。