svg circle stroke-dashoffset marker

时间:2017-09-19 10:24:43

标签: javascript svg

你好兄弟姐妹。

快速而短暂的是我的小提琴jsfiddle.net/hentai/72tkyn40/8045 /

我使用进度条js库进行圆形进度条,但这是我的问题:

我想在stroke-dashoffset的末尾绘制一个小圆圈,它是否可能或者有没有办法用javascript实现这一点?

来自fiddle的代码

var bar = new ProgressBar.Circle("#container", {
  color: '#aaa',
  strokeWidth: 5,
  trailWidth: 5,
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#FF003C', width: 5 },
  to: { color: '#AADD3C', width: 5 },
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);
        circle.path.setAttribute('stroke-linecap', "round");

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value + "%");
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.text.style.color = '#666666';

bar.animate(0.90);

0 个答案:

没有答案
相关问题