Высота ширины вложенного SVG, заданная в%, не работает в Chrome или ребре - PullRequest
Новая
       25

Высота ширины вложенного SVG, заданная в%, не работает в Chrome или ребре

0 голосов
/ 18 октября 2018 

<div>
        <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="2700px" y1="25%" y2="25%" stroke="#aa001a"/>
                    </svg>
                    <svg id="svg4" width="10%" height="90%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                </svg>
            </div>
        </div>
    </div>

У меня есть некоторые svg, я хочу установить размер относительно их родительского svg.Я установил свойства размера с помощью встроенной высоты% / ширины%, и это отлично работает в Firefox.Вот упрощенный пример структуры кода, которая отображается как в Chrome, так и в Firefox (идентично при чтении), этот код работает как положено в Chrome, если вы просто откроете его в HTML-файле: 

    <div>
        <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>
                    </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, он учитывает значения x и y в # svg3, но размер устанавливается намного больше, даже больше, чем body.Прямоугольник внутри svg3 работает как положено (заполняет только указанный размер%).Я нашел эти два вопроса:

Перевод SVG, кажется, ведет себя по-разному в Chrome / Chromium

вложенный svg игнорирует преобразование в Chrome и Opera

Они относятся к преобразованиям, а не к настройке размера.Странная часть заключается в том, что прямоугольник внутри svg3 только заполняет предоставленное пространство (как и ожидалось), но размер фактического svg, когда вы проверяете его, намного больше.Я использую vuejs, но так как код, отображаемый в браузере, соответствует ожиданиям и работает так, как задумано в Firefox, я считаю, что проблема не в vuejs.

Любая помощь / советы приветствуются.

РЕДАКТИРОВАТЬ: Возможно, я мог бы сказать это лучше, но код выше работает хорошо для меня (в том числе и в Chrome).Структура кода такая же, как когда я проверяю исходный код в Chrome.Вот альбом изображений, показывающих то, что я вижу в своем проекте.Первое и последнее изображения, вероятно, наиболее важны, поскольку они показывают, что прямоугольник со 100% шириной и высотой имеет правильный размер, но последнее изображение показывает, что элемент svg больше этой области.https://imgur.com/a/ozJqEgB

РЕДАКТИРОВАТЬ 2: Я смог выяснить, что стало причиной моих проблем, с моей стороны это была довольно простая ошибка, когда у меня были элементы SVG, которые мы пишем больше, чем сама SVG.Вот отредактированная версия последнего примера: 

    <div>
        <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, svg3 будет квадратом 500 на 500 пикселей, а в Firefox - 180 на 56,7 пикселей.Ожидается ли это несоответствие?Это проблема, если вы не хотите, чтобы события кликов относились к SVG, так как размер и верхний / левый поля не одинаковы в разных браузерах.

...