动态添加svg动画animate

代码如下：

html：

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
    <circle cx="50" cy="50" r="15" fill="black" stroke="black" stroke-width="1">
    </circle>
</svg>

js：

<script>
    var animate = document.createElement("animate")
    animate.setAttribute("attributeName","fill-opacity");
    animate.setAttribute("values","1;0;1");
    animate.setAttribute("dur","1s");
    animate.setAttribute("repeatCount","indefinite");

    document.getElementsByTagName('circle')[0].append(animate)

    $('svg').html($('svg').html())


</script>

用js创建animate标签，并设置相关的属性；

然后将创建的animate标签放到circle里面：

但是仅仅如此，页面上是不会有效果的，所以我们需要将svg重新渲染：

$('svg').html($('svg').html())可以实现我们的需求，有更好的重新渲染的方法，欢迎大家留言讨论。