如何在 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。这是解决方案：&nbsp; &nbsp;&nbsp;&nbsp; var roundPercent = 10;//var round = document.querySelector('.round');//round.setAttribute('data-percent', second * 10);let play = true;function togglePlay(){&nbsp; &nbsp; if(!play){&nbsp; &nbsp; &nbsp; &nbsp; playCount();&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('button').innerHTML='Pause';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; pauseCount();&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('button').innerHTML='Play';&nbsp; &nbsp; }&nbsp; &nbsp; play = !play;}let myTimer;function playCount() {&nbsp; &nbsp; myTimer = setInterval(myCounter,1000);&nbsp;&nbsp;}function pauseCount() {&nbsp; &nbsp; clearInterval(myTimer);}function myCounter (){&nbsp; &nbsp; if(roundPercent == 0) {&nbsp; &nbsp; &nbsp;clearInterval(myTimer);&nbsp; &nbsp; }&nbsp; var $round = $('.round'),&nbsp; &nbsp; &nbsp; roundRadius = $round.find('circle').attr('r'),&nbsp; &nbsp; &nbsp; roundCircum = 2 * roundRadius * Math.PI,&nbsp; &nbsp; &nbsp; roundCalc = roundPercent *10,&nbsp; &nbsp; &nbsp; roundDraw = roundCalc * roundCircum / 100&nbsp; &nbsp; &nbsp; $round.css('stroke-dasharray', roundDraw&nbsp; + ' 999')&nbsp; &nbsp; &nbsp; var round = document.querySelector('.round');&nbsp; &nbsp; &nbsp; round.setAttribute('data-percent', roundCalc);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; console.log('Hello World', roundCalc)&nbsp; &nbsp; &nbsp; roundPercent--;}body {&nbsp; margin: 0;}.point {&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; transform: translate(-50%,-50%);}.round {&nbsp; transform: rotate(-90deg);&nbsp; transition: all 1s ease-in-out;&nbsp;&nbsp;&nbsp; /* SVG */&nbsp; fill: none;&nbsp; stroke: blue;&nbsp; stroke-width: 8;&nbsp; stroke-linecap: round;&nbsp; stroke-dasharray: 0 999;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><div class="point">&nbsp;<svg class="round" viewbox="0 0 100 100" width="200" height="200" data-percent="100" style="stroke-dasharray: 251.327, 999;">&nbsp; &nbsp; &nbsp; <circle cx="50" cy="50" r="40" />&nbsp;&nbsp;&nbsp; &nbsp; </svg></div><button onclick="togglePlay()">Play</button>