Javascript 如何使用progressBar.js在特定路径上设置渐变？

我在看这个话题是为了得到一些帮助

问题是，当我想在特定路径上使用此方法时，它根本不起作用。我使用doc时肯定犯了一些错误，欢迎任何帮助

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.Path(heartpath, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: 'url(#gradient)',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
var parent = bar.parentNode;
parent.svg.insertAdjacentHTML('afterbegin', Gradient);

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



<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container">
  <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 175.2 155.9" style="enable-background:new 0 0 175.2 155.9; overflow: inherit !important" xml:space="preserve">

                    <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M33.3,154.5C14.2,138.9,2,115.2,2,88.7c0-47,38.3-85.1,85.6-85.1s85.6,38.1,85.6,85.1c0,26.4-12.1,50-31.2,65.7" />
                    <path id="heartpath" fill-opacity="0" stroke-width="20"  d="M33.3,154.5C14.2,138.9,2,115.2,2,88.7c0-47,38.3-85.1,85.6-85.1s85.6,38.1,85.6,85.1c0,26.4-12.1,50-31.2,65.7" />
                </svg>
</div>




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

var梯度=”；
var bar=新的ProgressBar.Path（heartpath{
冲程宽度：6，
放松：“放松”，
持续时间：1400，
颜色：“url（#渐变）”，
trailColor:“#eee”，
步幅：1，
svgStyle:null
});
var parent=bar.parentNode；
parent.svg.insertAdjacentHTML（'afterbegin'，Gradient）；
条。设置动画（1.0）；//从0.0到1.0的数字
#容器{
利润率：20px；
宽度：200px；
高度：100px；
}

---

这里有一个小问题：

如果通过JS进行操作不是强制性的，那么您应该将包含渐变的

添加到SVG中

要做到这一点，请参阅

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梯度=”；

。。。并将其添加到oppenning

标记之后

然后只需像这样将笔划属性添加到路径中

<path id="heart-path" ... stroke="url(#gradient)" ... />

从new ProgressBar.Path（）中删除颜色属性，并删除关于parent.svg.insertAdjacentHTML（'afterbegin'，Gradient'）的行；这不再是必要的了

这是你应该吃的。 希望这就是你想要的