SVG模式在不同的浏览器上表现不同

Question

我一直在Chrome 48和IE 11上尝试下面的SVG代码，它呈现的方式不同。特别是，IE无法识别模式定义中的“viewBox”标记。

是否有解决方法在Chrome和IE上以相同的方式获得此渲染？

 <svg id="svg" width="1400" height="1100" >
 <defs>
    <pattern id="pattern1" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="10 10 20 20" >
       <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
    </pattern> 
 </defs>

 <g>
    <rect x="100" y="100" width="300" height="300" stroke="green" 
    stroke-width="3" fill="url(#pattern1)" />
 </g> 

 </svg>

Chrome vs IE