SVG圆形渐变进度在每条路径之间有一个小的白色边界

Question

我有这样一个codepen：https://s.codepen.io/cabplanalp/debug/EJWGzE

第一个项目有我找到的代码帮助，可以去掉路径之间的小白边，但抗锯齿代码在路径上不起作用：

我应用的svg标签: shape-rendering="crispEdges“

我应用的路径标记: shape-rendering="optimizeQuality“<--这不是Shape-rendering的属性，所以我可以使用什么

我尝试遵循下面的代码示例：How to render svg elements with crisp edges while still keeping anti-aliasing?

请告诉我如何才能让第一个路径看起来像其他两个路径，而不是每条路径之间有小的白色边框。

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>

Answer 1

您确定需要六个渐变吗？在我看来，一个就足够了。然后你的裂缝问题就消失了。

​

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>

​