how to start and end path on hitting a circle

Question

I want to stop and start the path outside of the circle. There are many ways that I could imagine to get the result i want:

• I could add white background to the circles to hide the path
• I could calculate the position where the path exits the circle and use that as startpoint

But both solutions have problems (Way more difficult when having another background than one color (1) or slightly wrong start and end points when doing "lazy" math (2))

I could also imagine SVG solutions, but I don't know how to search for them on google, therefor I ask you:

• Start and end the path earlier by specific pixels (radius of circle)
• Cut the Path with SVG mask (Notice my circle has transparent or none fill)

 svg { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; } circle { position: absolute; stroke: black; fill: transparent; stroke-width: 2; cursor: pointer; } path { fill:none; stroke-width:2; stroke:black; } 

 <svg> <circle r="40" cx="187.33333333333331" cy="149" ></circle> <circle r="40" cx="374.66666666666663" cy="149" ></circle> <path d=" M 187.33333333333331 149 Q 281 92.80000000000001 374.66666666666663 149 " ></path> </svg> 

Answer 1

You could use dashes to hide the first and last parts of the line - since the line is curved, this is not completely precise.

 var path = document.getElementById("path") var l = path.getTotalLength() var r = 40 path.setAttribute("stroke-dasharray","0,"+r+","+(l-2*r)+","+r) 

 svg { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; } circle { position: absolute; stroke: black; fill: transparent; stroke-width: 2; cursor: pointer; } path { fill:none; stroke-width:2; stroke:black; } 

 <svg><circle r="40" cx="187.33333333333331" cy="149"></circle><circle r="40" cx="374.66666666666663" cy="149"></circle><path id=path d="M 187.33333333333331 149 Q 281 92.80000000000001 374.66666666666663 149"></path></svg>