javascript - 为什么js代码要分开划分？

Question

在下面的代码中，js 代码应该为进度条提供动画加载。但是，不知道为什么黄色条移位了，没有放在

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%'
  }
});

bar.animate(1.0); // Number from 0.0 to 1.0

#liner {
  position: relative;
  width: 600px;
  height: 7px;
  background-color: #000000;
}
#container {
  position: absolute;
  width: 400px;
  height: 8px;
  background-color: #f0f0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="liner">
  <div id="container"></div>
</div>

Answer 1

您只是缺少 svg 中的 css 属性 position: absolute;。

---

jsFiddle Demo

---

代码片段:

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%',
    position: 'absolute'
  }
});

bar.animate(1.0); // Number from 0.0 to 1.0

#liner {
  position: relative;
  width: 600px;
  height: 7px;
  background-color: #000000;
}
#container {
  position: absolute;
  width: 400px;
  height: 7px;
  background-color: #f0f0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="liner">
  <div id="container"></div>
</div>