javascript - 进度圈不绕图像

Question

我似乎无法获得围绕所有三张图片的进度圈。这是问题的 JSFiddle。请帮忙!

http://jsfiddle.net/ror37gjk/60/

CSS

.wrapper {
  width: 100px;
  height: 100px;
}

.wrapper>#bar, #bar2, #bar3,
.wrapper>img {
  width: 100%;
  height: 100%;
}

.wrapper>img {
  box-sizing: border-box;
  padding: 4%;
}

.wrapper>img {
  border-radius: 50%;
}

JavaScript

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

谢谢，伊恩

Answer 1

你可以这样做:

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

.wrapper {
  width: 100px;
  height: 100px;
}

.wrapper > #bar,
#bar2,
#bar3 {
  position: relative;
}

.wrapper > #bar,
#bar2,
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>