Пользовательская маркировка SVG полилинии - PullRequest
Новая
       59

Пользовательская маркировка SVG полилинии

0 голосов
/ 01 октября 2018

У меня есть вопрос SVG.У меня есть ломаная линия, которая должна быть помечена так: enter image description here каждые N единиц.Я нарисовал его четырьмя линиями друг на друге, где верхняя часть 3 пунктирная, чтобы сформировать квадраты.

Проблема возникает, когда эта линия не такая прямая, как SVG нравится.В то время как WPF отлично справляется с этой логикой enter image description here SVG находится на мет enter image description here.

Я вроде понимаю, почему он ведет себя странно, и я готов к "нерешение "из коробки", но есть ли что-нибудь кроме вычисления координат и угла для каждого квадрата и их рисования отдельно?

Вот код SVG: 

    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M390.79549408998 139.785864051271L390.79549408998 139.785864051271L436.31875178912 93.2509784032736L453.516426919901 110.448653534055L489.935033079208 67.9602796815307L504.097824363387 79.0881871190941L510.167592056605 66.9486517326586L519.272243596424 73.0184194258763L525.342011289642 60.8788840394409L535.458290778333 65.9370237837866L544.562942318167 49.7509766018775L555.690849755731 54.8091163462232L558.725733602347 45.7044648064038L573.900152835384 54.8091163462232L787.353650046876" fill="none" stroke="#000000" stroke-width="7.0" stroke-dasharray="7, 35" stroke-dashoffset="0" />
        <path d="M390.79549408998 139.785864051271L390.79549408998 139.785864051271L436.31875178912 93.2509784032736L453.516426919901 110.448653534055L489.935033079208 67.9602796815307L504.097824363387 79.0881871190941L510.167592056605 66.9486517326586L519.272243596424 73.0184194258763L525.342011289642 60.8788840394409L535.458290778333 65.9370237837866L544.562942318167 49.7509766018775L555.690849755731 54.8091163462232L558.725733602347 45.7044648064038L573.900152835384 54.8091163462232L787.353650046876" fill="none" stroke="#000000" stroke-width="1.0" />
        <path d="M390.79549408998 139.785864051271L390.79549408998 139.785864051271L436.31875178912 93.2509784032736L453.516426919901 110.448653534055L489.935033079208 67.9602796815307L504.097824363387 79.0881871190941L510.167592056605 66.9486517326586L519.272243596424 73.0184194258763L525.342011289642 60.8788840394409L535.458290778333 65.9370237837866L544.562942318167 49.7509766018775L555.690849755731 54.8091163462232L558.725733602347 45.7044648064038L573.900152835384 54.8091163462232L787.353650046876" fill="none" stroke="#FFFFFF" stroke-width="5.0" stroke-dasharray="5, 37" stroke-dashoffset="-1" />
        <path d="M390.79549408998 139.785864051271L390.79549408998 139.785864051271L436.31875178912 93.2509784032736L453.516426919901 110.448653534055L489.935033079208 67.9602796815307L504.097824363387 79.0881871190941L510.167592056605 66.9486517326586L519.272243596424 73.0184194258763L525.342011289642 60.8788840394409L535.458290778333 65.9370237837866L544.562942318167 49.7509766018775L555.690849755731 54.8091163462232L558.725733602347 45.7044648064038L573.900152835384 54.8091163462232L787.353650046876" fill="none" stroke="#000000" stroke-width="2.0" stroke-dasharray="2, 40" stroke-dashoffset="-2.5" />
    </svg>

1 Ответ

0 голосов
/ 05 октября 2018

К сожалению, в SVG нет встроенной функциональности, позволяющей делать то, что вы хотите делать.Функциональность маркеров в SVG позволяет вам определять маркеры в начале, середине и конце пути, но не с интервалом в X единиц.

Вы можете разбить ваши пути на более мелкие пути по x единиц и поставить маркер в середине из них.Или вы можете вручную нарисовать квадратные маркеры в виде отдельных фигур в соответствующих местах.

...