如何访问setInterval函数中的SVG数据属性

Question

我有一个带有data-percent属性的圆形svg。(有用于开始和停止倒计时的按钮(我想更改setInterval函数中的data-percent属性。我的目的是改变data-percent，而第二倒计时像(second * 10)。

我可以在SetInterval之外手动更改值，如；

var second = 8;
var round = document.querySelector('.round');
round.setAttribute('data-percent', second * 8);

但在setInterval函数内部，控制台中没有任何更改和错误。

这是CodePen的实时版本也是

$(document).ready(function() {
var $round = $('.round'),
roundRadius = $round.find('circle').attr('r'),
roundPercent = $round.data('percent'),
roundCircum = 2 * roundRadius * Math.PI,
roundDraw = roundPercent * roundCircum / 100
$round.css('stroke-dasharray', roundDraw  + ' 999')
})

var second = 10;
//var round = document.querySelector('.round');
//round.setAttribute('data-percent', second * 10);
let play = true;
function togglePlay(){
if(!play){
playCount();
document.querySelector('button').innerHTML='Pause';
} else {
pauseCount();
document.querySelector('button').innerHTML='Play';
}
play = !play;
}

let myTimer;
function playCount() {
myTimer = setInterval(myCounter,1000);
}
function pauseCount() {
clearInterval(myTimer);
}
function myCounter (){
if(second == 0) {
clearInterval(myTimer);
}
var round = document.querySelector('.round');
round.setAttribute('data-percent', second * 10);
console.log('Hello World', second)
second--;
}

body {
margin: 0;
}
.point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.round {
transform: rotate(-90deg);
transition: all 1s ease-in-out;

/* SVG */
fill: none;
stroke: blue;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 0 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="point">
<svg class="round" viewbox="0 0 100 100" width="200" height="200" data-percent="">
<circle cx="50" cy="50" r="40" />  
</svg>
</div>
<button onclick="togglePlay()">Play</button>

Answer 1

我自己找到了问题的解决方案。我还需要css更新stroke-dasharray。以下是解决方案：

var roundPercent = 10;
//var round = document.querySelector('.round');
//round.setAttribute('data-percent', second * 10);
let play = true;
function togglePlay(){
if(!play){
playCount();
document.querySelector('button').innerHTML='Pause';
} else {
pauseCount();
document.querySelector('button').innerHTML='Play';
}
play = !play;
}

let myTimer;
function playCount() {
myTimer = setInterval(myCounter,1000);

}
function pauseCount() {
clearInterval(myTimer);
}
function myCounter (){
if(roundPercent == 0) {
clearInterval(myTimer);
}
var $round = $('.round'),
roundRadius = $round.find('circle').attr('r'),
roundCircum = 2 * roundRadius * Math.PI,
roundCalc = roundPercent *10,
roundDraw = roundCalc * roundCircum / 100
$round.css('stroke-dasharray', roundDraw  + ' 999')
var round = document.querySelector('.round');
round.setAttribute('data-percent', roundCalc);   
console.log('Hello World', roundCalc)
roundPercent--;
}

body {
margin: 0;
}
.point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.round {
transform: rotate(-90deg);
transition: all 1s ease-in-out;

/* SVG */
fill: none;
stroke: blue;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 0 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="point">
<svg class="round" viewbox="0 0 100 100" width="200" height="200" data-percent="100" style="stroke-dasharray: 251.327, 999;">
<circle cx="50" cy="50" r="40" />  
</svg>
</div>
<button onclick="togglePlay()">Play</button>