Я использую несколько разноцветных прямоугольников для создания визуализации SVG-данных. Это отлично работает, но иногда цвет фона проходит между прямоугольниками. Я просматриваю Chrome, но другие браузеры, похоже, так же затронуты.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
<rect x="110.5" y="10" height="100" width="100"
style="stroke:none; fill: #00cc00"/>
</svg>
В Chrome, если смещение x является целым числом, строка не отображается.
Я уверен, что могу избежать строк, делая прямоугольники немного большими, чем пространство, которое они должны занять. Но это похоже на взлом: есть ли идиома SVG или лучшая практика для достижения идеально выложенных плиткой форм без "затирки"?
Я также обеспокоен рендерингом производительности, потому что мои визуализации могут быть очень большими (скажем, 100 МБ XML.svg). Я хотел бы дать подсказки рендеринга вроде "ни одна из фигур в этом <g> не перекрывается"?
Это сглаживание при работе между формой и фоном. Если вы хотите отключить функцию shape-rendering = "crispEdges" для фигур. Вы можете либо установить это на элементах rect, либо на <svg>, в этом случае элементы rect наследуют его.
Возможно, вы сможете отрегулировать позиции линии, добавив 0,5 к координатам. Дополнительную информацию об этом см. В cairo FAQ.