Я работаю с большим количеством сложных файлов SVG, в которых фигуры разделяют некоторые точные пути (т.е. они располагаются по краям) после векторизации из растрового изображения. Эти формы определяются путями, имеют насыщенные цвета, но не имеют контуров.
На следующем шаге моего рабочего процесса это создает краевой артефакт. Я обнаружил, что лучший способ решить эту проблему - это вручную перемещать узлы, чтобы было небольшое (например, 1px) перекрытие ребер. Мне нужно выполнить этот процесс, чтобы в процессе разработки было около 1 000 фигур на более чем 30 иллюстрациях, поэтому я хотел бы автоматизировать процесс для своего рабочего процесса. Я не уверен, что это можно сделать с помощью плагина редактора SVG или, возможно, приложения javascript.
Поскольку фигуры являются сложными и иногда имеют полые части, каждый узел необходимо перемещать на перпендикуляре от заполненного края.
Конечная цель состоит в том, чтобы все существующие участки от края до края имели минимальное перекрытие для устранения краевого артефакта.
Пример форматирования формы SVG:
<path
style="fill:#ab1d0f;fill-opacity:0.65151511;stroke:none;stroke-width:0.75px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 470.69864,588.16878 C 455.52231,786.44675 423.79624,835.14131 590.12728,799.75617 640.3406,789.07383 635.02232,779.84655 760.89356,718.61568 930.36806,636.17371 742.59028,617.50816 658.00951,552.62236 572.1577,486.76149 535.54865,393.28533 504.21382,416.85787 c -68.79903,51.75605 -26.87605,84.5711 -33.51518,171.31091 z"
id="shape1"/>
Пример предварительно обработанного SVG:
На изображении выше:
- Есть 4 заполненных фигуры (розовый, красный, черный, желтый)
- Выбрана черная фигура, и мы видим четыре узла
- Мне нужно переместить каждый узел наружу с его заполненной стороны
- Каждый узел перемещается в направлении зеленой стрелки
После обработки:
- Выбрана желтая фигура, и мы видим, что узлы теперь перекрываются с краем черной фигуры.
- при наведении курсора мыши на розовый также видно, что его край перекрывается