如何在SVG中间创建带有箭头的弯曲路径 [英] How to create curved path with arrow head in middle in 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
这里我试图创建四个弯曲的路径.我能够创建曲线.但是当我尝试使用标记时，它正在使用标记开始和标记结束，而标记中则不起作用，因为它是单一路径.有没有办法把箭头放在圆弧的中间
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>`
推荐答案
正如您所见，没有标记类型可以做到这一点.您可以通过 javascript 自己完成.
As you've seen there's no marker type that does this. You could do it yourself via javascript.
使用 SVG DOM 确定通过 getTotalLength 的总路径长度然后使用总路径长度/2 调用 getPointAtLength 以找出中点位置.
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.
这篇关于如何在SVG中间创建带有箭头的弯曲路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
