title: d3.js - filling `image` from pattern shrinks the image size
body: <p><img src="https://i.stack.imgur.com/hBOcX.jpg" alt="shrinked image">I created a circle. i would like to fill the circle with one of my circled image. for this i created a patter and appended a image in it.</p>
  
  <p>after i <code>fill</code> the pattern, the image is not the right size here. what is the issue? any one correct me please?</p>
  
  <p><strong>or any one show me the correct way to fill the image to a circle?</strong></p>
  
  <p>i commented the information along the code for details:</p>
  
  <pre><code>patterns : function () {
  
          this.svgElement
              .append('pattern')
                  .attr({
                      id:'progImage',
                      width:180,
                      height:88,
                      x:0,
                      y:0
                  })
              .append('image')
                  .attr({
                      x:0,
                      y:0,
                      width:180, //width
                      height:88, //height of image
                      'xlink:href':"images/programme_up.png" //image
                  });
  
      },
  
      createSvg : function () {
          var that = this;
          this.svgElement = d3.select(this.container)
              .append('svg')
              .attr({
                  id:'dashBoard',
                  width:this.svgWidth,
                  height:this.svgHeight,
                  'perserveAspectRatio' :'xMinYMin none',
                  viewBox:"0 0 "+this.svgWidth+" "+this.svgHeight
          });
      },
  
      dashBoard : function () {
          this.svgElement
              .append('circle')
              .attr({
                  r: 135,
                  cx:this.svgWidth/2,
                  cy:this.svgHeight/3,
                  fill:'url(#progImage)', //filling here. but the bg is very small..why
                  stroke:'white',
                  'stroke-width':1
              });
      }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Actually i require this should be my output:</p>
  
  <p><img src="https://i.stack.imgur.com/rnhLl.png" alt="What i require"></p>