在svg倒计时内画一个圆圈

Question

我使用svg制作了倒计时示例，但我需要一个钟面，这只是一个黑色的圆圈，正在填充我所做的倒计时的颜色。

这是我得到的代码：

＆＃13;

＆＃13;

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() {
		$('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
		if (i == time) {  	
      clearInterval(interval);
			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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我正在寻找的结果（黑暗的钟面）和倒计时填写：

我尝试完成我想要的任务之一是添加一个名为＆＃34的新css类; circle＆＃34;但是当我将它添加到<circle id="circle" class="circle circle_animation" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="blue" fill="none"/>时似乎没有出现。

＆＃13;

＆＃13;

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() {
		$('h3').text(secondsToTime(1800-i).m.toString()+" min " +secondsToTime(1800-i).s.toString()+" sek");
		if (i == time) {  	
      clearInterval(interval);
			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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在当前圈子之前的svg区域添加另一个圈子，并确保它与您动画的圈子不同。 <circle id="circle" r="69.85699" cy="81" cx="81" stroke-width="15" stroke="#1F2837" fill="none"/>

您可以看到demo on jsbin