CODEWITHSUNDEEP
htmlcsssvgsvg.js
Gianluca Ghettini
Gianluca Ghettini

Reputation: 11628

How to clip an SVG plot?

My SVG element is setup as this:

svg.attr("viewBox", "0 0 " + chartView.displayWidth + " " + chartView.displayHeight);

inside I'm drawing some plots. Is there a way to create a "see through window" inside which I can see my plots?

I tried using:

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

but it doesn't work

Upvotes: 2

Views: 183

Answers (1)

Fuzzyma
Fuzzyma

Reputation: 8474

As already mentioned in the comments you would use a ClipPath. You already tried to create one using append. As far as I know, this is D3.js or jQuery syntax. But you tagged svg.js. In svg.js you would do it like 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)

// to clip the whole svg use svg instead of plot
plot.clipWith(clipper)

If you use D3.js you are almost there. You already created the clippath. You now have to give it an id, and reference this id in your 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 you want to clip the whole svg with your rect, use svg.attr(...) instead of yourplot.attr(...)

Make sure to read the svg specification or some tutorial about clipPaths

Upvotes: 1

Related Questions