Question

我正在尝试为IE8及更高版本优化建筑物着色器应用程序，并且我很难在IE8 +中使用png背景图像在div中显示SVG图层我试图在SO和其他一些论坛上进行研究，但在解决方案中找不到任何类似的问题。我希望有人可以提出建议或许是一个解决方案...... 这是我的代码的HTML部分：

<div class="container">
    <div class="row">
        <div class="col-lg-7">
            <div class="building_area_eave_1" id="building_area">
                <svg class="svg_layers" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
                <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
                <path id="main_wall_2" fill="#f7f7f7" d="M472.333,258.35V513L512,509.996L512.167,354l48.666,1.999l0.368,148.009l414.466-39L976,324.168  L472.333,258.35z M661.833,420L591,421v-59.834l70.833,2.667V420z"/>

            </svg>
        </div>
    </div>
   </div>
</div>

这就是CSS：

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}

.svg_layers {
    margin-top: 9px; 
    mix-blend-mode: multiply;
    opacity: 0.9;
}

.building_area_eave_1 {
    background: url("../images/1_part_eave_background.png") no-repeat;
}

该网站看起来不错，在FF和Safari中效果很好，但是building_area div并没有出现在IE8中，它在IE9 +中缩小了 mix-blend-mode : multiply过滤器在Chrome 46.xxx中无效，但这是另一个问题......此时我想为IE优化它。任何帮助都非常感谢。

可以查看测试网站here。

为IE优化SVG层

0 个答案: