Question

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

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

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

提前致谢！

Answer 1

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

以下是组件：

rect元素，其大小与父svg相同，并且填充linear-gradient。渐变有两种颜色 - 一种是基色（浅灰色），另一种是进度（青色）。
应用于mask元素的rect。面具有path，它只是线条和圆圈。当mask应用于rect时，只有path会通过rect的实际背景（或填充）显示，该区域的其余部分将被屏蔽由rect。

mask

mask还有一个text元素来显示进度值。
linear-gradient设置stop offset，使其等于进度。通过更改offset，我们始终可以确保path仅显示所需长度的进度填充和其余的基础（浅灰色）。

＆＃13;

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 + '%');
  });
}

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

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

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

1 个答案: