如何使用渐变样式设计SVG进度条

Question

我正在使用 progressbar.js 插件，它可以帮助我使用 svg 创建漂亮的进度条。这里是示例代码：https://jsfiddle.net/vaxobasilidze/xqge4cew/1/。

在 #container1 中，我使用十六进制颜色来为 svg 添加样式，但是在 #container 中，我需要使用渐变样式。正如你所看到的，这种方法不起作用。有没有一种方式可以使用渐变样式来为 svg 添加样式呢？

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: 'linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#7db9e8 100%)',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});

bar.animate(1.0);  // Number from 0.0 to 1.0

var bar1 = new ProgressBar.SemiCircle(container1, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#eee',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});

bar1.animate(1.0);

#container {
  margin: 20px;
  width: 200px;
  height: 100px;
}

#container1 {
  margin: 20px;
  width: 200px;
  height: 100px;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
<div id="container1"></div>

- Vaxo Basilidze

Answer 1

您需要插入渐变色，并将其附加到SVG中，如下所示：

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: 'url(#gradient)',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
bar.animate(1.0);  // Number from 0.0 to 1.0

let linearGradient = `
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="tomato"/>
      <stop offset="50%" stop-color="purple"/>
    </linearGradient>
  </defs>
`

bar.svg.insertAdjacentHTML('afterBegin', linearGradient);

var bar1 = new ProgressBar.SemiCircle(container1, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#eee',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});

bar1.animate(1.0);

#container {
  margin: 20px;
  width: 200px;
  height: 100px;
}

#container1 {
  margin: 20px;
  width: 200px;
  height: 100px;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<div id="container1"></div>

- l.g.karolos

Answer 2

您不能将渐变作为颜色使用，因为它将稍后被放置在描边内。要在SVG中使用渐变，您需要先定义它，然后将其应用为颜色。因此，您可以尝试类似以下的内容：

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var Gradient = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1e5799"/><stop offset="50%" stop-color="#2989d8"/><stop offset="100%" stop-color="#7db9e8"/></linearGradient></defs>';

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: 'url(#gradient)',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
bar.svg.insertAdjacentHTML('afterbegin', Gradient);

bar.animate(1.0);  // Number from 0.0 to 1.0

var bar1 = new ProgressBar.SemiCircle(container1, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#eee',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});

bar1.animate(1.0);

#container {
  margin: 20px;
  width: 200px;
  height: 100px;
}

#container1 {
  margin: 20px;
  width: 200px;
  height: 100px;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
<div id="container1"></div>

- Temani Afif

---

好的。谢谢！ - Vaxo Basilidze

+1...所以这个渐变跨越了半圆...我只是想知道，你会如何配置渐变来跨越更大的圆弧，以便它不会重复。例如，在这个codepen中，渐变重复了两次。 - Danield

@Danield，您指的是重复什么吗？:) 这不是在您的笔中... 它从右到左在整个圆圈上移动。 - Temani Afif

我想让渐变从0度的纯粉色到360度的纯黄色 - 这可能吗？ - Danield

@Danield 哦，好的，顺便说一下，半圆不是这种情况，因为方向是从右到左...你要找的是锥形渐变，但它还没有得到普遍支持，也不认为有一个 SVG 元素支持它...但我们可以尝试通过使用两个类似这样的渐变来模拟它：https://jsfiddle.net/rq2ve5sx/1/ - Temani Afif

@Danield 为了让整个事情更好、更准确，你可以像这样调整动画：https://jsfiddle.net/rq2ve5sx/3/ ;) - Temani Afif