用箭头填充svg路径和点作为头 [英] Fill svg path with arrow along with dot as head

问题描述

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

I am trying to create the svg path with a progress bar with a large dot. How can I achieve it with purely html5/css based solution?

以下是我到目前为止的内容： https://jsfiddle.net/fldeveloper/rLh2sr7u/

Here's what I have so far: 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>

推荐答案

Herre是一个将圆圈旋转到正确的地方，带有CSS 过渡用于动画目的。我已将动态部分链接到单选按钮状态，但这不仅仅是概念验证技巧。

Herre is a CSS solution that rotates a circle into the right place, with a CSS transition for animation purposes. I have linked the dynamic parts to the radio button state, but that is not much more than proof-of-concept trickery.

请注意，我已经扩大了svg viewBox 有点符合圆圈标记的大小。

Note that I have widened the svg viewBox a bit to fit the size of the circle marker.

.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 属性。动画本身不需要脚本，只需设置值。

In real live you would probably set the style attributes on the respective elements with javascript. The animation itself needs no scripting, just set the values.

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

这篇关于用箭头填充svg路径和点作为头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！