Is there a way to make svg icon path edges partially rounded

I'm using React Circular Progressbar (built with SVG) - (https://www.npmjs.com/package/react-circular-progressbar)

for doing this: Partially rounded progress the default edges in React Circular Progressbar are completely rounded.

I figured out the edges is determined with the stroke-linecap css rule. wanted to override the default with a custom value (something like border-radius:3). but the only possible options are completely rounded or completely square. stroke-linecap: round; or stroke-linecap: butt;

I searched a lot, but did not find a solution. thanks!!

CodePudding user response：

If your progress gauge rendering is based on a stroke-dasharray concept – you might use a svg filter to round the edges:

Example svg filter:

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

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

Essentially, the svg filter first blurs an element – resulting in rounded contours (but blurry) and then sharpens edges via feColorMatrix to render crisp rounded outlines.

The border-radius is controlled by stdDeviation="0.75".
Adjusting feColorMatrix values will result in a more sharpened or smoother (anti-aliased) rendering.

This concept is also used for "blob/goo" effects (css-tricks: The Gooey Effect)
See also @Temani Afif’s great tutorial here.

svg filters and performance

svg filters can introduce significant performance hits, when applied multiple times or animated. Negligible for only a few elements – but don’t overdo it ;)