svg用js动态更改内部动画属性，在chrome中不生效，求解决方法！！！

Question

页面代码为：

 - <path id="circlePath" fill="none" stroke="#fff" 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代码

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


在firefox浏览器中可正常改变，但是在chrome中没有改变，审查元素已经变化，就是没有效果

------------------------------------------------------------------------### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

$("#circleAnimate")
//原生js写法:
document.querySelector('#circleAnimate').setAttribute('to','400 300')