title: How can i scale a shape without scaling its pattern?
body: <p>I have an svg shape which uses a pattern. I want the pattern to NOT scale when i scale the shape.</p>
  
  <p>Here's a fiddle with a minimal example, the bigger circle should show the pattern like the smaller one:</p>
  
  <p><a href="http://jsfiddle.net/cTMrQ/6/" rel="nofollow">http://jsfiddle.net/cTMrQ/6/</a></p>
  
  <pre><code>&lt;svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"&gt;
      &lt;defs&gt;
          &lt;pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"&gt;
              &lt;image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" /&gt;
          &lt;/pattern&gt;
          &lt;circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" /&gt;
      &lt;/defs&gt;
      &lt;use x="100" y="100" xlink:href="#c" /&gt;
      &lt;use x="200" y="100" xlink:href="#c" transform="scale(2)" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>In the end the shape will be a complex path and the image in the pattern will be a scan of a piece of paper, so just drawing a bigger circle instead of scaling it won't work.</p>
  
  <p><strong>Update</strong></p>
  
  <p>To clarify what i want, here are two images:</p>
  
  <p>this is what it looks like, no matter what i try, when i scale the shape:
  <a href="http://inwonderland.at/new/ihave.png" rel="nofollow">http://inwonderland.at/new/ihave.png</a></p>
  
  <p>this is what i want:
  <a href="http://inwonderland.at/new/iwant.png" rel="nofollow">http://inwonderland.at/new/iwant.png</a></p>
  
  <p>i want the background image (bitmap image) to always have its natural size.</p>