反应原生SVG弧路径

Question

我在反应本机svg中创建弧，如下图所示

弧的代码：

 <Path
    d="M 50 8 A 1 1 0 0 1 50 92"
    fill="skyblue"
    stroke="blue"
    strokeWidth="15"
  />

但是我如何在第二张图片上做这样的事情。具有中心孔的两个弧形

Answer 1

如果必须坚持使用路径，这是一个使用笔触和剪切路径的选项（所有路径均相同）。

<svg width="140" height="110" viewbox="0 -5 140 110" style="background:#efefef">
  <defs>
    <clipPath id="my-clip">
      <path
        d="M 50 8 A 1 1 0 0 1 50 92"
      />
    </clipPath>
  </defs>
  <path
    clip-path="url(#my-clip)"
    d="M 50 8 A 1 1 0 0 1 50 92"
    fill="none"
    stroke="skyblue"
    stroke-width="55"
  />
  <path
    d="M 50 8 A 1 1 0 0 1 50 92"
    fill="none"
    stroke="blue"
    stroke-width="15"
  />
</svg>