bugfix> javascript > 投稿

親divsborder-radiusと同じように、progressbarjsへのborder-radiusを50%埋めることは可能ですか?

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);

回答 1 件
  • ザ・ border-radius SVGの幅は100%であるため、読み込み中のSVGの前端/右端では機能しません。したがって、境界半径は実際にはSVGの左端/右端にあり、パスをクリップしません。パスの幅は100%ではありません。

    これを修正するには、次の組み合わせを使用できます stroke-linecap: round の端を丸める <path> 要素のストローク、および進行状況要素のstrokeWidthをプログラムで設定します。ドキュメントに基づくと、SVGのネイティブサイズは常に 100×strokeWidth 、したがって、丸みを帯びた形状を実現するには、DOM要素のアスペクト比でキャンバスを拡大縮小する必要があります。

    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>
    
    

    注意点:プログレスバー要素の幅が変更され、アスペクト比が変更された場合は、変更する方法を見つける必要があります。 strokeWidth :プラグインのAPIが実際にそれをサポートしているかどうかはわかりません。この種の柔軟性に対応する必要がある場合は、プログレスバーアニメーションを処理するための独自の単純なコンポーネントを作成する方がよい場合があります。 <progress> 要素は非常によくサポートされています。

あなたの答え