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

Question

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

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

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

提前致谢!

Answer 1

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

以下是组件:

• 甲rect元件,它的尺寸与母体相同svg,并具有linear-gradient填充.渐变有两种颜色 - 一种是基色(浅灰色),另一种是进度(青色).
• A mask应用于rect元素.面具有一个path只有线条和圆圈的面具.当mask应用于rect,只有这path将通过实际背景(或填充)显示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路径教程