Question

 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)");

不希望圈子超越这条道路，但元素已经消失

var circle = svgcanvas.selectAll("circle").data(jsoncirclehigh);

circle.enter().append('circle')
.attr('opacity',0)
.attr("cursor","pointer")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function() {d3.select(this).style("fill", "orange");})
.attr("clip-path", "url(#clipper)")
.attr("cx", function(d) {return d.cx;})
.attr("cy", function(d) {return d.cy;});

Answer 1

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

试图实现一个svg：clipPath但最终几乎是一个空白屏幕

1 个答案: