使用 SVG 路径贝塞尔曲线绘制自定义形状

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。