SVG линии исчезают при уменьшении

Question

Я использую элементы ширины 1,5 для соединения элементов.Все это выглядит хорошо, но если изображение динамически уменьшено, чтобы показать больше диаграммы, то некоторые линии в конечном итоге исчезают в Firefox, но не в Chrome.Это проблема в поддержке Firefox SVG, или какая-то разница в настройках по умолчанию, которые я могу изменить?

Вместо того, чтобы представлять какой-либо код, я могу указать на пример в посте в блоге по адресу: https://parallax -viewpoint.blogspot.com / 2018/12 / далее-путешествия-оф-ходьба-boots.html .Прокрутите страницу до конца, и появится встроенное SVG-изображение «семейного дерева», в котором используется библиотека масштабирования JavaScript для динамического масштабирования диаграммы.

При настройке по умолчанию в Firefox отображаются не все строки- вероятно, зависит от того, попадают ли они на границу пикселя или нет.По мере того как изображение постепенно увеличивается, вы заметите, что в конечном итоге все линии будут отображаться.Сравните это с Chrome, где всегда отображаются линии.

Новая информация от поддержки Firefox: есть явное колебание "перерисовки" для всех преобразований (+ или -) из начальной позиции.После перерисовки линии заметно тоньше, и это говорит о некоторой ошибке округления.

Answer 1

Предложение использования двойных линий (одна с не масштабирующим штрихом и одна без) наталкивается на несколько проблем.Если линейные элементы имеют непрозрачность обводки меньше 1, то суперпозиция просвечивает.Кроме того, в SVG 1.1 представляется невозможным инкапсулировать рисование двух линий в одной группе / символе, если длины линий связаны, но не равны.Неравная длина необходима для предотвращения угловых промежутков, когда ортогональные линии не полностью доходят до углов.Использование calc () для настройки одной длины относительно длины 100% не работает с линейными элементами, потому что они используют пары координат, а не длины.Я пытался использовать прямоугольник вместо линии, но Firefox не поддерживал CSS-контроль над его шириной / высотой, чтобы использовать calc ().

Решением было простое использование непрозрачных линий (stroke-opacity = 1.0), предполагая, что исчезновение линий было связано с обработкой Firefox непрозрачности мазка <1,0.Может случиться так, что линии в конечном итоге исчезнут в минутных масштабах, но проблема, о которой сообщают, заключалась именно в том, что Firefox потерял их намного раньше, чем следовало, и сравнил ситуацию с Chrome (который работал нормально). </p>