svg - 在 svg 中制作半个轮廓

Question

我有一个 SVG，如下图所示：

SVG的代码如下：

   <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width="75"
      height="61"
      viewBox="0 0 75 61"
    >
      <path
        d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
        fill="red"
      />
    </svg>

我只想在 svg 的半圆形部分有一个黑色的轮廓，我是 svg 的新手，所以我做不到。请帮忙。

注意：忽略顶部和底部的黑色轮廓，这不是 svg 的一部分，因为我已经截取了我的应用程序的屏幕截图。只有红色部分是 svg

标签： svg

Answer 1

为此，您可以使用不同的路径，其 d 属性是前一个路径 d 属性的一部分。

这是您拥有的 d 属性：

d="M75.2 0v61H0V0
   c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
   c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
   h-.1z"

对于您删除的新 d 属性M75.2 0v61H0V0。这是绘制部分线并在点 0,0 处结束。您将使用此点作为起点：M0,0接下来，您将使用贝塞尔曲线c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33 c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1而不使用关闭路径的部分。

这条新路径具有fill="none"您喜欢的颜色和宽度的笔触。

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  width="75"
  height="61"
  viewBox="0 0 75 61"
>
  <path
    d="M75.2 0v61H0V0
       c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
       c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
       h-.1z"
    fill="red"
  />
  
  <path
    d="M0,0
    c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
    c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1" fill="none" stroke="black" stroke-width="3"/>
</svg>