Question

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

IE9没有问题
IE10没有显示任何内容
IE11在小提琴中工作，但在制作中仅显示页面上的最后一个

<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>

Answer 1

Microsoft SVG偏差对pattern元素的主题含糊不清：

display属性影响模式元素和对这些模式元素的引用

关于xml:space：

的主题

SVG不支持xml：space属性。

所以xml:space和pattern偏差可能会导致IE的一个版本没有副作用，但在另一个版本中会产生一些副作用。

<强>参考

在IE10 +中SVG奇怪的行为

1 个答案: