如何在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

这里我试图创建四条曲线路径。我可以创建曲线。但是当我尝试使用标记时，它正在使用标记开始和标记结束，而标记中间不起作用，因为它是单一路径。有没有办法我们可以把箭头放在圆弧的中间如何在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>`

来源

2015-10-19 dinesh

正如你所看到的那样，没有这种标记类型。你可以通过javascript自己做。

使用SVG DOM确定the total path length via getTotalLength，然后用总路径长度/ 2调用getPointAtLength以找出中点位置。

最后在该位置绘制任何你想要的。如果路径发生变化，您需要更新伪标记位置。

来源

2015-10-19 15:15:55

如何在SVG的中间创建带箭头的曲线路径

回答

相关问题