矢印のある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。私は、動的部分をラジオボタンの状態にリンクしていますが、それは概念実証のトリッキー以上のものではありません。

円マークのサイズに合わせてビット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; 
}