無法在 IE11 中應用陰影

Question

我如何在 Internet Explorer 11 中顯示與我可以使用此規則在 chrome 中應用的陰影相同的陰影？

    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));

這是我的工作 chrome 標記 HTML

<div class="cta-image-container">
<div>
    <svg class="svg-cta-image">
        <image filter="url(#dropshadow)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<div>
    <svg class="svg-cta-image">
        <image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<div>
    <svg class="svg-cta-image">
        <image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<svg>
    <defs>
        <clipPath id="split-1-3">
            <polygon points="222,580 0,580 0.12,0 176,0"></polygon>
        </clipPath>
    </defs>
</svg>
<svg>
    <defs>
        <clipPath id="split-2-3">
            <polygon points="400,0 196,0 242,580 446,580"></polygon>
        </clipPath>
    </defs>
</svg>
<svg>
    <defs>
        <clipPath id="split-3-3">
            <polygon points="640,0 420,0 466,580 640,580"></polygon>
        </clipPath>
    </defs>
</svg>

這是 CSS

.cta-image-container svg{
    position: absolute;
}
.cta-image-container {
    width: 640px;
    height: 580px;
    margin: 0 25px 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}
.svg-cta-image {
    width: 640px;
    height: 580px;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}

在這里你可以找到一個 chrome 工作CODEPEN

Answer 1

正如rx2347指出的那樣， IE 不支持 CSS 濾鏡效果

因此，添加陰影的唯一方法是使用位於圖像后面的模糊黑色多邊形在 svg 中應用效果。

這是具有應用效果的 codepen 的更新版本https://codepen.io/samwalker/pen/XWbzpZX

我沒有 PC/IE 11，所以我使用 BrowserStack 進行測試，結果如下： 筆記：

1.我不得不增加 viewbox/svg 的大小，這樣陰影就不會被剪掉

<svg class="svg-cta-image" viewBox="0 0 660 600">

2.創建feGaussianBlur作為 svg 過濾器def 。

<filter id="blurFilter">
    <feGaussianBlur stdDeviation="5" />
<filter />

“模糊大小”由stdDeviation屬性設置。

展示 IE 過濾器功能的一個很好的工具是動手：SVG 過濾器效果它是 Azure 網站的一部分並顯示 MS IE 兼容過濾器

---

3.在SVG內部創建一個與clip-path形狀相同的組元素，這是我們的“陰影”

 <g id="shadow" fill="black" filter="url(#blurFilter)" fill-opacity="0.5">
    <polygon points="222,580 10,580 10,10 176,10"></polygon>
    <polygon points="400,10 196,10 242,580 446,580"></polygon>
    <polygon points="640,10 420,10 466,580 640,580"></polygon>
 </g>

陰影的樣式設置為fill color 和fill-opacity 。

我不得不將多邊形的起點偏移10px以匹配圖像的新位置。

---

4.將 3 個polygons組合成一個剪切路徑，這樣您只需加載一次圖像。 如果您要使用 3 個不同的圖像，您可以輕松地將其更改回來。

---

5.將圖像從 svg 框的邊緣偏移並重置其大小x="10" y="10" width="640" height="580" ，您可能希望在 css 中執行此操作。

---

您可能需要進行一些更改，但希望這能讓您走上正確的道路。

完整標記如下：

 .cta-image-container { width: 660px; height: 600px; margin: 25px auto; position: relative; }

 <div class="cta-image-container"> <div> <svg class="svg-cta-image" viewBox="0 0 660 600"><!-- increased veiwbox by 20px so shadow isn't clipped --> <defs xmlns="http://www.w3.org/2000/svg"> <clipPath id="split-in-3"><!-- combined clipping path --> <polygon points="222,580 0,580 0.12,0 176,0"></polygon> <polygon points="400,0 196,0 242,580 446,580"></polygon> <polygon points="640,0 420,0 466,580 640,580"></polygon> </clipPath> <filter id="blurFilter"> <feGaussianBlur stdDeviation="5" /><!-- size of shadow --> <filter /> </defs> <g id="shadow" fill="black" filter="url(#blurFilter)" fill-opacity="0.5"><!-- `fill` & `fill-opacity` set the shadow's color --> <polygon points="222,580 10,580 10,10 176,10"></polygon><!--`0`s replaced by 10 to offset shadow from edge of svg --> <polygon points="400,10 196,10 242,580 446,580"></polygon> <polygon points="640,10 420,10 466,580 640,580"></polygon> </g> <image clip-path="url(#split-in-3)" x="10" y="10" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image><!-- positioned at 10px `x` & `y` to offset from edge of svg --><!-- reset size to match original --> </svg> </div> </div>