SVG路径：如何将末端箭头标记为圆形边框？

我正在做一个圆（大约弧度到20度）。里面有一些文字。 我想画一个箭头指向它。 所以我用“标记结束”。但圆圈凌驾于箭头之上。 如何（我可以）将标记结束位置移动到圆边界

问题：箭头按圆圈隐藏（覆盖）
一些文本
我想要什么？
自动检测箭头到边框
一些文本

无法将标记沿远离末端的直线向后拉

---

你需要自己画箭头。或者让线条在圆的边界处结束。

没有办法让标记沿着远离端点的线条向后画

---

你需要自己画箭头。或者让线在圆的边界处结束。

谢谢大家。我尝试另一种方法。 例如

var draw=函数（类型，选项）{
var svg=document.createElements（“http://www.w3.org/2000/svg“，类型）；
for（选项中的变量k）{
setAttribute（k，opts[k]）；
}
返回svg；
};
var getCircleDestination=函数（从，到）{
var tx=parseFloat（to.getAttribute（“cx”）；
var ty=parseFloat（to.getAttribute（“cy”）；
var fx=从.center.x开始；
var fy=从.center.y开始；
var w=外汇-tx；
var h=fy-ty；
var z=数学sqrt（w*w+h*h）；
var r=parseFloat（to.getAttribute（“r”））；
var dz=z/r；
var dx=tx+w/dz；
var dy=ty+h/dz；
/*dx2，dy2…dz*1.2不是个好主意*/
var dx2=tx+w/（dz*1.2）；
var dy2=ty+h/（dz*1.2）；
var circle=绘制（“圆”{
“cx”：dx，
“cy”：dy，
“r”：3，
“填充”：“红色”
});
返回{
“s”：{
“x”：dx2，
y:dy2
},
“svg”：圆圈
};
};
var canvas=draw（“svg”{
“宽度”：“400”，
“高度”：“150”，
“样式”：“背景色：#F0；边框：1px纯黑
});
var def=draw（“defs”，{}）；
var marker=绘制（“标记”{
“id”：“端点”，
“查看框”：“-50 0 50”，
“refX”：0，
“参考文献”：25，
“markerUnits”：“strokeWidth”，
“markerWidth”：10，
“markerHeight”：10，
“定向”：“自动”
});
var marker_path=draw（“路径”{
“d”：“M-50 0 L 0 25 L-50 50 z”
});
var btn=document.createElement（“按钮”）；
btn.style.display=“块”；
btn.innerHTML=“添加行”；
canvas.appendChild（def）；
canvas.appendChild（marker）；
marker.appendChild（marker\u路径）；
document.getElementById（“画布”）.appendChild（画布）；
document.getElementById（“canvas”）.appendChild（btn）；
var circle=绘制（“圆”{
“cx”：200，
“cy”：75，
“r”：10，
“填充”：“白色”，
“笔划”：“黑色”，
“笔划宽度”：1，
“不透明度”：0.5
});
canvas.appendChild（圆）；
var路径=新数组（）；
btn.addEventListener（“单击”，函数（）{
var x=Math.random（）*canvas.clientWidth；
var y=Math.random（）*canvas.clientHeight；
变量自={
“中心”：{
“x”：x，
“y”：y
}
};
var svg=getCircleDestination（起点，圆圈）；
var c=svg.svg；
var stx=svg.s.x；
var sty=svg.s.y；
var ttx=svg.s.x+（Math.random（）*10+15）*（svg.s.x5）{
var t=path.shift（）；
t、 c.移除（）；
t、 p.删除（）；
}
});
谢谢大家。我尝试另一种方法。
例如


var draw=函数（类型，选项）{
var svg=document.createElements（“http://www.w3.org/2000/svg“，类型）；
for（选项中的变量k）{
setAttribute（k，opts[k]）；
}
返回svg；
};
var getCircleDestination=函数（从，到）{
var tx=parseFloat（to.getAttribute（“cx”）；
var ty=parseFloat（to.getAttribute（“cy”）；
var fx=从.center.x开始；
var fy=从.center.y开始；
var w=外汇-tx；
var h=fy-ty；
var z=数学sqrt（w*w+h*h）；
var r=parseFloat（to.getAttribute（“r”））；
var dz=z/r；
var dx=tx+w/dz；
var dy=ty+h/dz；
/*dx2，dy2…dz*1.2不是个好主意*/
var dx2=tx+w/（dz*1.2）；
var dy2=ty+h/（dz*1.2）；
var circle=绘制（“圆”{
“cx”：dx，
“cy”：dy，
“r”：3，
“填充”：“红色”
});
返回{
“s”：{
“x”：dx2，
y:dy2
},
“svg”：圆圈
};
};
var canvas=draw（“svg”{
“宽度”：“400”，
“高度”：“150”，
“样式”：“背景色：#F0；边框：1px纯黑
});
var def=draw（“defs”，{}）；
var marker=绘制（“标记”{
“id”：“端点”，
“查看框”：“-50 0 50”，
“refX”：0，
“参考文献”：25，
“markerUnits”：“strokeWidth”，
“markerWidth”：10，
“markerHeight”：10，
“定向”：“自动”
});
var marker_path=draw（“路径”{
“d”：“M-50 0 L 0 25 L-50 50 z”
});
var btn=document.createElement（“按钮”）；
btn.style.display=“块”；
btn.innerHTML=“添加行”；
canvas.appendChild（def）；
canvas.appendChild（marker）；
marker.appendChild（marker\u路径）；
document.getElementById（“画布”）.appendChild（画布）；
document.getElementById（“canvas”）.appendChild（btn）；
var circle=绘制（“圆”{
“cx”：200，
“cy”：75，
“r”：10，
“填充”：“白色”，
“笔划”：“黑色”，
“笔划宽度”：1，
“不透明度”：0.5
});
canvas.appendChild（圆）；
var路径=新数组（）；
btn.addEventListener（“单击”，函数（）{
var x=Math.random（）*canvas.clientWidth；
var y=Math.random（）*canvas.clientHeight；
变量自={
“中心”：{
“x”：x，
“y”：y
}
};
var svg=getCircleDestination（起点，圆圈）；
var c=svg.svg；
var stx=svg.s.x；
var sty=svg.s.y；
var ttx=svg.s.x+（Math.random（）*10+15）*（svg.s.x