javascript - 如何使用 progressBar.js 在特定路径上放置渐变？

Question

我正在查看此主题以寻求帮助，How to style svg progress bar with gradients .

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

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;
}

这是一个 fiddle :https://jsfiddle.net/dnLLgm5o/6282/

Answer 1

如果不是必须通过 JS 来完成，您应该只添加 <defs>包含 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>';

... 并在 <svg> 之后添加它标签

然后像这样将 stroke 属性添加到你的路径中

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

从 new ProgressBar.Path() 中删除颜色属性并删除关于 parent.svg.insertAdjacentHTML('afterbegin', Gradient); 的行；这不再是必需的。

这是你应该拥有的。 https://jsfiddle.net/dnLLgm5o/6313/ 希望这就是您要找的。