Как избавиться от нежелательных тонких границ в SVG?Разное поведение (IE, Chrome и т. Д.) - PullRequest
Новая
       21

Как избавиться от нежелательных тонких границ в SVG?Разное поведение (IE, Chrome и т. Д.)

0 голосов
/ 02 января 2019

Я создаю изображение SVG, состоящее из нескольких прямоугольников. Эти прямоугольники расположены рядом друг с другом, края "соприкасаются" друг с другом, некоторые браузеры (например, Chrome, Vivaldi) и конвертеры изображений отображают нежелательные крошечные линии между этими прямоугольниками. Между тем, некоторые другие браузеры (IE, Edge) отображают SVG желаемым образом.

Я проверил SVG в нескольких браузерах и в редакторе Inkscape (я экспортировал SVG в PNG, и строки также присутствовали).

Я могу решить проблему с добавлением небольшого перекрытия, но мне не нравится такое решение.

Это ошибка в библиотеках SVG, используемых в браузерах и Inkscape? Или я воспользуюсь какой-нибудь функцией SVG, чтобы исправить это?

Пример Chrome

Пример Inkscape

Пример ребра 

<svg height="10cm" viewBox="0 0 10 10" width="10cm" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="1" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="2" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="3" y="1"/>

    <rect fill="#167f81" height="1" opacity="1" width="1" x="1" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="2" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="3" y="2"/>

    <rect fill="#000000" height="1" opacity="1" width="1" x="1" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="2" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="3" y="3"/>   
</svg>

1 Ответ

0 голосов
/ 02 января 2019

Эти края являются результатом компромиссов, которые делают средства визуализации, когда границы не совпадают с пикселями экрана или точками принтера. Вы можете заявить 

shape-rendering="crispEdges"

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

Обратите внимание, что это подсказка, которую рендереры могут или не могут соблюдать.

Кроме того, некоторые рендеры сталкиваются с трудностями при выполнении процедур округления при работе с небольшими числами. Если вы умножите все размеры и позиции своих канатов на десять, и, следовательно, увеличите размер viewBox на тот же коэффициент, но оставите ширину и высоту <svg> неизменными, результаты могут улучшиться.

...