У прогресса SVG-градиента круга есть небольшая белая граница между каждым путем - PullRequest
Новая
       22

У прогресса SVG-градиента круга есть небольшая белая граница между каждым путем

0 голосов
/ 11 апреля 2019

У меня есть эта кодовая ручка: https://s.codepen.io/cabplanalp/debug/EJWGzE

Первый элемент содержит справку по коду, которую я нашел, чтобы избавиться от небольшой белой границы между путями, но код сглаживания не работает на пути:

тег svg, который я применил: shape-render = "crispEdges"

тег пути, который я применил: shape-render = "optimizeQuality" <- это не свойство Shape-рендеринга, так чтоЯ использую </p>

Я пытался следовать этому примеру кода: Как отобразить элементы SVG с четкими краями, сохраняя при этом сглаживание?

Пожалуйста, дайте мне знать, как я могусделайте так, чтобы первый был похож на два других, но не с этой маленькой белой рамкой между каждым путем.

https://s.codepen.io/cabplanalp/debug/EJWGzE

<li data-name="" data-percent="">
        <svg viewBox="-10 -10 229 229" shape-rendering="crispEdges">
        <g fill="none" stroke-width="10" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"  shape-rendering="optimizeQuality" />
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
        </g>
        </svg>
        <svg viewBox="-10 -10 229 229">
        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
        </svg>
    </li>

1 Ответ

2 голосов
/ 11 апреля 2019

Вы уверены, что вам нужно шесть градиентов?Мне кажется, что этого будет достаточно.Тогда ваши проблемы с трещинами исчезнут. 

svg {
  width: 400px;
}
<svg viewBox="-10 -10 229 229">
<defs>
  <linearGradient id="grad" gradientUnits="objectBoundingBox" x1="0.3" y1="0" x2="0.7" y2="1">
    <stop offset="0%" stop-color="#3170B7" />
    <stop offset="50%" stop-color="#00A8FF" />
    <stop offset="100%" stop-color="#00E6A2" />
  </linearGradient>
</defs>
<g fill="none" stroke-width="10" transform="translate(100,100)">
  <circle x="0" y="0" r="100" stroke="url(#grad)"/>
</g>
</svg>
...