FirefoxのSVG変換-起源を廃墟に私のアニメーション

Question

の別の部分を修正私のアニメーションはFirefoxで壊れ、それが働いて得るために答えがあった。

svg * { transform-box: fill-box; } 

しかし、修正がまた私のCSSアニメーションの作業部を破りました。

#eye * { transform-box: none; } 

SVG部分を、それが台無しにされています：

<g id="eye"> 
    <path ...> 
    <ellipse ...> 
</g> 

はどのように特定の要素に対して変換ボックスを修正を上書きしない私は動作しませんので、のようなスタイリングを、削除しようとしましたか？

Answer 1

クラスを固定した後、指定必要SVGの要素（複数可）を与え、その代わりにCSSに

<svg> 
    <g id="eye"> 
     <path ...> 
     <ellipse ...> 
    </g> 
    <g class="brokenElement"> 
     <path ...> 
     <ellipse ...> 
    </g> 
</svg> 

そして全体SVGのグローバルとしてtransform-box: fill-boxを適用するCSSで

.brokenElement { transform-box: fill-box; } 

Answer 2

ジャックは、修正プログラムをグローバルに適用しない代わりに、クラスで修正が必要なSVGシェイプをターゲットにしています。私は6つの形のアニメーションを修正し、1つだけを台無しにしたので、グローバルな修正をしました。私は "transform-b​​ox：view-box"で元に戻りました。

svg * { transform-box: fill-box; } 
svg #pig-eye * {transform-box: view-box;} 

私はここで情報を見つけました： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box