SVG background image

by Kashif Imran

HTML

<svg id="mySvg" width="80" height="80">
      <defs>
        <pattern id="image" x="0" y="0" height="40" width="40">
          <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg"></image>
        </pattern>
  </defs>

JavaScript

//FROM: http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript      
var svg = d3.select("#mySvg").attr("height", "450px").attr("width", "450px")

svg.append("circle")
         .attr("cx", 225)
         .attr("cy", 225)
         .attr("r", 20)
         .style("fill", "transparent")       // this code works OK
         .style("stroke", "black")     // displays small black dot
         .style("stroke-width", 0.25)
         .on("mouseover", function(){ // when I use .style("fill", "red") here, it works 
               d3.select(this)
                   .style("fill", "url(#image)");
         })
          .on("mouseout", function(){ 
               d3.select(this)
                   .style("fill", "transparent");
         });