如果你需要的只是一个圆，你可以使用一条很短很宽的线，就像下面的例子一样。
这会起作用因为

• stroke-linecap="round"会产生圆形的错觉
• 笔画可以取vector-effect="non-scaling-stroke"。
• • non-scaling-stroke**此值修改对象的描边方式。通常描边包括计算当前用户坐标系中形状路径的描边轮廓，并用描边颜料填充该轮廓（颜色或渐变）。此值产生的视觉效果是描边宽度不依赖于元素的转换（包括非均匀缩放和剪切变换）和缩放级别。

div {
  width: 300px;
  height: 50px;
  background-color: lime;
}

svg {
  width:100%;
  height:100%;
}

<div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
    <!--<circle cx="30" cy="50" r="20"></circle>-->
    <line  x1="30" y1="50" x2="30.1" y2="50" stroke-width="40" stroke="black" stroke-linecap="round" vector-effect="non-scaling-stroke" />
  </svg>
</div>

如果你需要一个白色的笔触，你可以添加一个更大的笔触宽度在黑色后面的白线
一个二个一个一个