Firefox getBoundingClientRect() nie uwzględnia transformacji

Question

Dodaję niektóre ścieżki SVG do mojej strony internetowej, ale mam problemy z przeglądarką Firefox 43.0. Wydaje się, że kiedy stosuje się transform: scale(0.1) na mojej ścieżce, Firefox nie aktualizuje obwiedni prostokąt klienta (poprzez getBoundingClientRect())

Oto zrzut ekranu z mojej ścieżce przed transformacji, a prawidłowa ograniczający prostokąt:

I to jest tutaj z transformaty stosowane, wizualny wyraźnie poza obwiedni:

W tym przypadku Chrome aktualizuje ramkę obwiedni zgodnie z oczekiwaniami. (Uwaga ograniczonego proporcji.)

Ten problem nie występuje w obu Chrome lub krawędzi. Znalazłem this old bug from 2012 który mówi problem został rozwiązany w wersji 12.0, a dokumentacja stwierdza:

Począwszy od Gecko 12,0 (Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9), efekt CSS przekształca jest uznawany przy obliczaniu prostokąt ograniczający elementu.

... co nie wydaje się być prawdą. W przypadku innych przeglądarek zmniejszałem swój krąg do 10% jego pierwotnego rozmiaru, a następnie obliczałem przesunięcie współrzędnych z prostokąta klienta, aby wyśrodkować je na pierwotnej pozycji w skali 100%. Ponieważ jednak prostokąt klienta nie jest aktualizowany po transformacji w Firefoksie, to psuje obliczenia.

Jak to obejść w Firefoksie?

Answer 1

Transformacje można ustawić za pomocą atrybutów np.

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

lub CSS, jak robisz. Używanie CSS to nowszy sposób na zrobienie tego; specyfikacja SVG 1.1 określa tylko przekształcenia atrybutów.

getBoundingClientRect doesn't take CSS transforms into account aktualnie w Firefoksie, ale uwzględnia atrybuty przekształcenia.