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>

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

1 个答案: