我正在使用
在
progressbar.js
插件,它可以帮助我使用 svg
创建漂亮的进度条。这里是示例代码: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>