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

这是一个小提琴：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)" ... />

从新的ProgressBar.Path（）中删除color属性，并删除有关parent.svg.insertAdjacentHTML（'afterbegin'，Gradient）;的行；不再需要了。

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

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

1 个答案: