Debugging IE10中的SVG奇怪行为+

我正在使用svg模式为页面后面svg的fill属性定义自定义背景图像。我将原始svg和模式定义隐藏在页面顶部

IE9没有问题 IE10没有显示任何内容 IE11在小提琴中工作，但在生产中只显示页面上的最后一个 下面是一个简单的示例：

---

Microsoft SVG在模式元素主题上的偏差是模糊的：

“显示”属性会影响阵列元素以及对这些阵列元素的引用

关于xml主题：空间：

SVG中不支持xml:space属性

因此，xml：空间和模式偏差可能在一个版本的IE中不会产生副作用，但在另一个版本中会产生一些副作用

参考资料

<div style="height:0px; overflow:hidden">
    <svg version="1.1" x="0px" y="0px" width="0" height="0" viewBox="0 0 140 155">
        <defs>  
            <pattern id="oil-gas" patternUnits="userSpaceOnUse" width="186" height="206">
                <image xlink:href="http://megastaging.com/erc/wp-content/uploads/2013/12/Oil_1-500x554-1390485365.jpg" x="0" y="0" width="186" height="206"></image>
            </pattern>
            <pattern id="marine" patternUnits="userSpaceOnUse" width="186" height="206">
                <image xlink:href="http://megastaging.com/erc/wp-content/uploads/2014/01/Marine_Header-500x554-1390486195.jpg" x="0" y="0" width="186" height="206"></image>
            </pattern>                                          
        </defs>
    </svg>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="154.046px" viewBox="0 0 140 154.046" enable-background="new 0 0 140 154.046" xml:space="preserve">
    <path id="hex-140-155" d="M78.113,152.144c-4.431,2.531-11.684,2.537-16.118,0.016l-53.869-30.63c-4.434-2.522-8.067-8.718-8.071-13.769
    L0,46.407c-0.004-5.051,3.617-11.252,8.047-13.782l53.81-30.724c4.43-2.529,11.684-2.536,16.118-0.014l53.867,30.628
    c4.435,2.522,8.153,9.322,8.158,14.374l-0.031,60.748c0.005,5.051-3.615,11.253-8.046,13.783L78.113,152.144z">            </path>
    </svg>
</div>

<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
    <use xlink:href="#hex-140-155" fill="url(#oil-gas)"></use>
</svg>                      
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
    <use xlink:href="#hex-140-155" fill="url(#marine)"></use>
</svg>