title: SVG scaled differently on different browsers
body: <p>I need to have my svg within div's as follows:</p>
  
  <pre><code>&lt;div style="height:100px; width: 300px; border:1px solid red;" &gt;
      &lt;div style="width: 100%; height: 100%; display: table;"&gt;
          &lt;div style="display:table-row; height:100%"&gt;
              &lt;div style="position: relative; vertical-align: middle; height:100%;"&gt;
                  &lt;div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;"&gt;
                      &lt;svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%"&gt;    
                              &lt;g transform="translate(1,1)"&gt;
                                  &lt;rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"&gt;&lt;/rect&gt;                    
                              &lt;/g&gt;                        
                      &lt;/svg&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the following SVG is rendered in different browsers in different ways. 
  Chrome:
  <img src="https://i.stack.imgur.com/SDg4i.png" alt="enter image description here"></p>
  
  <p>Firefox: </p>
  
  <p><img src="https://i.stack.imgur.com/sdAYK.png" alt="enter image description here"></p>
  
  <p>IE 9:</p>
  
  <p><img src="https://i.stack.imgur.com/iLiSY.png" alt="enter image description here"></p>
  
  <p>I want the image to be scaled as in chrome version. How can i achieve this?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/Sq5bL/5/" rel="nofollow noreferrer">http://jsfiddle.net/Sq5bL/5/</a></p>