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;
}

Answer 1

我假設您使用谷歌瀏覽器或類似的基於Blink或Webkit的瀏覽器來測試此SVG圖像。 在Mozilla Firefox或Microsoft Edge中打開頁面不會顯示您指出的非常薄的邊框，因此這是您的瀏覽器而不是代碼的問題。 我建議向Google發送有關此問題的錯誤報告。

在此期間，要解決包括Chrome在內的所有瀏覽器的此問題，請考慮使用SVG <clipPath>元素並將其應用於除白色三角形之外的所有形狀。 然后，在CSS中刪除svg選擇器中的border-radius屬性。

<svg viewBox="0 0 32 32">
  <defs>
    <clipPath id="circle-viewport">
      <circle r="16" cx="16" cy="16" />
    </clipPath>
  </defs>
  <circle
    r="16"
    cx="16"
    cy="16"
    class="circle--progress"
    stroke-dasharray="100 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#3FC364"
    stroke-dasharray="100 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#EDBB40"
    stroke-dasharray="66 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#FF8832"
    stroke-dasharray="33 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <path d="M16 16 L100 50 L200 -50 Z" fill="white"></path>
</svg>

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來使圖形與背景更好地融合 - 將其包裝在div中並將border-radius應用於div。

請參閱示例https://codepen.io/anon/pen/exgOvm?editors=1100

我改變了身體背景，因此剪裁會更清晰。