title: SVG issues in ie11
body: <p>I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that.
  The child of that is a SVG file which I set the width to 200% of the container.
  In chrome and firefox that works fine, I get a nice image like this:</p>
  
  <p><a href="https://i.stack.imgur.com/vEZqf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vEZqf.png" alt="enter image description here"></a></p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div class="kit-template ng-isolate-scope front"&gt;
      &lt;div class="svg-document ng-scope"&gt;
          &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope"&gt;
              &lt;!-- Removed for brevity --&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS/SASS looks like this: </p>
  
  <pre><code>.kit-template {
      overflow: hidden;
      position: relative;   
      height: 320px;
  
      .svg-document {  
          width: 100%;   
          overflow: hidden;
          margin: 0 auto;
          /*position: absolute;
          bottom: 0;*/
  
          svg {
              width: 200%;
  
              path, polyline, polygon, rect {
                  cursor: pointer;
              }
          }
      }
  }
  </code></pre>
  
  <p>Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/g6w4f.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g6w4f.png" alt="enter image description here"></a></p>
  
  <p>And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.</p>
  
  <p>Does anyone know why this is happening and how I can fix it?</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I have created a very simple version on codepen so you can see the issue.
  Here it is:</p>
  
  <p><a href="http://codepen.io/r3plica/pen/Kdypwe" rel="noreferrer">http://codepen.io/r3plica/pen/Kdypwe</a></p>
  
  <p>View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.</p>