我的var t=setInterval(function(){svg.attr("transform","rotate(10)");},1000);为什么不能一直实现旋转

问题：我的var t=setInterval(function(){svg.attr("transform","rotate(10)");},1000);为什么只能执行一次，而不能一直旋转

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>风扇</title>
    <script type="text/javascript" src="d3.js"/>
        <script src="d3-timer.v1.min.js"></script>
    <style type="text/css"></style>
</head>
<body bgcolor="white"><br>
<script>
    d3.xml("fengshan4.svg", function(error, documentFragment) {
        if (error) {
            console.log(error);
            return;
        }
        var svgNode = documentFragment.getElementsByTagName("svg")[0];
        //d3's selection.node() returns the DOM node, so we
        //can use plain Javascript to append content
        //use plain Javascript to extract the node
        var main_chart_svg = d3.select("body").append("div");
        main_chart_svg.select("svg").remove();
        main_chart_svg.node().appendChild(svgNode);
        var svg = main_chart_svg.select("svg");
        //它返回一个现成的DOM树，可以将其插入到主文档的DOM中，无论是否需要它
        svg.call(zoom);
        var t=setInterval(function(){svg.attr("transform","rotate(10)");},1000);

    });
</script>
</body>

想让这个风扇一直旋转

        var r = 0;
        var t=setInterval(function(){svg.attr("transform","rotate("+(r+=10)+")");},1000);