如何在svg中获取循环路径？

Question

我需要在圆圈周围绘制一个笔划弧

Circle 
 cx=110,cy=60,r=50

Path 
  d=M60,60 A50,50 0 0,1 160,60

<svg style="position:absolute" id="svg_test" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <circle style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="110" cy="60" r="50" fill="none" stroke="#e4e4e4" stroke-width="2"></circle> 
    <path id="svgpath" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="none" stroke="#16a6b6" d="M60,60 A50,50 0 0,1 160,60" stroke-width="2"></path> 
</svg>

如果cx，cy和r改变了，如何确定路径？

Here公式给出d =“M cx cy + r + d A r + d r + d 0 0 0 cx + r + d cy”。

计算路径M110,110 + d A50 + d，50 0 0 0 150,60使用上面的cx和cy与值M60,60不匹配A50,50 0 0,1 160,60

d的价值应该是什么？

jsfiddle

Answer 1

目前尚不清楚你的问题是什么，或者你想要实现的目标。

该公式将绘制一个覆盖四分之一圆的圆弧（110,110圆到160,60 - 右下象限）。如果你想要更多，你将不得不改变公式。

你从哪里得到“M60,60 A50,50 0 0,1 160,60”来自？为什么期望它与公式生成的路径匹配？

Answer 2

您需要找到弧的两个终点。每次更改cx，cy和r以更新路径时。

firstX = cx + (Math.cos(firstAngle * (Math.PI / 180)) * r);
firstY = cy - (Math.sin(firstAngle * (Math.PI / 180)) * r);

secondX = cx + (Math.cos(secondAngle * (Math.PI / 180)) * r);
secondY = cy - (Math.sin(secondAngle * (Math.PI / 180)) * r);

'M ' + firstX + ',' + firstY + ' A' + r + ',' + r + ' 0 1 0 ' + secondX + ',' + secondY