Filtre SVG avec transitions CSS

Question

Je faisais et le filtre de svg avec l'animation de css. J'utilise

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

et

filter:url('#goo'); 

pour conteneur en CSS.

est ici un violon https://codepen.io/sergey_mell/pen/MoRMwR

Et je me suis coincé dans le prochain numéro. L'animation semble se dérouler comme dans une boîte (sa taille semble dépendre de la taille initiale de l'animation). Quelqu'un peut-il m'aider à éviter cela?

Answer 1

Les filtres SVG ont une "région de filtre" définie à l'intérieur de laquelle les effets sont appliqués. En effet, certaines opérations peuvent être très lentes (par exemple, le flou gaussien) et vous souhaitez généralement limiter la zone sur laquelle elles sont calculées.

La région de filtre par défaut d'un filtre est:

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

En d'autres termes, l'élément étant séparé par filtration, plus de 10% de bordure autour de l'extérieur de celui-ci. Tout ce qui est en dehors de cette zone sera coupé (et invisible).

La solution consiste à augmenter la zone de filtrage afin qu'elle englobe tous vos blobs. Ainsi, par exemple, si nous augmentons la marge à 50%

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

il fonctionne maintenant correctement.

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"/> 
 
    \t </filter> 
 
    </defs> 
 
</svg>

Answer 2

En fait, je fait fonctionner en définissant un width/height au conteneur .blobs:

.blobs{ 
    filter:url('#goo'); 
    position:absolute; 
    top:100px; 
    left:200px; 
    width: 500px; 
    height: 500px; 
} 

Vous pouvez probablement la taille maximale dont vous avez besoin et le mettre qu'au lieu de 500.

Answer 3

Si vous ne dimensionnez pas explicitement un élément remplacé (img, svg etc.) alors le navigateur lui donne une taille par défaut de 300px x 150px (ou quelque chose de près). Si vous ne connaissez pas la taille, vous devez le définir via javascript si vous avez besoin de pixels précis, ou 100%, 100% si vous voulez qu'il remplisse son élément contenant.