如何获得svg的循环路径？

我需要的，如果CX，CY和r改变绘制绕了一圈如何获得svg的循环路径？

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>

如何确定路径中风弧？

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

计算出的路径M110，110 + d + A50 d，用上述CX 50 0 0 0 150,60和cy不匹配值M60,60 A50,50 0 0,1 160,60

什么应该是d的值？

circle

jsfiddle

来源

2014-04-08 B L Praveen

“d”代表什么意思？圆周的程度？ –

公式中的d值是什么意思？ –

目前尚不清楚你的问题是什么，或者你AR试图达到的目标。

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

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

来源

2014-04-08 14:11:04

这是在例子[链接]（http://stackoverflow.com/questions/5230148/create-svg-progress-circle）。它涵盖了从180度开始的四分之一圈。如何从90deg开始？ –

你想在哪里开始弧，你想在哪里结束？ –

我想以90deg开始弧线并将弧线动画到0deg –

您需要找到两个圆弧的端点。每次更改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

来源

2014-04-08 18:31:39

我创建了一个小提琴。 –

我已经给出了计算路径。只要忘记d –

我试过它没有正确绘制圆弧 –

如何获得svg的循环路径？

回答

相关问题