Как создать изогнутый путь со стрелкой в ​​середине в SVG

I want to create a arrowhead in middle of curved path using SVG. Can someone please help me. below is the sample code of SVG

Здесь я пытаюсь создать четыре изогнутых пути. Я умею создавать кривые. но когда я пытаюсь использовать маркеры, он работает с маркером-началом и маркером-концом, тогда как маркер-середина не работает, так как это единственный путь. Есть ли способ разместить стрелку в середине дуги?

`<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<?xml version="1.0" standalone="no"?>
<?xml version="1.0"?>
<?xml version="1.0" standalone="no"?>
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           " stroke="green" fill="none" />
    <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           " stroke="red" fill="none"/>
    <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           " stroke="purple" fill="none"/>
    <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           " stroke="blue" fill="none"/>
</svg>
</body>
</html>`
Источник

1 ответ

Как вы видели, нет такого типа маркера, который это делает. Вы можете сделать это самостоятельно через JavaScript.

Используйте SVG DOM, чтобы определить общую длину пути через getTotalLength, а затем вызовите getPointAtLength с общей длиной пути / 2, чтобы выяснить положение средней точки.

Наконец нарисуйте все, что вы хотите в этой позиции. Если путь меняется, вам нужно обновить позицию псевдо-маркера.

Источник
Другие вопросы по тегам