title: Prevent stretching / preserveAspectRatio for SVG pattern
body: <p>I have an svg path that I want to apply a pattern to. However, the pattern seems to be stretching horizontally and I think that I may be applying it incorrectly. Is there a way to make sure that an svg fill pattern maintains its ratio as if it were a background? My code is below and the jsFiddle below that is the similar with a slightly different settings. The pattern I want to apply is 500px by 500px. </p>
  
  <pre><code>&lt;svg 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" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"&gt;
  &lt;title&gt;Text Pattern Fill Example&lt;/title&gt;
  &lt;defs&gt;
      &lt;pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500"&gt;
          &lt;image xlink:href="img/textures/blogCont/white_wall_hash/white_wall_hash.png" x="0" y="0"
              width="500" height="500" /&gt;
      &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;path d="M0 0 C 50 100 80 100 100 0 Z" fill="url(#img1)" /&gt;        
  </code></pre>
  
  <p></p>
  
  <p>Here is a link to <a href="http://jsfiddle.net/RKLec/" rel="nofollow">a jsfiddle</a></p>
  
  <p>I am trying to combine <a href="http://subtlepatterns.com/white-wall-3/" rel="nofollow">this pattern</a> and the curve effect about 1/3 of the way down <a href="http://tympanus.net/Development/SectionSeparators/" rel="nofollow">this svg page.</a></p>
  
  <p>Thanks!</p>