title: Hide part of image outside boundary in SVG Image
body: <p>I have appended an image to SVG. 
  My requirement is I want to hide part of image going outside boundary.
  So if some part of my image is going beyond 1 or 500 , it should get hidden.</p>
  
  <p>I think this can be done using CSS or using viewBox attribute of SVG but I don't know how to do this.</p>
  
  <p>This is link for my <a href="http://jsfiddle.net/zeajrgdr/72/" rel="nofollow">http://jsfiddle.net/zeajrgdr/72/</a>.<br>
  and this is how I append image</p>
  
  <pre><code> var pathPlot = d3.selectAll("g." + "fp-pathplot-1419951398667");
        var image = d3.selectAll('#floor-image');
        if (image != null) {
          image.remove();
          removeAllImageSelectors();
        }
        var img = pathPlot.append("svg:image")
          .attr('x', 100)
          .attr('y', 100)
          .attr('width', 196)
          .attr('height', 98)
          .attr('id', 'floor-image')
          .attr('preserveAspectRatio', 'defer')
          .attr("xlink:href", "http://s12.postimg.org/wm0u4pgf1/Rotate_Img_AS2.png")
  </code></pre>
  
  <p>Click on 'Add Image' button to add image. You can drag,rotate this image by mouse.
  Thanks.</p>