title: patternTransform in svg not working for entire pattern
body: <p>Im using a pattern in D3 in order to place an image inside a node and I can succesfully render the image. I am using a flag sprite and just want to clip a small portion for each flag. I am to able to do this for 2/3rds of the image but for some reason, it won't display any part of the image below 110px. The image is 256 by 176.</p>
  
  <pre><code>javascript
          //canvas
      var svg = d3.select("#chartContainer")
          .append('svg')
          .attr("width", 400)
          .attr("height", 400)
          .append('g');
  
          svg.append("pattern")
              .attr("id", "us")
              ///should be transformed to the US coordinates but the Algerian Flag appears
              .attr("patternTransform", "translate(-128, -154)")
              //this correctly shows the Canadian Flag
              //.attr("patternTransform", "translate(-16, -22)")
              .attr("width", 16)
              .attr("height", 11)
              .append("image")
              .attr("xlink:href", "https://dl.dropboxusercontent.com/u/5258675/flags.png")
              .attr("width", 256)
              .attr("height", 176);
  
      svg.append("rect")
          .attr("width", 16)
          .attr("height", 11)
          .attr("x", 50)
          .attr("y", 50)
          .attr("fill", "url(#us)");
  </code></pre>
  
  <p>Here is a codepen as well: <a href="https://codepen.io/andrewgi/pen/oBYMdp?editors=1010" rel="nofollow noreferrer">https://codepen.io/andrewgi/pen/oBYMdp?editors=1010</a>.</p>
  
  <p>The image sprite can be seen here for the coordinates: <a href="https://dl.dropboxusercontent.com/u/5258675/flags.png" rel="nofollow noreferrer">https://dl.dropboxusercontent.com/u/5258675/flags.png</a>.</p>