使用 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。

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

Draw a custom shape using SVG path Bezier curve

svg

bezier

path