用箭头填充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进行动画制作。我已将动态部分链接到单选按钮状态，但这不仅仅是概念验证技巧。

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

.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;
}