svg 上的 Progressbar.js 边框半径

Question

Is it possible to have a border-radius to the progressbarjs that is filled 50% just like the parent divs border-radius?

HTML

<div class="pgbar" id="pgbar"></div>

CSS

  .pgbar {
    height: 46px;
    margin: 0 auto 30px;
    background-color: #D8D8D8;
    border-radius: 23px;
    padding: 2px;
    svg {
      height: 100%;
      width: 100%;
      border-radius: 23px;
    }
  }

JS

var bar = new ProgressBar.Line(pgbar, {
    color: '#00AFD0',
    trailWidth: 1,
    svgStyle: {borderRadius: '23px'}
});

bar.animate(0.5);

Answer 1

The border-radius does not work on the leading/right edge of the loading SVG because the SVG has a width of 100%, so the border-radius is actually on the extreme left/right edges of the SVG and therefore will not clip the path, if the path is not 100% in width.

To fix this, you can use a combination of stroke-linecap: round to round the edge of the <path> element's stroke, and set the strokeWidth of the progress element programmatically. Based on the documentation, the native size of the SVG is always 100×strokeWidth , so you will need to scale the canvas by the aspect ratio of the DOM element to achieve a rounded shape.

 var width = pgbar.clientWidth; var height = pgbar.clientHeight; var bar = new ProgressBar.Line(pgbar, { color: '#00AFD0', strokeWidth: height / width * 100, svgStyle: { strokeLinecap: 'round' } }); bar.animate(0.5);

 .pgbar { height: 46px; margin: 0 auto 30px; background-color: #D8D8D8; border-radius: 23px; padding: 2px; }.pgbar svg { height: 100%; width: 100%; border-radius: 23px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script> <div class="pgbar" id="pgbar"></div>

A word of caution tho: if the progress bar element's width changes, which causes its aspect ratio to change, you will need to find a way to change the strokeWidth : not sure if the plugin's API actually supports that. If you need to accommodate this sort of flexibility, you might be better off just writing your own simple component to handle progressbar animation: remember that <progress> element is quite well supported .