title: How do you append a svg image to a rect element of another svg image?
body: <p>I trying to append a svg image to a <code>rect</code> element in a svg image, using d3 and trying</p>
  
  <pre><code>chart.selectAll("rect.bar")
    .each(function(datum, index) {
      d3.select(this)
        .append("svg:image")
          // ..some attributes
    });
  </code></pre>
  
  <p>This adds <code>&lt;image&gt;</code> to the dom, but the image does not show. I've also tried using jquery to select <code>this</code> in the <code>.each</code> block, which adds it to the dom, but also doesn't show.</p>
  
  <p>For jquery I've added it with</p>
  
  <pre><code>$(this).after("&lt;svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/&gt;");
  </code></pre>
  
  <p>with the <code>svg</code> and <code>xlink</code> namespaces in the <code>html</code> element</p>
  
  <pre><code>&lt;html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  </code></pre>
  
  <p>I've been able to create one image per <code>rect.bar</code> with <code>.selectAll</code>, but I want to create more based on the <code>datum</code> value.</p>