title: SVG - preserveAspectRatio="none" not applying
body: <p>I have a simple SVG that i would like to stretch to fill its container without preserving aspect ratio. No matter what I seem to do the SVG seems to be preserving the aspect ratio, which I believe I have turned off in the SVG file. It just never wants to stretch to the full width of the container. What exactly is going wrong here? Thank you!</p>
  
  <p>SVG:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;svg 
  version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  width="100%" 
  height="100%"
  preserveAspectRatio="none" &gt;
  
  &lt;polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.issue-name {
      background-image:url(../img/IS-arrow.svg);
      padding-left:1rem !important;
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="large-11 small-10 columns text-center issue-name"&gt;
        &lt;h5 class="vertical-center"&gt;PLC Adjustments for Young Producers&lt;/h5&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="http://imgur.com/qaxAHZ0" rel="nofollow">Imgur link</a></p>