我正在使用 React Circular Progressbar（使用 SVG 構建）-（https://www.npmjs.com/package/react-circular-progressbar）
為此：
React Circular Progressbar 中的默認邊緣是完全圓角的。
我發現邊緣是用stroke-linecapcss 規則確定的。想用自定義值覆寫默認值（類似于邊界半徑：3）。但唯一可能的選擇是完全圓形或完全方形。
stroke-linecap: round;要么stroke-linecap: butt;
我搜索了很多，但沒有找到解決方案。謝謝！！
uj5u.com熱心網友回復：
如果你的進度條渲染基于一個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以呈現清晰的圓形輪廓。
邊界半徑由 控制stdDeviation="0.75"。
調整feColorMatrix值將導致更銳化或更平滑（抗鋸齒）的渲染。
這個概念也用于“blob/goo”效果（css-tricks: The Gooey Effect）
另見@Temani Afif's great tutorial here。
svg 過濾器和性能
svg 過濾器可以在多次應用或影片時引入顯著的性能影響。只有少數元素可以忽略不計 - 但不要過度;）
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454218.html