SVG - How to crop an image to a circle?

Question

I am somewhat of a noob to SVG, but I've been playing with D3 and have started to undestand the basics.

What I am trying to achieve is to take a square image and crop it to a circle - which is going to be representing a node on tree I am trying to draw.

I was able to achieve this effect by creating a pattern for each image, then filling the nodes with the pattern. However, the performance on this approach was terrible when there are more than a handfull of nodes on the tree.

So, I am looking for a different approach. I can put a regular "image" object in as my nodes, but they just come out as plain rectangles, obviously, and I'd like to render them as circles. Anyone have any advice on how to either mask/crop the image to achieve the effect I want while maintaining performance?

Answer 1

You can use a clip path, like so:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">   <clipPath id="clipCircle">     <circle r="50" cx="50" cy="50"/>   </clipPath>   <rect width="100" height="100" clip-path="url(#clipCircle)"/> </svg> 

A circle will be "cut out" from the rectangle.

Answer 2

If you want to generate the same html code as in @Thomas's answer programmatically with D3 you can do the following:

var svg = d3.select("body").append("svg")   .attr("width", "100%")   .attr("height", "100%");  svg.append("clipPath")     .attr("id", "clipCircle")   .append("circle")     .attr("r", 50)     .attr("cx", 50)     .attr("cy", 50);  svg.append("rect")     .attr("width", 100)     .attr("height", 100)     .attr("clip-path", "url(#clipCircle)");