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

我有一个带有

data percent

属性的圆形svg。（有开始和停止倒计时按钮）我想在

setInterval

函数中更改此

data percent

属性。我的目的是在第二次倒计时时更改

数据百分比

，如

（秒*10）

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

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

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

这里是现场版本也

$（文档）.ready（函数（）{
变量$round=$（'.round'），
roundRadius=$round.find（'circle'）.attr（'r'），
roundPercent=$round.data（'percent'），
RoundCircu=2*roundRadius*Math.PI，
roundDraw=roundPercent*RoundCirch/100
$round.css（'stroke-dasharray'，roundDraw+'999'）
})
var秒=10；
//var round=document.querySelector（'.round'）；
//round.setAttribute（'data-percent'，秒*10）；
让游戏=真实；
函数togglePlay（）{
如果（！玩）{
playCount（）；
document.querySelector（'button'）.innerHTML='Pause'；
}否则{
pauseCount（）；
document.querySelector（'button'）.innerHTML='Play'；
}
玩耍=！玩耍；
}
让我的计时器；
函数playCount（）{
myTimer=setInterval（myCounter，1000）；
}
函数pauseCount（）{
清除间隔（myTimer）；
}
函数myCounter（）{
如果（秒==0）{
清除间隔（myTimer）；
}
var round=document.querySelector（'.round'）；
round.setAttribute（'data-percent'，秒*10）；
log（'Hello World'，second）
第二--；
}

正文{
保证金：0；
}
.点{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.轮{
变换：旋转（-90度）；
过渡：所有1都易于输入输出；
/*SVG*/
填充：无；
笔画：蓝色；
笔画宽度：8；
笔划线头：圆形；
笔划数组：0999；
}

播放

我已经找到了自己问题的解决方案。我还必须更新css

stroke dasharray

。以下是解决方案：

var roundPercent=10；
//var round=document.querySelector（'.round'）；
//round.setAttribute（'data-percent'，秒*10）；
让游戏=真实；
函数togglePlay（）{
如果（！玩）{
playCount（）；
document.querySelector（'button'）.innerHTML='Pause'；
}否则{
pauseCount（）；
document.querySelector（'button'）.innerHTML='Play'；
}
玩耍=！玩耍；
}
让我的计时器；
函数playCount（）{
myTimer=setInterval（myCounter，1000）；
}
函数pauseCount（）{
清除间隔（myTimer）；
}
函数myCounter（）{
如果（roundPercent==0）{
清除间隔（myTimer）；
}
变量$round=$（'.round'），
roundRadius=$round.find（'circle'）.attr（'r'），
RoundCircu=2*roundRadius*Math.PI，
roundCalc=roundPercent*10，
roundDraw=roundCalc*RoundCirch/100
$round.css（'stroke-dasharray'，roundDraw+'999'）
var round=document.querySelector（'.round'）；
setAttribute（'data-percent'，roundCalc）；
console.log（'Hello World'，roundCalc）
四舍五入--；
}

正文{
保证金：0；
}
.点{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.轮{
变换：旋转（-90度）；
过渡：所有1都易于输入输出；
/*SVG*/
填充：无；
笔画：蓝色；
笔画宽度：8；
笔划线头：圆形；
笔划数组：0999；
}

在您发布的代码中播放

，setInterval回调函数中的setAttribute行被注释掉。应该删除//吗？不，我在测试上述setAttribute后忘记删除注释。我将立即编辑。已编辑。感谢您让我知道它正在更改数据属性，但视图中没有结果。@AHaworth已解决。