getBoundingClientRect () возвращает неправильные значения для вложенных SVG в Chrome - PullRequest
Новая
       17

getBoundingClientRect () возвращает неправильные значения для вложенных SVG в Chrome

0 голосов
/ 10 декабря 2018

У меня есть некоторые проблемы с размером элемента svg-dom, превышающим его заданный размер, если элемент внутри него больше или установлен в другое положение.Я сделал скрипку JS, где вы можете воспроизвести ее.Просто проверьте его и проверьте размер svg3.Если вы делаете это в chrome, он устанавливается на 500px на 500px, а в 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

...