用颜色部分填充形状的边框

Question

我正在尝试创建一个进度效果，颜色填充DOM对象的边框（或可能是背景）。 附上的图片可以让你更好地了解我的目标。 我通过在灰线上添加具有纯色背景颜色的对象并设置其高度来实现当前结果。 这个对象有mix-blend-mode: color-burn; 适用于它，这就是它只为它下面的灰色线条着色的原因。

这样可以正常工作，但会破坏圆周围的抗锯齿，并且产生的颜色也是不可预测的（根据线条的颜色而变化）。

我觉得必须有更好的方法来实现这一点，也许是使用canvas元素。 有人能指出我正确的方向吗？

提前致谢！

Answer 1

这应该可以与Canvas一起使用，甚至可以使用CSS本身通过玩多个元素等，但我肯定会建议你使用SVG。 SVG在编码，维护和生成响应输出方面提供了很多好处（与Canvas不同，Canvas在缩放时往往会变得像素化）。

以下是组件：

• 一个rect元素，与父svg大小相同，并且具有linear-gradient填充。 渐变有两种颜色 - 一种是基色（浅灰色），另一种是进度（青色）。
• 应用于rect元素的mask 。 面具有一条path ，它只是线条和圆圈。 当mask应用于rect ，只有这条path会通过rect的实际背景（或填充）显示，该rect的其余部分将被掩码中添加的另一个rect mask 。
• mask还有一个text元素来显示进度值。
• linear-gradient的stop offset设置使其等于进度。 通过更改offset ，我们始终可以确保path仅显示所需长度的进度填充和其余部分的基础（浅灰色）。

 window.onload = function() { var progress = document.querySelector('#progress'), base = document.querySelector('#base'), prgText = document.querySelector('#prg-text'), prgInput = document.querySelector('#prg-input'); prgInput.addEventListener('change', function() { prgText.textContent = this.value + '%'; progress.setAttribute('offset', this.value + '%'); base.setAttribute('offset', this.value + '%'); }); } 

 svg { width: 200px; height: 300px; } path { stroke-width: 4; } #rect { fill: url(#grad); mask: url(#path); } /* just for demo */ .controls { position: absolute; top: 0; right: 0; height: 100px; line-height: 100px; border: 1px solid; } .controls * { vertical-align: middle; } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <svg viewBox='0 0 200 300' id='shape-container'> <linearGradient id='grad' gradientTransform='rotate(90 0 0)'> <stop offset='50%' stop-color='rgb(0,218,235)' id='progress' /> <stop offset='50%' stop-color='rgb(238,238,238)' id='base' /> </linearGradient> <mask id='path' maskUnits='userSpaceOnUse' x='0' y='0' width='200' height='300'> <rect x='0' y='0' width='200' height='300' fill='black' /> <path d='M100,0 100,100 A50,50 0 0,0 100,200 L100,300 M100,200 A50,50 0 1,0 100,100' stroke='white' /> <text id='prg-text' x='100' y='155' font-size='20' text-anchor='middle' fill='white'>50%</text> </mask> <rect id='rect' x='0' y='0' width='200' height='300' /> </svg> <!-- just for demo --> <div class='controls'> <label>Set Progress:</label> <input type='range' id='prg-input' min='0' max='100' value='50' /> </div> 

---

如果您不熟悉SVG，可以参考MDN Docs（下面提供的链接），了解有关元素，属性和值的更多信息。

• SVG蒙版元素
• SVG路径教程