title: preserveAspectRatio of pattern image in SVG like css background-image cover
body: <p>I have an SVG that is two triangles placed diagonally to make a rectangle. This rectangle is 100% width and height of the browser window. I am trying to fill each with one background image. To do this, I put the image into a pattern and gave each triangle a fill with that pattern.
  However, the image in the pattern does not maintain it's ratio on window resize. The image stretches and distorts. I want the image to act similar to how this css would work:</p>
  
  <pre><code>background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  </code></pre>
  
  <p>This is the code I have so far for the svg:</p>
  
  <pre><code>&lt;svg viewBox="0 0 25 25" preserveAspectRatio="none" width="100%" height="100%"&gt;
      &lt;defs&gt;
          &lt;pattern id="pattern3" height="100%" width="100%"
           patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
           preserveAspectRatio="xMidYMid slice"&gt;
              &lt;image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
                xlink:href="img/1.JPG" /&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
      &lt;polyline points="0,0  25,0  0,25"
          fill="url(#pattern3)" id="top"/&gt;
      &lt;polyline points="25,0  25,25  0,25"
          fill="url(#pattern3)"  id="bottom"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Please help me out!</p>