使用SVG路径Bezier曲线绘制自定义形状

Question

是否可以绘制如下图所示的路径？它基本上是一个圆圈，中间有间隙。

到目前为止，我只能使用SVG路径创建一个圆圈 - http://jsfiddle.net/k6pgpze6/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="500px" height="500px">    
      <path 
            d="
            M 100, 250          
            a 150,150 0 1,0 300,0
            a 150,150 0 1,0 -300,0
            "
      />
</svg>

Answer 1

是的，这是基本的答案。您可以绘制单个弧（即每个弧一个<path>），或者您可以拥有一个包含多个子路径的路径。

<path d="M 100,250 a 150,150 0 1,0 300,0
         M 300,0   a 150,150 0 1,0 -300,0" />

然而，这些线条不会以您的图片所具有的倾斜角度结束。如果你想要那些，那么最好的办法就是绘制一个完整的圆圈并使用<clipPath>或<mask>来弥补差距。

<强>更新

这是你的照片的近似值。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="500px" height="500px">    
      <path transform="translate(250,250)"
            fill="none"
            stroke="black"
            stroke-width="6"
            d="M 39,-145          
               A 150,150, 0,0,1, 106,106
               M 0,150
               A 150,150, 0,0,1, -106,106
               M -123,86
               A 150,150, 0,0,1, -150,0
               M -149,-13
               A 150,150, 0,0,1, -39,-145" />
</svg>

为了让自己更容易，我将圆圈置于（0,0）并使用变换将其移动到页面上的正确位置。因为我使用了这个技巧，所以更容易确保我的所有坐标（M值和A中的最后两个值）都在圆周上。这只是一个简单的三角函数（sin(angle)*150和cos(angle)*150）。

弧命令最棘手的部分是大弧标志和扫描标志。来自the SVG spec的以下图表非常有用。

在您的情况下，您将希望对所有扫描标志使用相同的值（arc命令中的第五个值）。选择1或0，具体取决于您是顺时针还是逆时针绕圆圈。

对于大弧标志（第四个值），如果弧覆盖小于180度，则使用0;如果大于180度，则使用1。