Firefox getBoundingClientRect() не выполняет преобразование

Question

Я добавляю несколько SVG-путей на свою веб-страницу, но у меня возникают трудности с Firefox 43.0. Оказывается, что, когда я применяю transform: scale(0.1) на моем пути, Firefox не обновляет ограничивающую клиента прямоугольник (через getBoundingClientRect())

Вот скриншот моего пути до преобразования, и правильный ограничительный прямоугольник:

А вот с преобразованием применяется, с визуальной явно за пределами ограничительной рамки:

В отличие от этого, Chrome обновляет свою ограничительную рамку, как ожидалось. (Обратите внимание на ограниченных размеров.)

Эта проблема не присутствует на обеих Chrome или Edge. Я нашел this old bug from 2012, который говорит, что эта проблема была исправлена ​​в версии 12.0 и документации говорится:

Начиная с 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, но он учитывает атрибуты преобразования.