title: SVG pattern behaves different on different browsers
body: <p>I have been trying the SVG code below on Chrome 48 and IE 11 and it renders differently. In particular, IE does not recognize the "viewBox" tag in the pattern definition. </p>
  
  <p>Is there a workaround to get this rendering identically on Chrome and IE ?</p>
  
  <pre><code> &lt;svg id="svg" width="1400" height="1100" &gt;
   &lt;defs&gt;
      &lt;pattern id="pattern1" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="10 10 20 20" &gt;
         &lt;circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" /&gt;
      &lt;/pattern&gt; 
   &lt;/defs&gt;
  
   &lt;g&gt;
      &lt;rect x="100" y="100" width="300" height="300" stroke="green" 
      stroke-width="3" fill="url(#pattern1)" /&gt;
   &lt;/g&gt; 
  
   &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/oBiPu.png" rel="nofollow">Chrome vs IE</a></p>