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

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

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

Path without transform

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

Path with transform

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

Path with transform in Chrome

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

начиная с Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), эффект CSS-преобразований учитывается при вычислении ограничивающего прямоугольника элемента.

...что не похоже на правду. Для других браузеров я уменьшал свой круг до 10% от его исходного размера, а затем вычислял смещение координат от клиентского прямоугольника, чтобы центрировать его в исходном 100% - ном масштабе. Однако, поскольку прямоугольник клиента не обновляется после преобразования в Firefox, он испортит проведенные расчеты.

Как мне обойти это для Firefox?

1 ответов


преобразования могут быть заданы с помощью атрибутов, например,

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

или CSS, как вы делаете. Использование CSS-это более новый способ сделать это; спецификация SVG 1.1 указывает только преобразования атрибутов.

getBoundingClientRect не учитывает CSS-преобразования в настоящее время в Firefox, но он учитывает атрибуты преобразования.