用箭头填充带有箭头的svg路径作为头

Question

我试图用大点创建带有进度条的svg路径。我如何使用纯粹的基于html5/css的解决方案来实现它？

这是我到目前为止有：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> 

Answer 1

Herre是一个CSS的解决方案，转一圈到正确的地方，有一个CSS transition用于动画目的。我将动态部分链接到单选按钮状态，但这不仅仅是概念验证的诡计。

请注意，我已经加宽了一点以适应圆圈标记的大小。

.progress { 
 
    position: relative; 
 
} 
 

 
.progressbar-back { 
 
    stroke: #eee; 
 
    stroke-width: 1; 
 
    fill: none; 
 
} 
 
.progressbar-line { 
 
    stroke: #55b9e6; 
 
    stroke-width: 3; 
 
    fill: none; 
 
    stroke-linecap: round; 
 
    transform: rotate(-90deg); 
 
    transform-origin: 50px 50px; 
 
    stroke-dasharray: 304.777px, 304.777px; 
 
    stroke-dashoffset: 304.777px; 
 
    transition: stroke-dashoffset 1s ease; 
 
} 
 
.progressbar-marker { 
 
    fill: #55b9e6; 
 
    transform-origin: 50px 50px; 
 
    transform: rotate(0deg); 
 
    transition: transform 1s ease 
 
} 
 
.progressbar-text { 
 
    position: absolute; 
 
    width: 200px; 
 
    text-align: center; 
 
    top: 90px; 
 
    font-size: 20px; 
 
    color: rgb(85, 185, 230); 
 
} 
 

 
input#r1:checked ~ .progress .progressbar-marker { transform: rotate(0deg) } 
 
input#r2:checked ~ .progress .progressbar-marker { transform: rotate(90deg) } 
 
input#r3:checked ~ .progress .progressbar-marker { transform: rotate(180deg) } 
 
input#r4:checked ~ .progress .progressbar-marker { transform: rotate(270deg) } 
 
input#r5:checked ~ .progress .progressbar-marker { transform: rotate(360deg) } 
 

 
input#r1:checked ~ .progress .progressbar-line { stroke-dashoffset: 304.777px } 
 
input#r2:checked ~ .progress .progressbar-line { stroke-dashoffset: 228.582px } 
 
input#r3:checked ~ .progress .progressbar-line { stroke-dashoffset: 152.388px } 
 
input#r4:checked ~ .progress .progressbar-line { stroke-dashoffset: 76.194px } 
 
input#r5:checked ~ .progress .progressbar-line { stroke-dashoffset: 0px } 
 

 
input#r1:checked ~ .progress .progressbar-text::before { content: "0" } 
 
input#r2:checked ~ .progress .progressbar-text::before { content: "1" } 
 
input#r3:checked ~ .progress .progressbar-text::before { content: "2" } 
 
input#r4:checked ~ .progress .progressbar-text::before { content: "3" } 
 
input#r5:checked ~ .progress .progressbar-text::before { content: "4" }

<div class="wrapper"> 
 
    <input id="r1" type="radio" name="progress" checked> 0/4 
 
    <input id="r2" type="radio" name="progress"> 1/4 
 
    <input id="r3" type="radio" name="progress"> 2/4 
 
    <input id="r4" type="radio" name="progress"> 3/4 
 
    <input id="r5" type="radio" name="progress"> 4/4 
 
    <div class="progress progress1" value="8"> 
 
     <svg viewBox="-5 -5 110 110" width="200px"> 
 
      <circle class="progressbar-back" r="48.5" cx="50" cy ="50"/> 
 
      <circle class="progressbar-line" r="48.5" cx="50" cy ="50" /> 
 
      <circle class="progressbar-marker" r="6" cx="50" cy="1.5" /> 
 
     </svg> 
 
     <div class="progressbar-text">/4</div> 
 
    </div> 
 
</div>

在现实生活你可能会设置在支持JavaScript的各元素的style属性。动画本身不需要脚本，只需设置值即可。

var full = 4 

function setProgress (value) { 
    document.querySelector('.progress .progressbar-marker') 
     .style.transform = 'rotate(' + (360 * value/full) + 'deg)'; 
    document.querySelector('.progress .progressbar-line') 
     .style['stroke-dashoffset'] = 'rotate(' + (304.777 * (1 - value/full)) + 'px'; 
    document.querySelector('.progress .progressbar-text') 
     .innerHTML = value + "/" + full; 
}