Question

我有进度条，其中包含以下示例中的步骤： http://jsbin.com/yuyojepuda/edit?html,css,js,output，但我需要设置它的动画以填充从0到100％的行。

＆＃13;

.completed {
      stroke: #FBAA33;
      fill: #FBAA33;
    }
    
    .not-complete {
      stroke: #555e6c;
      fill: #555e6c;
    }

＆＃13;

        <svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <g id="step">
          <line x1="10" y1="50" x2="90" y2="50" style="stroke:#555e6c; stroke-width:10; stroke-linecap:round"/>
          <circle cx="90" cy="50" r="20" style="fill:#555e6c; stroke-width:0;" />
          <line x1="10" y1="50" x2="90" y2="50" style="stroke:inherit; stroke-width:5; stroke-linecap:round" z-index="100"/>
          <circle cx="90" cy="50" r="17" style="fill:inherit; stroke-width:0;" />
        </g>
      </defs>  
      <use transform="translate(320 0)" class="not-complete" xlink:href="#step" />
      <use transform="translate(240 0)" class="completed" xlink:href="#step" />
      <use transform="translate(160 0)" class="completed" xlink:href="#step" />
      <use transform="translate(80 0)" class="completed" xlink:href="#step" />
      <use transform="translate(0 0)" class="completed" xlink:href="#step" />
      <line x1="10" y1="50" x2="400" y2="50" style="stroke:#FBAA33; stroke-width:5; stroke-linecap:round" z-index="100"/>
    </svg>

＆＃13;

我找到了很多例子，例如：http://jsbin.com/yuyojepuda/2/edit?html,css,js,output，但我无法在我的代码中应用它。

还有一个问题。这些圆圈是否可以放置一些DIV或其他我可以放置一些（背景）图像的东西？

带步骤的动画SVG进度条

0 个答案: