Есть SVG Path. Он генерируется по данным пользователя и может принимать вид как кривой, как видно на скрине, так и простой линии.
Path генерируется в d3
через d3.line(...)
.
Нужно реализовать возможность отображения маркеров на данной линии.
Проблема в том, что эти маркеры должны идти друг рядом с другом с некоторым отступом.
В данный момент, при моей реализации, их количество ограничено количеством опорных точек кривой.
Как это решить и сделать так, чтобы они отображались "плотно" друг к другу?
Может стоит использовать другой подход?
<svg style="width: 500px; height: 500px;">
<defs>
<marker id="marker-1" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="10" markerHeight="10" orient="auto">
<line data-v-464173b1="" data-v-f620f4f0="" x1="0" x2="0" y1="10" y2="0" stroke="red" stroke-width="5px"></line>
</marker>
</defs>
<path fill="none" stroke="red" stroke-linecap="round" marker-mid="url(#marker-1)" stroke-width="5px" stroke-dasharray=""
d="M54.95397970441209,68.0743026828044L57.07970401893456,85.59202972259588C59.20542833345703,103.10975676238736,63.45687696250196,138.14521084197034,81.4214401648379,161.00276942403795C99.38600336717384,183.86032800610556,131.0636811428008,194.53999109065788,147.94743134236452,181.52897426519155C164.83118154192823,168.5179574397252,166.92100416542874,131.81626070424022,183.97830259519844,115.13579097794174C201.0356010249681,98.45532125164327,233.06037526100693,101.7960785345313,249.07276237902633,103.4664571759753L265.08514949704573,105.13683581741931"></path>
</svg>