我怎樣才能在css中對進度條進行曲線處理？

我想創建一個像這樣的進度條curve progress 。但我不知道如何制作它。 我創建了這個直線進度條，這里是我的css代碼

.progbar{
  top: 165px;
  left: 100px;
  width: 1450px;
  height: 20px;
  background: rgb（0, 157, 220）。
  position: absolute;
  z-index: -1;
  border-radius: 30%。
}
.progbar {
  color: lightblue;
  border-radius: 20px;
}

.progbar: :-webkit-progress-value {
  背景：淺藍色。
  border-radius: 20px;
}

.progbar: :-moz-progress-bar {
  背景: lightcolor;
  border-radius: 20px;
}

.progbar: :-webkit-progress-value {
  背景。rgb（153, 152, 152）。
  border-radius: 20px;
}

.progbar::-webkit-progress-bar {
  背景。rgb（0, 157, 220）。
  border-radius: 20px;

<div class="content">/span>
        <div class="mlogo"/span>>
            < img id="mlogo" src="">/span>
        </div>/span>
        <div class="metroHat"/span>> BA?AK?EH?R-MetROKENT >> K?RAZLI</div>
        <div>< img class="metrologo" src=" 。 /images/metroistanbul-drm-ornek-07.png"></div> 
        <div class="lejant" id="lejant">> </div>>
        < progress class="progbar" id="progress" value="0" max="100"> </progress>>
        < div class="durakIsimleri" id="durakIsimleri" > </div>>
        < div class="durakyerleri" id="durakyerleri" > </div>>
        < div class="aktarmaNoktalar?" id="aktarmaNoktalar?"> </div>>
        <div id="ok">/span>
            <!-- <img src="images/tren.png" /> -->
        </div> 

    </div>/span>

我怎樣才能將曲線變成一個進度條呢？ 是否可以，還是我必須嘗試另一個標簽？

uj5u.com熱心網友回復：

我的建議是使用SVG并將地鐵地圖上的元素分成不同的<symbol>元素。為了構建路徑/進度，可以使用<use>并將其轉換到正確的位置。

進度本身是由線和點的顏色的CSS選擇器制作的。對于這個例子，你可以使用范圍元素來控制進度。

document.forms.form01。 range.addEventListener('change', e =>  {
  let numlines = parseInt(e.target.value) 。
  let numdots = (numlines < 1) ? 0 : numlines 1;
  document.querySelector('#styles').innerHTML = `.
    .lines use:nth-child(-n ${numlines}) {
      筆觸。DarkSlateBlue。
    }
    .dots use:nth-child(-n ${numdots}) {
      筆觸。DarkSlateBlue;
    }`。 
});

#line line {
  stroke-width: 6px;
}

#dot circle {
  stroke-width: 3px;
  填充：白色。
}

#down path, #up path {
  stroke-width: 6px;
  填充：無。
}

svg use {
  行程。SteelBlue;
}

< svg viewBox="0 0 250 50"> 
  <defs> 
    <symbol id="line"> 
      < line x1="0"/span> y1="3" x2="40" y2="3" /> 
    </symbol> 
    < 符號 id="dot" transform="translate(-6 -3)">
      < 圓形 cx="6"/span> cy="6" r="4" fill="白色" /> 
    </symbol> 
    <symbol id="down"/span>>
      < path transform="translate(0 3)" d="M 0,0 C 25,0 15,20 40,20" /> 
    </symbol> 
    <symbol id="up">/span>
      < path transform="translate(0 3)" d="M 0,20 C 25,20 15,0 40,0" /> 
    </symbol> 
  </defs>/span>
  <style id="style"> </style>>
  <g class="lines">/span>
    < 使用 href="#line" transform="translate（10 10）"/> 
    < 使用 href="#line" transform="translate(50 10)"/>
    < 使用 href="#down" transform="translate(90 10)"/>
    < 使用 href="#up" transform="translate(130 10)"/>
    < 使用 href="#line" transform="translate(170 10)"/>
  </g>
  <g class="dots"> 
    < 使用 href="#dot" transform="translate（10 10）"/> 
    < 使用 href="#dot" transform="translate(50 10)"/>
    < 使用 href="#dot" transform="translate(90 10)"/> 
    < 使用 href="#dot" transform="translate(130 30)"/>
    < 使用 href="#dot" transform="translate(170 10)"/> 
    < 使用 href="#dot" transform="translate(210 10)"/>
  </g>/span>
</svg>/span>

<form name="form01"> 
  < input type="range"/span> name="range" min="0" max="5" value="0"/> 
</form> 

標籤：

上一篇：在htmldiv元素之間畫線

下一篇：SVG反轉顏色