SVG `<path>` Неточность

Question

SVG `<path>` Неточность

1

Я использую D3.js для рисования сотен SVG <path> на холсте в соответствии с некоторыми вычислениями.

Вот фрагмент типичного SVG:

Когда я не даю каждому <path> штриху одного цвета, между фигурами есть много и много мелких промежутков. Однако, когда я добавляю удар, возникают другие недостатки, ниже.

Есть углы, которые не встречаются, формы, которые начинаются не в том месте, и в конечном итоге покрываются другими, пробелы, где вид фона или неправильная форма видны и т.д. Расхождения хуже при определенных уровнях масштабирования.

Кажется, у меня есть версия проблемы, описанная здесь, где ответчик сказал, что проблема связана с сглаживанием. Ответчик предложил добавить shape-rendering: crispEdges, но это на самом деле делает проблему намного хуже для меня и не удовлетворяет вопрос об этом вопросе. Добавление штриха устраняет большинство, но не все, пробелов между <path> s, но опять же, что вызывает другие проблемы.

Я также попробовал shape-rendering: geometricPrecision, но это не помогло.

Что я могу сделать, чтобы устранить пробелы между фигурами без создания дополнительных расхождений?

Randoms 09 июнь 2017, в 22:14

Источник

Теги:

javascript

d3.js

svg

geometry

precision

1 ответ

Ещё вопросы

Randoms · Accepted Answer · 2017-06-12T16-32-00.000Z

Хорошо, хорошо, что это не похоже на действительно отличное решение здесь.

Я понял, однако, что stroke-width может иметь значения меньше 1. Таким образом, я играл с различными фракциями до тех пор, пока большая часть промежутков между фигурами не была покрыта, но другие искажения были сведены к минимуму.

Я приземлился на stroke-width:.5.

Если кто-то найдет что-то еще, я с радостью приму это.