进步圈不会绕着图像

Question

我似乎无法围绕这三个图像获得进度。这是问题的JSFiddle。请帮忙！

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

CSS

figure img{
   transform: translate( -50%, 50%) scale3d(1, 1, 1);
   position: absolute;
   top: 50%;
   left: 50%;
}

figure img:hover{
   transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}

的JavaScript

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

谢谢， 伊恩

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>