Правильное перекрытие конечного маркера на пути
Обновлено изображение, включая (c)
Я использую следующий код в Javascript для создания конечного маркера (треугольной стрелки), прикрепленного к строке:
edge.marker('end', 10, 10, function (add) {
add.path('M2,2 L2,11 L10,6 L2,2').fill('black');});
Приведенный выше код генерирует стрелку, которая выглядит как (a) на прикрепленном изображении. Однако маркер (треугольник) удлиняет линию. Я хотел бы создать стрелку, как показано на (b), с заостренным концом маркера, выровненным с концом линии (и не удлиняющим его). Также он должен иметь вид не треугольника, как в (а), а стрелки, как в (б).
Я пробовал несколько вариантов кода, показанного в описании, с разными значениями, но все они удлиняют строку, что нежелательно для создаваемого изображения.
Указан в описании.Изображение фактического (а) и желаемого (б) изображения
@enxaneta, следующие значения атрибутов частично помогают решить проблему. Теперь я могу правильно выровнять наконечник стрелки, как показано на (c). Однако есть ли способ избавиться от основания стрелки, чтобы она отображалась как образец в (b)? edge.marker('end', 22, 13, function (add) { add.path('M2,2 L2,11 L10,6 L2,2').fill('none').stroke('black') ; }); См. рисунок в с.
@Learner Чтобы стрелка отображалась правильно, как на картинке b, попробуйте добавить мои рекомендации в ответ ниже.
Попробуйте использовать это 'M2,10 L10,6 L2,2' вместо 'M2,2 L2,11 L10,6 L2,2'
@enxaneta: Это сработало отлично. Спасибо. Я бы принял ваш ответ, но он отображается как комментарий и не дает мне возможности принять.
Спасибо @Ученик. Я добавил ответ, в котором я использую несколько других полезных атрибутов для <marker> Надеюсь, вам будет интересно.
FWIW, я считаю, что это будет работать только для горизонтальных линий, а не для путей в целом. refX и refY корректируются относительно конца пути; нет генерала refS который двигает маркер "назад/вперед" по кривой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
fill = "none"убираем черный цвет внутри стрелки..- добавить
stroke = "black" - Чтобы линии не меняли свою толщину, вы также можете использовать
атрибут
pathvector-effect = "non-scaling-stroke"
Этот ответ является результатом нескольких комментариев, которыми я обменялся с ОП. Чтобы разместить маркер в нужном вам месте пути, вы можете использовать атрибуты refX и refY для определения координат опорной точки маркера.
svg{border:1px solid; width:45%}
path{fill:none; stroke:black; stroke-width:2}<svg viewBox = "0 0 100 50">
<marker id = "arrow" markerWidth = "12" markerHeight = "12" refX = "10" refY = "6" orient = "auto" markerUnits = "userSpaceOnUse"
fill = "none" stroke = "black">
<path d = "M2,10 L10,6 L2,2" />
</marker>
<path d = "M20,25 H80" marker-end = "url(#arrow)" />
</svg>
Возможно, вам придется использовать
refXиrefYдля определения координат контрольной точки маркера. Если это не поможет, добавьте свой код