svgのカウントダウン内に円を描く

Question

私はsvgを使ってカウントダウンの例を作ったが、私はカウントダウンの色で塗りつぶされた暗い円でなければならない時計の面が必要だ。

ここで私が得たコードです：

var time = 1800; 
 
var initialOffset = '440'; 
 
var i = 1 
 

 
/* Need initial run as interval hasn't yet occured... */ 
 
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time))); 
 

 
var interval = setInterval(function() { 
 
\t \t $('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek"); 
 
\t \t if (i == time) { \t 
 
     clearInterval(interval); 
 
\t \t \t return; 
 
    } 
 
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time))); 
 
    i++; 
 
}, 1000); 
 

 

 
function secondsToTime(secs) 
 
{ 
 
    var hours = Math.floor(secs/(60 * 60)); 
 
    
 
    var divisor_for_minutes = secs % (60 * 60); 
 
    var minutes = Math.floor(divisor_for_minutes/60); 
 
    
 
    var divisor_for_seconds = divisor_for_minutes % 60; 
 
    var seconds = Math.ceil(divisor_for_seconds); 
 
    
 
    var obj = { 
 
     "m": minutes, 
 
     "s": seconds 
 
    }; 
 
    return obj; 
 
}

.item { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.item h3 { 
 
    text-align:center; 
 
    position: absolute; 
 
    line-height: 125px; 
 
    width: 100%; 
 
} 
 

 
svg { 
 
    -webkit-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
} 
 

 
.circle_animation { 
 
    stroke-dasharray: 440; /* this value is the pixel circumference of the circle */ 
 
    stroke-dashoffset: 440; 
 
    transition: all 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item html"> 
 
    <h3>0</h3> 
 
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> 
 
    <g> 
 
     <title>Layer 1</title> 
 
     <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/> 
 
    </g> 
 
    </svg> 
 
</div>

これは私が（暗い時計の文字盤）を探していた結果であるとカウントダウンそれを記入：

一つは、私が望むことを達成しようとするのは、 "circle"という名前の新しいCSSクラスを追加することでしたが、<circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>に追加すると表示されないようです。

var time = 1800; 
 
var initialOffset = '440'; 
 
var i = 1 
 

 
/* Need initial run as interval hasn't yet occured... */ 
 
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time))); 
 

 
var interval = setInterval(function() { 
 
\t \t $('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek"); 
 
\t \t if (i == time) { \t 
 
     clearInterval(interval); 
 
\t \t \t return; 
 
    } 
 
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time))); 
 
    i++; 
 
}, 1000); 
 

 

 
function secondsToTime(secs) 
 
{ 
 
    var hours = Math.floor(secs/(60 * 60)); 
 
    
 
    var divisor_for_minutes = secs % (60 * 60); 
 
    var minutes = Math.floor(divisor_for_minutes/60); 
 
    
 
    var divisor_for_seconds = divisor_for_minutes % 60; 
 
    var seconds = Math.ceil(divisor_for_seconds); 
 
    
 
    var obj = { 
 
     "m": minutes, 
 
     "s": seconds 
 
    }; 
 
    return obj; 
 
}

.item { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.item h3 { 
 
    text-align:center; 
 
    position: absolute; 
 
    line-height: 125px; 
 
    width: 100%; 
 
} 
 

 
svg { 
 
    -webkit-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
} 
 
.circle { 
 
    border: 15px solid #03002e; 
 
    height: 125px; 
 
    border-radius:50%; 
 
    width: 125px; 
 
} 
 

 
.circle_animation { 
 
    stroke-dasharray: 440; /* this value is the pixel circumference of the circle */ 
 
    stroke-dashoffset: 440; 
 
    transition: all 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item html"> 
 
    <h3>30 min 00 sek</h3> 
 
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> 
 
    <g> 
 
     <title>Layer 1</title> 
 
     <circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/> 
 
    </g> 
 
    </svg> 
 
</div>

Answer 1

ただ、現在の円の前に、あなたのSVG領域に別の円を追加し、それが同じクラスにあなたがアニメーション化された1つを持っていないことを確認してください。 <circle id="circle" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="#1F2837" fill="none"/>

あなたはそれが100％を埋めるために取るんどのくらいdemo on jsbin