[英]cannot apply drop shadow in IE11
how can i show in internet explorer 11 the same shadow that I can apply in chrome using this rule?我如何在 Internet Explorer 11 中显示与我可以使用此规则在 chrome 中应用的阴影相同的阴影?
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
This is my working chrome markup HTML这是我的工作 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>
and this is the CSS这是 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在这里你可以找到一个 chrome 工作CODEPEN
As rx2347 pointed out, IE does not support CSS Filter Effects正如rx2347指出的那样, IE 不支持 CSS 滤镜效果
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.因此,添加阴影的唯一方法是使用位于图像后面的模糊黑色多边形在 svg 中应用效果。
This is an updated version of your codepen with the applied effect https://codepen.io/samwalker/pen/XWbzpZX这是具有应用效果的 codepen 的更新版本https://codepen.io/samwalker/pen/XWbzpZX
I don't have a PC/IE 11 so I used BrowserStack to test and the results below:我没有 PC/IE 11,所以我使用 BrowserStack 进行测试,结果如下: Notes:笔记:
1. I had to increase the size of the viewbox/svg so the shadow wasn't clipped 1.我不得不增加 viewbox/svg 的大小,这样阴影就不会被剪掉
<svg class="svg-cta-image" viewBox="0 0 660 600">
2. Created the feGaussianBlur
as an svg filter def
. 2.创建feGaussianBlur
作为 svg 过滤器def
。
<filter id="blurFilter">
<feGaussianBlur stdDeviation="5" />
<filter />
The 'blur size' is set by the stdDeviation
attr. “模糊大小”由stdDeviation
属性设置。
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展示 IE 过滤器功能的一个很好的工具是动手:SVG 过滤器效果它是 Azure 网站的一部分并显示 MS IE 兼容过滤器
3. Created a group element inside the SVG the same shape as clip-path, this is our 'shadow' 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>
The shadow's style is set with fill
colour and fill-opacity
.阴影的样式设置为fill
color 和fill-opacity
。
I had to offset the polygon's start points by 10px
to match the new position of the image.我不得不将多边形的起点偏移10px
以匹配图像的新位置。
4. Combined the 3 polygons
into a single clipping path so you only need to load the image once. 4.将 3 个polygons
组合成一个剪切路径,这样您只需加载一次图像。 If you are going to use 3 different images you can easily change this back.如果您要使用 3 个不同的图像,您可以轻松地将其更改回来。
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. 5.将图像从 svg 框的边缘偏移并重置其大小x="10" y="10" width="640" height="580"
,您可能希望在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.