javascript - 如何使用渐变样式设置 svg 进度条

Question

我正在使用 progressbar.js 插件，它可以帮助我使用 svg 创建漂亮的进度条。这是 fiddle :

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>