Firefox getBoundingClientRect（）は変換を考慮していません

Question

WebページにSVGパスを追加していますが、Firefox 43.0に問題があります。

：私が私のパスに transform: scale(0.1)を適用すると、Firefoxがここ

変換する前に、私の道のスクリーンショットだし、正しい外接矩形（ getBoundingClientRect()経由）の境界クライアント矩形を更新しないことが表示されます

そして、ここで明確にバウンディングボックスの外側のビジュアルと、適用される変換である：

これとは対照的に、Chromeは予想通りにバウンディングボックスを更新しています。 （制約の割合に注意してください。）

この問題は、クロムまたはエッジのいずれかの上に存在しません。私は、問題は、バージョン12.0で修正されたと言いたthis old bug from 2012見つけた、およびドキュメントの状態：

Geckoの12.0から始まっ

（Firefoxの12.0/Thunderbirdの12.0/SeaMonkeyの2.9）、CSSの効果は変換を計算するときに考慮されます要素の境界矩形

...これは真実ではないようです。他のブラウザでは、円を元のサイズの10％に縮小してから、クライアント矩形から座標オフセットを計算して元の100％スケールの位置に配置しました。しかし、クライアント矩形はFirefoxでの変換後に更新されないので、計算が乱れてしまいます。

Firefoxでこれを回避するにはどうすればよいですか？

Answer 1

属性を使用して変換を設定できます。

<path transform="scale(0.1)" d="..."/> 

またはCSSです。 CSSを使うのが新しい方法です。 SVG 1.1仕様では属性変換のみが指定されています。

getBoundingClientRect doesn't take CSS transforms into account現在Firefox上にありますが、変換属性を考慮しています。