How to style svg progress bar with gradients

问题:

I'm using progressbar.js plugin, which helps me to create nice progress bars using svg. Here is the fiddle:

https://jsfiddle.net/vaxobasilidze/xqge4cew/1/

In #container1 I'm using hex colors to style the svg, but in #container I need it to be styled with gradient. As you see, it does not work. Is there a way to style svg using gradients?

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

回答1:

You cannot use gradient as a color as it will be later placed inside the stroke. To use gradient with SVG you need first to define it then apply it as color. So you can try something like this:

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

回答2:

You have to insert the gradient color and then append it to the svg like this

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