html - How to clip an SVG plot? -

my svg element setup this:

svg.attr("viewbox", "0 0 " + chartview.displaywidth + " " + chartview.displayheight); 

inside i'm drawing plots. there way create "see through window" inside can see plots?

i tried using:

svg.append("clippath").append("rect")                     .attr("x", 10)                      .attr("y", 10)                     .attr("width", 50)                    .attr("height", 100); 

but doesn't work

as mentioned in comments use clippath. tried create 1 using append. far know, d3.js or jquery syntax. tagged svg.js. in svg.js this:

svg.viewbox(0, 0, chartview.displaywidth, chartview.displayheight);  var plot = svg.path('your plots path data').stroke('#000')  var clipper = svg.rect(50, 100).move(10, 10)  // clip whole svg use svg instead of plot plot.clipwith(clipper) 

if use d3.js there. created clippath. have give id, , reference id in plot.

var clip = svg.append("clippath").attr("id", "clipper"); clip.append("rect").attr("x", 10)                    .attr("y", 10)                    .attr("width", 50)                    .attr("height", 100);  yourplot.attr("clip-path", "url(#clipper)") 

if want clip whole svg rect, use svg.attr(...) instead of yourplot.attr(...)

make sure read svg specification or tutorial clippaths