如何使用渐变样式设置 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>

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>

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>