Svg uses js to dynamically change the internal animation properties, which does not take effect in chrome. Find a solution!

page code is

 - <path id="circlePath" fill="none" stroke="-sharpfff" stroke-width="18px"
   stroke-linecap="round" stroke-dashoffset="-17.75" d="M 138 12 A 125
   125 0 0 1 138 262 A 125 125 0 0 1 138 12 Z"> 
   <animate id="circleAnimate" attributeName="stroke-dasharray" from="0 785.5"
   to="0 785.5" dur="500ms" fill="freeze"/>
    </path>

js Code

    $("circleAnimate").attr("to","400 300");


firefoxchrome

-- sharp-sharp-sharp problem description

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Jan.17,2022


$("-sharpcircleAnimate")
//js:
document.querySelector('-sharpcircleAnimate').setAttribute('to','400 300')
Menu