cannot apply drop shadow in IE11 - html

Question

how can i show in internet explorer 11 the same shadow that I can apply in chrome using this rule?
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
This is my working chrome markup 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>
and this is the 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);
}
Here you can find a chrome working CODEPEN

Answer 1

As rx2347 pointed out, IE does not support CSS Filter Effects
So the only way to add a drop shadow is apply the effect inside your svg by using a blurred black polygon positioned behind the image.
This is an updated version of your codepen with the applied effect https://codepen.io/samwalker/pen/XWbzpZX
I don’t have a PC/IE 11 so I used BrowserStack to test and the results below:
Notes:
1. I had to increase the size of the viewbox/svg so the shadow wasn’t clipped
<svg class="svg-cta-image" viewBox="0 0 660 600">
2. Created the feGaussianBlur as an svg filter def.
<filter id="blurFilter">
<feGaussianBlur stdDeviation="5" />
<filter />
The 'blur size' is set by the stdDeviation attr.
A good tool to show what is possible with IE filters is Hands on: SVG filter Effects it’s part of Azure websites & shows MS IE compatible filters
3. Created a group element inside the SVG the same shape as clip-path, this is our 'shadow'
<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>
The shadow’s style is set with fill colour and fill-opacity.
I had to offset the polygon’s start points by 10px to match the new position of the image.
4. Combined the 3 polygons into a single clipping path so you only need to load the image once. If you are going to use 3 different images you can easily change this back.
5. Offset the image from the edge of the svg box and reset it’s size x="10" y="10" width="640" height="580", you maybe want to do this in the css.
There are probably some changes you’ll want to make but hopefully this will get you on the right path.
Full markup below:
.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>