Javascript 试图实现svg:clipPath，但结果几乎是一个空白屏幕

我希望限制区域的路径，但元素已消失

 var w = 725;

    var h = 500;

    var padding = 20;

     var svgcanvas = divElem.append("svg:svg")
        .attr("width", w)
        .attr("height", h);

不希望行超出此路径，但元素已消失

 svgcanvas.append("svg:clipPath")
        .attr("id", "clipper")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .attr("transform", "translate(220,400) scale(1, -1)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "yellow");

        var myLine = svgcanvas.append("svg:line")
        .attr("x1", 40)
        .attr("y1", 50)
        .attr("x2", 450)
        .attr("y2", 150)
        .attr("clip-path", "url(#clipper)")
        .style("stroke", "rgb(6,120,155)");

不希望圆圈超出此路径，但元素已消失

 svgcanvas.append("svg:clipPath")
        .attr("id", "clipper")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .attr("transform", "translate(220,400) scale(1, -1)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "yellow");

        var myLine = svgcanvas.append("svg:line")
        .attr("x1", 40)
        .attr("y1", 50)
        .attr("x2", 450)
        .attr("y2", 150)
        .attr("clip-path", "url(#clipper)")
        .style("stroke", "rgb(6,120,155)");

---

看看这个例子，我应用了一个ClipPath和一个setInterval行：