title: Position an element on each corner no matter the size of the svg
body: <p>I'm trying to create an SVG that has an element in each corner. I want the svg to be scaleable, whilst the corner elements <strong>retain their size</strong> and <strong>aspect ratio</strong>... whilst sticking to the corners. </p>
  
  <p>I feel like with a lot of javascript fiddling, this could be done. But I really feel this could be done with some clever css and a good understanding of how SVG's actually work. </p>
  
  <p>This is an example of how I'd expect it to work: <a href="https://jsfiddle.net/marknotton/o5r1e5xL/2/" rel="nofollow"><strong>Demo Fiddle</strong></a>. This is just html and css. </p>
  
  <pre><code>div { width:40px; height:40px; position:absolute; 
    &amp;:nth-of-type(1) { top:0; left:0; background-color:red;}
    &amp;:nth-of-type(2) { top:0; right:0; background-color:blue;}
    &amp;:nth-of-type(3) { bottom:0; left:0; background-color:green;}
    &amp;:nth-of-type(4) { bottom:0; right:0; background-color:yellow;}
  }
  </code></pre>
  
  <p><strong>This is where I got to before finally coming here: <a href="https://jsfiddle.net/marknotton/qq40vcqo/" rel="nofollow">Fiddle</a></strong></p>
  
  <pre><code>&lt;svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 100 100"  xml:space="preserve" preserveAspectRatio="none"&gt;
  
    &lt;svg id="top-left" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet"&gt;
      &lt;rect width="20" height="20" fill="red" style="y:0; x:0"/&gt;
    &lt;/svg&gt;
  
    &lt;svg id="top-right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMin meet"&gt;
      &lt;rect width="20" height="20" fill="blue" style="y:0; x:calc(100% - 20px)"/&gt;
    &lt;/svg&gt;
  
    &lt;svg id="bottom-left" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet"&gt;
      &lt;rect width="20" height="20" fill="green" style="y:calc(100% - 20px); x:0"/&gt;
    &lt;/svg&gt;
  
    &lt;svg id="bottom-right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMax meet"&gt;
      &lt;rect width="20" height="20" fill="yellow" style="y:calc(100% - 20px); x:calc(100% - 20px)"/&gt;
    &lt;/svg&gt;  
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>Any insight would be greatly appriciated. </p>
  
  <p>Cheers, </p>
  
  <p>Mark</p>