有没有办法使 svg 图标路径边缘部分变圆 - 使用 css？

Question

我正在使用 React Circular Progressbar（使用 SVG 构建）- (https://www.npmjs.com/package/react-circular-progressbar)

为此： React Circular Progressbar 中的默认边缘是完全圆角的。

我发现边缘是由 stroke-linecap css 规则确定的。想用自定义值覆盖默认值（类似于 border-radius:3）。但唯一可能的选择是完全圆形或完全方形。 stroke-linecap: round; 或 stroke-linecap: butt;

我搜索了很多，但没有找到解决方案。谢谢！！

Answer 1

如果您的进度条渲染基于 stroke-dasharray 概念 – 您可以使用 svg 滤镜来圆化边缘：

示例 svg 过滤器：

let inputRange = document.querySelector('#range');
let progress = document.querySelector('.progress');
inputRange.addEventListener('change', function(e) {
  let val = e.currentTarget.value;
  progress.setAttribute('stroke-dasharray', val + ' 100')
})

.layout {
  width: 80vmin;
  margin: 0 auto;
}

.progress {
  transition: 0.3s;
}

.progress-rounded {
  filter: url(#roundEdges);
}

.svgPieAsset {
  display: block;
  border: 1px solid #ccc;
}

.svgAsset {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

<div class="layout">
  <p style="text-align:center">Progress: <br />
    <input id="range" type="range" min="0" max="100" value="60" step="10">
  </p>
  <svg class="svgPieAsset" viewBox="0 0 100 100">
      <symbol id="gauge">
        <circle transform="rotate(-90)" transform-origin="center" id="circle" class="percent" cx="50%" cy="50%" r="45%" fill="none" stroke-width="10%" pathLength="100" />
      </symbol>
      <use class="segment-bg" href="#gauge" stroke="#eee" />
      <use class="segment progress progress-rounded" href="#gauge" stroke="red" stroke-dashoffset="0" stroke-dasharray="60 100" />
    </svg>
</div>

<svg class="svgAsset" aria-hidden="true">
  <defs>
    <filter id="roundEdges">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0.75" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 5 -2.5" result="round" />
      <feComposite in="SourceGraphic" in2="round" operator="atop" />
    </filter>
  </defs>
</svg>

本质上，svg 滤镜首先模糊一个元素——产生圆形轮廓（但模糊），然后通过 feColorMatrix 锐化边缘以呈现清晰的圆形轮廓。

border-radius 由 stdDeviation="0.75" 控制。
调整 feColorMatrix 值将导致更清晰或更平滑 (anti-aliased) 的渲染。

这个概念也用于“blob/goo”效果（css-tricks: The Gooey Effect)
另见 @Temani Afif’s great tutorial here.

svg 过滤器和性能

svg 滤镜在多次应用或设置动画时会显着影响性能。只有少数元素可以忽略不计——但不要过度 ;)

有没有办法使 svg 图标路径边缘部分变圆 - 使用 css？

Is there a way to make svg icon path edges partially rounded - using css?

css

reactjs

svg

示例 svg 过滤器：

svg 过滤器和性能