用箭头和点作为头部填充 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

这里是一个 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;
}