javascript - SVG:动态添加动画元素

Question

<分区>

Answer 1

你必须用.beginElement()开始你的动画 这不是 jquery 方法，因此您不能将它与 jquery 对象一起使用。改用 Dom 对象

var myanim=document.createElementNS("http://www.w3.org/2000/svg", 'animate');
myanim.setAttribute("id","myAnimation"); 
myanim.setAttribute("attributeType","XML"); 
myanim.setAttribute("attributeName","stroke-width"); 
myanim.setAttribute("values","6;1;6;1"); 
myanim.setAttribute("dur","2s"); 
myanim.setAttribute("repeatCount","3"); 
var myPath = document.getElementById("path1");

myPath.appendChild(myanim);

function myFunction() {
console.log('hello')
//$("#myAnimation").beginElement();
document.getElementById("myAnimation").beginElement();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me</button>

<svg width="320" height="320" viewBox="0 0 320 320">
<path
            id="path1" fill="#edf1f2" stroke="#ff8d35"
            d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">


                </path>

 </svg>