title: Display an SVG image at the middle of an SVG path
body: <p>I have a force directed graph with different size nodes. I want to display a custom icon in the middle of each path connecting two nodes. From the d3 examples I found the way to display images within the nodes. However, when I try the same technique on the paths, the images are not shown. </p>
  
  <pre><code>var path = svg.append("svg:g").selectAll("path").data(force.links());
  
  var pathEnter = path.enter().append("svg:path");
  
  pathEnter.attr("class", function(d) {
      return "link " + d.target.type;
  })
  
  pathEnter.append("svg:g").append("image")
      .attr("xlink:href","http://127.0.0.1:8000/static/styles/images/add.png")
      .attr("x",0).attr("y",0).attr("width",12).attr("height", 12)
      .attr("class", "type-icon");
  </code></pre>