css - svg filter shadow path repair
问题描述
How do I fix the gap between shadows? I would like the shadow to be continuous, not intermittent. Shadow should be in one black line without any spaces
This is my example:
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M0,5 C25,0 35,10 60,5 v5 H0' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
解决方案
您看到的不连续性是阴影在到达形状边缘时逐渐消失。
与其在 SVG 的边缘完全结束路径,不如尝试将形状从左边缘和右边缘延伸一点。在下面的示例中,我使用五个单位线段在每一侧将形状扩展得更宽。
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M-5,5 L0,5 C25,0 35,10 60,5 H 65 v5 H-5' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
推荐阅读
- django - 如何加密 djanog.ckeditor Richtextfield 的数据?
- c# - Windows Forms C# 应用程序 - 当用户为操作系统字体大小选择 125% 或 150% 时,设置表单控件的字体大小以适应屏幕?
- java - 在 Veracode (CWE 117) 中使用 slf4j LOGGER 时出现 CRLF 注入漏洞
- python - 在 Python cronjob 中设置 Docker 环境变量
- android - 如何以编程方式从 Wi-Fi 获取 Internet 提供商信息?
- electron - Electron + Nuxt:使用 Bootstrap-vue 收到警告($attrs 是只读的,$listeners 是只读的)
- node.js - 使用 AWS 开发工具包 Nodejs 将 HTML 上传到 S3 存储桶
- html - 如何使图像左对齐和内容右对齐?
- python - 如何在tensorflow中将字符串转换为float32
- c# - 如何防止子控制器类继承 [ApiExplorerSettings(IgnoreApi = true)]