FirefoxのclipPathでtranslateYをアニメーション化する

Question

次のclipPathはFirefoxではなくアニメーション化するのはなぜですか？ SVG 1.1では

http://jsfiddle.net/H8S3k/67/

.graph { 
    transform: translateY(150px); 
    animation: 2s ease-out 0s normal none infinite popup; 
} 
@keyframes popup { 
    0% { 
    transform: translateY(50px); 
    } 
    50% { 
    transform: translateY(0px); 
    } 
    100% { 
    transform: translateY(50px); 
    } 
} 

Answer 1

、特定の属性のみをCSSでスタイル可能であると見なされました。これらの特定の属性セットは「プロパティ」と呼ばれていました。あなたはここで指定されたプロパティのリストを見ることができます：

https://www.w3.org/TR/SVG/propidx.html

transformたものの一つではないので、それはCSSでスタイルすることはできません。

しかし、まだファイナライズされていないSVG 2では、すべてのSVG属性はおそらくスタイル付け可能になります。 Chromeはこれを実装し始めましたが、Firefoxはまだありません。そのため、あなたの例はFirefoxではなくChromeで動作します。