SVG描边问题

Question

我正在使用SVG创建图表。我已经用三个圆形元素创建了它，并添加了一个路径（三角形）以创建一个空白区域。但是我不知道如何隐藏底部几乎可见的细边框。也许我做错了什么？

这是我的演示：

`https://codepen.io/Groude/pen/VgmVvG`

以下是截图，以更好地理解我在谈论什么：

SVG：

  <svg viewBox="0 0 32 32">
    <defs></defs>
    <circle
      r="16"
      cx="16"
      cy="16"
      class="circle--progress"
      stroke-dasharray="100 100"
    ></circle>
    <circle
      r="16"
      cx="16"
      cy="16"
      fill="none"
      stroke="#3FC364"
      stroke-dasharray="100 100"
    ></circle>
    <circle
      r="16"
      cx="16"
      cy="16"
      fill="none"
      stroke="#EDBB40"
      stroke-dasharray="66 100"
    ></circle>
    <circle
      r="16"
      cx="16"
      cy="16"
      fill="none"
      stroke="#FF8832"
      stroke-dasharray="33 100"
    ></circle>
    <path d="M16 16 L100 50 L200 -50 Z" fill="white"></path>
  </svg>
  <div class="text">
    <div class="text__percentage">100%</div>
    <div class="text__description">Sentiment<br />score</div>
  </div>
</div>

CSS

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  padding: 20px 0;
  margin: 0 auto;
}

svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(90deg);
}

circle {
  fill: transparent;
  stroke-width: 3;
}

.circle--progress {
  fill: transparent;
  stroke: #C4C4C4;
  stroke-width: 32;
  stroke-opacity: .25;
}

.text {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  text-align: center;
}

.text__percentage {
   font-size: 60px;
   font-weight: bold;
}

.text__description {
  font-size: 18px;
  font-weight: 500;
  line-height: 16px;
}

- Kirill

---

在这里添加你的尝试代码。 - Alexandr_TT

Answer 1

我假设您使用的是Google Chrome或类似的基于Blink或Webkit的浏览器来测试这个SVG图像。在Mozilla Firefox或Microsoft Edge中打开页面不会显示您指出的非常细的边框，因此这是您的浏览器而不是您的代码的问题。我建议向Google发送有关此问题的错误报告。

同时，为了修复包括Chrome在内的所有浏览器的这个问题，请考虑使用SVG

- Austin

Answer 2

问题似乎出在浏览器（Chrome、Safary 或其他使用相同引擎的浏览器）如何呈现带有 border-radius:50% 的 SVG 上。用圆形遮罩剪裁它并不能解决问题。

一个解决方案是使图形在不使用 border-radius 剪切（遮罩）它的情况下看起来相同，以使它呈现圆形。这将需要通过调整带有颜色分段的圆的半径和描边宽度来实现。

<circle
      r="15" <--
      cx="16"
      cy="16"
      fill="none"
      stroke="#3FC364"
      stroke-dasharray="100 100"
    ></circle>

circle {
  fill: transparent;
  stroke-width: 2; <--
}

将进度圆形调整为适合图表所需圆形的大小：

    <circle
      r="8" <--
      cx="16"
      cy="16"
      class="circle--progress"
      stroke-dasharray="100 100"
    ></circle>

.circle--progress {
  fill: transparent;
  stroke: #C4C4C4;
  stroke-width: 16; <-- 8 radius + 8 half stroke width= 16 visible radius
  stroke-opacity: .25;
}

完整示例请参见：https://codepen.io/anon/pen/zeogLV

如果需要使用border-radius使图形与背景更好地融合，请将其包装在

中并将border-radius应用于

。

请参见示例https://codepen.io/anon/pen/exgOvm?editors=1100

我更改了页面背景，因此剪辑效果更清晰。

- Wlodzislav K.