javascript - How to style svg progress bar with gradients - Stack Overflow

admin管理员组

文章数量:1392054

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

/

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?

// [email protected] version is used
// Docs: .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=".js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
<div id="container1"></div>

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

https://jsfiddle/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?

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs/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./kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
<div id="container1"></div>

• javascript
• html
• css
• svg
• progress-bar

Share Improve this question Follow asked Feb 12, 2018 at 7:57 Vaxo BasilidzeVaxo Basilidze 1,0571616 silver badges3737 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs/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./kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<div id="container1"></div>

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:

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs/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./kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
<div id="container1"></div>

本文标签： javascriptHow to style svg progress bar with gradientsStack Overflow