GetBoundingClientRect () возвращает неправильные значения для вложенных SVG в Chrome
У меня возникают некоторые проблемы с размером элемента svg-dom, превышающим заданный размер, если элемент внутри него больше или установлен в другое положение. Я сделал скрипт js, где вы можете его воспроизвести. Просто осмотрите его и проверьте размер svg3. Если вы сделаете это в Chrome, он будет установлен на 500 пикселей на 500 пикселей, в firefox он будет установлен на заданный размер svg. Вот рабочий пример: https://jsfiddle.net/w1gftej0/17/ А вот код:
<div style = "width:200px;height:70px">
<div style = "width:100%;height:100%;">
<svg id = "svg1" width = "100%" height = "90%">
<rect height = "100%" width = "100%" fill = "#00001a"></rect>
<svg id = "svg2" width = "90%" height = "10%" x = "10%">
<rect height = "100%" width = "100%" fill = "#ff4d4d"></rect>
</svg>
<svg id = "svg3" width = "90%" height = "90%" x = "10%" y = "10%">
<rect height = "100%" width = "100%" fill = "#ff4d4d"></rect>
<line x1 = "0%" x2 = "500px" y1 = "25%" y2 = "25%" stroke = "#236ce0" />
<line x1 = "50%" x2 = "50%" y1 = "0%" y2 = "500px" stroke = "#236ce0" />
</svg>
<svg id = "svg4" width = "10%" height = "90%" y = "10%">
<rect height = "100%" width = "100%" fill = "#ff4d4d"></rect>
</svg>
</svg>
</div>
</div>
</div>Такое поведение вызывает у меня довольно много головной боли во время разработки, есть ли какие-либо исправления, которые заставляют chrome / edge вести себя как firefox? Я понимаю, что если все элементы внутри svg меньше, этой проблемы не существует. Однако с приложением, над которым я работаю, это полностью нарушает функциональность, если по какой-то причине элемент svg больше. (Я использую getBoundingClientRect для расчета положения мыши). Я хотел бы получить советы, как с этим справиться.
Это продолжение вопроса, который я задал около 2 месяцев назад: Высота вложенной ширины SVG, установленная в%, не работает в хроме или краю
редактировать:
Возможно, ошибка, о ней сообщается здесь: https://bugs.chromium.org/p/chromium/issues/detail?id=914324
Возможно, вам придется дополнительно объяснить, что вы считаете неправильным. Если я изменю атрибуты width и height для svg3 с помощью инспектора, я увижу тот же результат как в Firefox, так и в Chrome.
@PaulLeBeau Я расширил пример в скрипте, чтобы он записывал размер на консоль. Для меня это 500/500 в хроме и 180 / 56,69 в firefox.
@Paulie_D Я не уверен, что понимаю, как вы хотите, чтобы я кодировал размеры. Насколько я знаю (довольно новый для svg) окно просмотра контролирует то, что видно внутри области просмотра, моя проблема в том, что элемент svg (viewport) становится больше, чем установленный размер в chrome, но не в firefox.
@Haldor Я не вижу никаких изменений в вашем фрагменте или связанной скрипке.
@PaulLeBeau исправил ссылку
Похоже на ошибку в Chrome. Он отображается правильно, просто кажется, что он возвращает неправильные значения из getBoundingClientRect(). Сообщите об ошибке на crbug.com
Если да, пожалуйста, разместите здесь ссылку об ошибке для будущих читателей.
@PaulLeBeau, хорошо, это можно увидеть по-другому, если вы проверите элемент и посмотрите на контур. Об этом сообщается на crbug.com. Спасибо.
Наблюдал такой же баг: он как-то связан с экранами. У меня два разных экрана: на одном экране все работает нормально, на главном экране getBoundingRect выдает ошибку с соотношением 1,25 по обеим осям (и нет, два экрана не имеют такой разницы в размерах рациона)
Обычно не рекомендуется использовать высоту / ширину для определения размеров SVG .... для этого и предназначен
viewbox.