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 cr

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