【svg动画】为啥这段代码无效？

Question

<svg xmlns="http://www.w3.org/2000/svg">
    <svg width="500" height="500">
        <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
        <animateTransform attributeName="transform"
            attributeType="XML"
            type="rotate"
            begin="0s"
            from="0 200 200"
            to="360 400 400"
            dur="10s"
            repeatCount="indefinite"/>
        </rect>
    </svg>
</svg>

Answer 1

svg 需要UI用钢笔工具一个点一个点画出来，svg添加id=svg1，给外围包裹svg图标的div加上类名class=c_l，然后用jQuery方法写动画方法：

// 动态svg图标
    function animateSvg() {
                var isScroDo = false // 防抖
                
                if(!isScroDo) {
                    isScroDo = true
                    if($('.tabar').isVisable()&&firstLoad) {
                        firstLoad = false
                        $.each($('.c_l svg'), function() {
                            svgs1[$(this).attr('id')].reset().play();
                        })
                    }
                    setTimeout(function(){
                        isScroDo = false
                    }, 200);
                }
            }