1
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

Here I'm trying to create four curved paths. I'm able to create curves. but when I try to use markers it is working with marker-start and marker-end whereas marker-mid is not working as it is single path. Is there a way we can place arrow in middle of the arc

`<!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>`
dinesh
  • 229
  • 1
  • 3
  • 13

1 Answers1

2

As you've seen there's no marker type that does this. You could do it yourself via javascript.

Use the SVG DOM to determine the total path length via getTotalLength and then call getPointAtLength with the total path length / 2 to find out the mid point position.

Finally draw whatever you want at that position. If the path changes you'd need to update the pseudo marker position.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242