Firefox getBoundingClientRect() berücksichtigt keine Transformationen

Question

Ich füge meiner Webseite einige SVG-Pfade hinzu, habe aber Schwierigkeiten mit Firefox 43.0. Es scheint, dass, wenn ich transform: scale(0.1) auf meinen Weg anwenden, Firefox nicht das begrenzende Client-Rechteck nicht aktualisiert (via getBoundingClientRect())

Hier ist ein Screenshot von meinem Weg, bevor die Transformation und das korrekte Begrenzungsrechteck:

Und hier ist es mit dem, mit dem visuellen deutlich außerhalb des Begrenzungsrahmens angewendet Transformations:

Im Gegensatz dazu aktualisiert Chrome hier seine Bounding Box wie erwartet. (Beachten Sie die eingeschränkten Proportionen.)

Dieses Problem entweder Chrome oder Edge nicht vorhanden ist. Ich habe this old bug from 2012 finden, die sagt, das Problem in der Version 12.0 wurde behoben, und die Dokumentation heißt es:

Ab Gecko 12.0 (Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9), verwandelt sich die Wirkung von CSS betrachtet wird, wenn die Berechnung Begrenzungsrechteck des Elements.

... was scheint nicht wahr zu sein. Für die anderen Browser habe ich meinen Kreis auf 10% seiner ursprünglichen Größe verkleinert und dann den Koordinatenversatz vom Clientrechteck berechnet, um ihn auf seiner ursprünglichen 100% Skalierungsposition zu zentrieren. Da das Client-Rechteck nach der Transformation in Firefox nicht aktualisiert wird, führt dies zu einer Verwirrung bei den Berechnungen.

Wie kann ich das für Firefox umgehen?

Answer 1

Transformationen können über Attribute festgelegt werden, z.

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

oder CSS wie Sie tun. Die Verwendung von CSS ist der neuere Weg, dies zu tun; Die SVG 1.1-Spezifikation spezifiziert nur Attributtransformationen.

getBoundingClientRect doesn't take CSS transforms into account derzeit auf Firefox, aber es berücksichtigt Transformationsattribute.