如何在SVG中创建螺旋？

我想在SVG中创建一个

我使用了四个二次贝塞尔点，但我不确定应该将每个点的控制点放在哪里，以获得完美的阿基米德螺旋：

<path class="spiral" 
  d="M100 50 
     C 100 116 12.5 99.5 12.5 50 
     C 12.5 0.5 75 9 75 50 
     C 75 83 37.5 74 37.5 50
     C 37.5 38 50 42 50 50"
  stroke="black" stroke-width="1" fill="none">

---

要获取sprien代码，您可以使用向量编辑器，例如

在“向量编辑器”工具栏中，选择缓和曲线（F9），从中可以选择缓和曲线的参数—匝数、内径

保存文件。我们需要字符串

复制它


是否需要使用贝塞尔曲线？你不能用贝塞尔曲线得到一个完美的螺旋，就像你不能得到一个精确的圆弧一样

你可能想考虑使用直线段组成的<代码> <代码>。

//pathId要修改的path元素的id。
//centreX，centreY：螺旋线中心的位置。
//startRadius：螺旋起点（内部）的半径。
//endRadius：一次完整（360度）旋转后的半径。
//四分之一圈数：要生成的四分之一圈数。
函数makeSpiral（路径ID、centreX、centreY、startRadius、端半径、四分之一圈）
{
var pointsPerQuarter=90；
var radiusStep=（endRadius-startRadius）/4/点四分之一；
var点=[]；
对于（变量i=0；i
我想进一步阐述一下Zev Eisenberg的一个问题。由此可知，Zev是一个C函数。它使用二次贝塞尔曲线而不是三次曲线，但其优点是您可以自由设置路径部分的角度，从而尽可能减小误差

这是一个Javascript端口。根据您的喜好设置getPath的参数（角度以度为单位）<代码>紧固件
是每个路径部分覆盖的角度。我认为30°可以提供相当不错的结果


功能线交叉口（m1、b1、m2、b2）{
如果（m1==m2）{
抛出新错误（“平行斜率”）；
}
常数x=（b2-b1）/（m1-m2）；
返回{x:x，y:m1*x+b1}；
}
功能pStr（点）{
返回`${point.x}，${point.y}`；
}
函数getPath（中心、startRadius、spacePerLoop、startTheta、endTheta、thetaStep）{
//重命名公式r=a+bθ的缓和曲线参数
常数a=startRadius；//从中心开始的距离
const b=spacePerLoop/Math.PI/2；//每个循环之间的空间
//将角度转换为弧度
让oldTheta=newTheta=startTheta*Math.PI/180；
endTheta=endTheta*Math.PI/180；
测试点=测试点*Math.PI/180；
//半径
让奥尔德，
newR=a+b*newTheta；
//起点和终点
常数点={x:0，y:0}；
常数newPoint={
x:center.x+newR*Math.cos（newTheta），
y:center.y+newR*Math.sin（newTheta）
};
//切线斜率
让我们一起来，
newSlope=（b*Math.sin（oldTheta）+（a+b*newTheta）*Math.cos（oldTheta））/
（b*Math.cos（oldTheta）-（a+b*newTheta）*Math.sin（oldTheta））；
让path=“M”+pStr（newPoint）；
while（oldTheta

makePolylineSpiral从不引用centerX和centerY，我怀疑推送参数中应该有一个附加项。你是对的。这不重要，因为它们都是零。但是现在已经修好了。谢谢