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

Проблема заключается в том, как браузер (Chrome, Safary или другие на том же движке) отображает SVG с border-radius:50%.Обрезать его круговой маской не помогает.

Одно из решений состоит в том, чтобы изображение выглядело одинаково, не обрезая (не маскируя) его с помощью 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

Я изменил фон тела, чтобы обрезка была более четкой.

Answer 2

Я полагаю, что вы использовали Google Chrome или аналогичный браузер на основе Blink или Webkit для проверки этого изображения SVG.Открытие страницы в Mozilla Firefox или Microsoft Edge не отображает очень тонкую границу, которую вы указали, поэтому это проблема вашего браузера, а не вашего кода.Я предлагаю отправить в Google отчет об ошибке по этой проблеме.

Тем временем, чтобы исправить эту проблему для всех браузеров, включая Chrome, рассмотрите возможность использования элемента SVG <clipPath> и примените его ко всем фигурам, кромебелый треугольник.Затем в CSS удалите свойство border-radius в селекторе svg.

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