SVG 在 Firefox 和 Chrome 中的显示方式不同答案

【问题标题】：SVG displays differently in Firefox then ChromeSVG 在 Firefox 和 Chrome 中的显示方式不同
【发布时间】：2020-02-06 16:18:03
【问题描述】：

我遇到了奇怪的 Firefox 和 Edge 的行为。它渲染 SVG 图像，切割其中的一部分。 SVG 在 Chrome 中运行良好，但在 Firefox 和 Microsoft Edge 中，它会中断。

在火狐中

在 Chrome 中

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        background: #000;
      }
      .continer {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="continer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <circle fill="rgba(255, 255, 255, 0.4)" cx="10" cy="10" r="10"></circle>
        <circle
          stroke-dasharray="6.28 31.4"
          transform="rotate(-90) translate(-20)"
          stroke-width="10"
          fill="transparent"
          stroke="#ffffff"
          cx="10"
          cy="10"
          r="5"
        ></circle>
      </svg>
    </div>
  </body>
</html>

【问题讨论】：

Can't repro from FF70 on macOs in the given sn-p (same result as the screenshot's screenshot)
不要设置描边宽度 >= 2 x 半径。
您的意思是将笔画宽度更改为 9.9，如果是这样，我已经更改了它，但在中心显示了一个小点。或者是其他东西？ @罗伯特·朗森
您应该使用圆弧路径来绘制圆弧，而不是尝试使用圆和 stroke-dasharray。
我该怎么做你能给我一个例子。

标签： html firefox svg

【解决方案1】：

简单的修复，只是弄乱了代码，直到我在 Firefox 中修复它我不明白为什么会这样，但这是解决方法：

stroke-width="9.9"

代替：

stroke-width="10"

【讨论】：

是的，效果很好，但是中间有一个小点！
嗯，看看这个：jsfiddle.net/gulraj/sgnm104j
是的，它适用于 stroke-dasharray="6.28 31.4" (20%) 但对于 stroke-dasharray="15.7 31.4" (50%) 中心有一个点。
我看到了，它是一个像素的大小，但它就在那里。使用弧线，它会解决问题