試圖實現SVG：clipPath但幾乎是一片空白屏幕

var w = 725; 

    var h = 500; 

    var padding = 20; 

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

，我希望限制該地區的路徑結束，但該元素已經消失試圖實現SVG：clipPath但幾乎是一片空白屏幕

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

來源

2012-10-02 user1701622

看看下面這個例子，我應用ClipPath和一個setInterval的一行： demo

來源

2012-10-02 16:06:43

試圖實現SVG：clipPath但幾乎是一片空白屏幕

回答

相關問題