title: D3 fill shape with image using pattern
body: <p>I'm trying to create a circular avatar with D3.js but I cannot get my image to show up in my circle. I'm using a svg pattern def to attempt to fill the circle with an image.</p>
  
  <p>Can anyone tell me what I'm doing wrong below? Thank you.</p>
  
  <pre><code>var config = {
      "avatar_size" : 48
  }
  
  var body = d3.select("body");
  
  var svg = body.append("svg")
          .attr("width", 500)
          .attr("height", 500);
  
  var defs = svg.append('svg:defs');
  
  defs.append("svg:pattern")
      .attr("id", "grump_avatar")
      .attr("width", config.avatar_size)
      .attr("height", config.avatar_size)
      .attr("patternUnits", "userSpaceOnUse")
      .append("svg:image")
      .attr("xlink:href", 'images/avatars/avatar_grumpy.png')
      .attr("width", config.avatar_size)
      .attr("height", config.avatar_size)
      .attr("x", 0)
      .attr("y", 0);
  
  var circle = svg.append("circle")
          .attr("cx", config.avatar_size)
          .attr("cy", config.avatar_size)
          .attr("r", config.avatar_size)
          .style("fill", "#fff")
          .style("fill", "#grump_avatar");
  </code></pre>