CSSトランジション付きSVGフィルター

Question

CSSアニメーションでやっていた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> 

と

filter:url('#goo'); 

を使用しています。ここで

はフィドル https://codepen.io/sergey_mell/pen/MoRMwR

であり、私は次の問題に捕まってしまいました。アニメーションはいくつかのボックスの中のように実行されているように見えます（サイズは初期のアニメーションの状態サイズに依存するようです）。 誰も私がこれを避けるのを助けることができますか？

Answer 1

SVGフィルタには定義された "フィルタ領域"があり、その内部にエフェクトが適用されます。これは、一部の操作が非常に遅い場合（例：ガウスのぼかし）、一般的には計算面積を制限する必要があるためです。すなわち

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

は、要素がフィルタリングされ、加えてそれの外側約10％のボーダー：

フィルタのデフォルトのフィルタ領域です。その領域外のものは切り取られ（目に見えない）。

解決策は、すべてのブロブを包含するようにフィルタ領域を拡大することです。たとえば、マージンを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"/> 
 
    \t </filter> 
 
    </defs> 
 
</svg>

Answer 2

私は実際にそれが.blobsコンテナにwidth/heightを設定することで働かせた：

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

あなたはおそらく、あなたが必要とする最大サイズを見つけるし、代わりに500

Answer 3

のものに設定することができます置き換えられた要素（img、svgなど）のサイズを明示的に指定しなかった場合、ブラウザはデフォルトサイズ300px x 150px（または近いもの）を指定します。サイズがわからない場合は、正確なピクセルが必要な場合はjavascript、それを含む要素を塗りたい場合は100％、100％を設定する必要があります。