Применение SVG filter совместно CSS transitions

248

11 сентября 2017, 03:21

Я сделал svg-фильтр с анимацией css:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
   </filter>
 </defs>
</svg>

И применил его к контейнеру CSS.

filter:url('#goo');

Здесь пример

И я застрял в следующем вопросе:

Анимация выполняется внутри какого-то окна (размер зависит от размера начальной анимации).

Может ли кто-нибудь помочь мне устранить это?

Источник: SVG filter with CSS transitions @Sergey Mell

Answer 1

Фильтры SVG имеют определенный filter region, внутри которого применяются эффекты.
Это вызвано тем, что некоторые операции могут быть очень медленными (например, гауссовское размытие), и поэтому область ограничена, внутри которой происходят вычисления.

Область действия фильтра по умолчанию:

x="-10%" y="-10%" width="120%" height="120%"

Другими словами, к элементу, который фильтруется, добавляется 10% -ная граница вокруг него.
Все, что находится за пределами этой области, будет обрезано (и невидимо).

Решение состоит в том, чтобы увеличить область действия фильтра так, чтобы она охватывала все ваши капли.

Так, например, если мы увеличим margin до 50%

<filter id="goo" x="-50%" y="-50%" width="200%" height="200%">

то теперь фильтр работает правильно.

body{ 
  background:white; 
  background-image:url(https://i.imgur.com/d47ZIU3.jpg); 
  background-size:cover; 
} 
.blobs{ 
  filter:url('#goo'); 
  position:absolute; 
  top:100px; 
  left:200px; 
} 
 
@keyframes blob-left-top-anim{ 
  0%{ 
    transform:scale(1.1) translate(0,0); 
  } 
  33%{ 
    transform:scale(0.9) translate(-65px,0); 
  } 
  62%{ 
    transform:scale(0.7) translate(-65px,-65px); 
 
  } 
  94%{ 
    transform:scale(1.1) translate(0,0); 
  } 
} 
 
@keyframes blob-right-top-anim{ 
  0%{ 
    transform:scale(1.1) translate(0,0); 
  } 
  33%{ 
    transform:scale(0.9) translate(65px,0); 
  } 
  64%{ 
    transform:scale(0.7) translate(65px,-65px); 
  } 
  96%{ 
    transform:scale(1.1) translate(0,0); 
  } 
} 
@keyframes blob-left-bottom-anim{ 
  0%{ 
    transform:scale(1.1) translate(0,0); 
  } 
  33%{ 
    transform:scale(0.9) translate(-65px,0); 
  } 
  66%{ 
    transform:scale(0.7) translate(-65px,65px); 
  } 
  98%{ 
    transform:scale(1.1) translate(0,0); 
  } 
} 
 
@keyframes blob-right-bottom-anim{ 
  0%{ 
    transform:scale(1.1) translate(0,0); 
  } 
  33%{ 
    transform:scale(0.9) translate(65px,0); 
  } 
  68%{ 
    transform:scale(0.7) translate(65px,65px); 
  } 
  100%{ 
    transform:scale(1.1) translate(0,0); 
  } 
} 
.blob{ 
  position:absolute; 
  background:#e97b7a; 
  left:50%; 
  top:50%; 
  width:100px; 
  height:100px; 
  line-height:100px; 
  text-align:center; 
  color:white; 
  font-size:40px; 
  border-radius:100%; 
  margin-top:-50px; 
  margin-left:-50px; 
  animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 4s infinite; 
} 
 
   
.blob:nth-child(2){ 
  animation-name:blob-right-top-anim; 
} 
.blob:nth-child(3){ 
  animation-name:blob-left-bottom-anim; 
} 
.blob:nth-child(4){ 
  animation-name:blob-right-bottom-anim; 
}

<div class="blobs"> 
  <div class="blob">4</div> 
  <div class="blob">3</div> 
  <div class="blob">2</div> 
  <div class="blob">1</div> 
</div> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <defs> 
    <filter id="goo" x="-50%" y="-50%" width="200%" height="200%"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> 
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" /> 
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
  	</filter> 
  </defs> 
</svg>

Источник: SVG filter with CSS transitions @Paul LeBeau