html - 无法在 IE11 中应用投影
问题描述
我如何在 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
解决方案
正如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
attr 设置。
展示 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
颜色和设置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>
推荐阅读
- emacs - Emacs - 我应该如何自定义函数行为?
- ios - 在 iOS 中通过 SSL 流式传输 RTSP (RTSPS)
- azure - 如何根据发出请求的用户定义 Logic-App 响应
- javascript - 从角度2 +反应形式的输入字段中删除连字符
- sql - 如何在 bigquery 中选择不同的值(多个值)?
- c# - 使用 HTTP 模块将用户重定向到另一个站点以进行自定义身份验证
- python - 如何解决 Python OpenGL 内存泄漏问题?
- javascript - 在 Preact 的 FunctionalComponent 中更新状态中的对象
- vba - 在 SharePoint 文件夹中查询 Access 数据库,在回收站中创建一个“.laccdb”文件
- javascript - 如何根据javascript中图像的标题显示图像?