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

Question

我有一个带有属性的圆圈 svg data-percent。（有开始和停止倒计时的按钮）我想在函数data-percent内部更改此属性。setInterval我的目的是改data-percentwhile秒倒计时之类的(second * 10)。我可以在 SetInterval 之外手动更改值；var second = 8; var round = document.querySelector('.round'); round.setAttribute('data-percent', second * 8);但是在 setInterval 函数内部没有任何变化，控制台也没有错误。$(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>