我試圖用大點創建帶有進度條的svg路徑。我如何使用純粹的基於html5/css的解決方案來實現它?用箭頭填充帶有箭頭的svg路徑作爲頭
這是我到目前爲止有:https://jsfiddle.net/fldeveloper/rLh2sr7u/
相關的代碼是:
<div class="wrapper">
<div class="progress progress1" value="8" style="position: relative;"><svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#eee" stroke-width="1" fill-opacity="0"/><path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#55b9e6" stroke-width="3" fill-opacity="0" style="stroke-dasharray: 304.777, 304.777; stroke-dashoffset: 60.9554; stroke-linecap: round;"/></svg><div class="progressbar-text" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: rgb(85, 185, 230);">8/10</div></div>
</div>
你的問題有點混亂。如果你不使用Javascript,你將如何更新進度條? 也許你的意思是它是在服務器上生成的純粹靜態的進度條?如果是這樣的話,那麼爲什麼你不能在你需要的地方繪製一個藍色圓圈到SVG? –
@PaulLeBeau你說得對,它不能純粹是HTML5/CSS,但也需要JavaScript。我正在使用progressbarjs來繪製一些動畫進度條。我唯一的問題是我無法在盤旋線上畫點。由於它不在其發展範圍之內,我認爲它必須用SVG圖形來完成。我認爲我可以在SO上得到一些關於這方面的指導。 – user869375