SVG фильтр ремонт теневого пути - PullRequest
Новая
       8

SVG фильтр ремонт теневого пути

0 голосов
/ 23 ноября 2018

Как мне исправить разрыв между тенями?Я бы хотел, чтобы тень была непрерывной, а не прерывистой.Тень должна быть в одной черной линии без пробелов

Это мой пример: 

.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>

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Наблюдаемый вами разрыв - это затухание тени по мере того, как она достигает края фигуры.

Вместо того, чтобы заканчивать свой путь точно на краю 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>
0 голосов
/ 23 ноября 2018

Идея состоит в том, чтобы сохранить SVG простым и применять drop-shadow фильтр 

.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' viewbox='0 0 60 10' version='1.1'><path fill='white' d='M0,5 C25,0 35,10 60,5 v5 H0' /></svg>");
  height: 50px;
  left: -160px;
  filter:drop-shadow(0 -4px 3px #000);
}

.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>
...