2017-03-24 9 views
0

現在、私はSVG FilterでGooeyエフェクトを再作成しようとしています。私は2つのサークルを持っていますが、効果はその2つのサークルに影響を与えたいのですが、この例では何が問題か分かりません。それで私を助けてください。ここに私のコードは次のとおりです。SVGでGooeyエフェクトを再生する

body { 
 
    filter: url('#goo') 
 
} 
 
.circle { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: #E63946; 
 
    border-radius: 50%; 
 
} 
 
.circle-1 { 
 
    left: 12%; 
 
}
<div class="circle circle-1"></div> 
 
<div class="circle circle-2"></div> 
 
<svg> 
 
    <defs> 
 
    <filter id="goo"> 
 
     <feGuassianBlur in="SourceGraphic" stdDeviation="5" result="gaussianBlur"></feGuassianBlur> 
 
     <feColorMatrix in="gaussianBlur" type='matrix' 
 
        values="1 0 0 0 0 
 
          0 1 0 0 0 
 
          0 0 1 0 0 
 
          0 0 0 12 -6" result="color-matrix" /> 
 
     <feBlend in="SourceGraphic" in2="color-matrix" /> 
 
    </filter> 
 
    </defs> 
 
</svg>

+0

feGuassianBlurはタイプミス –

答えて

2

https://jsfiddle.net/359h9m5m/1/

あなたはタイプミスがあり、それは私があなたのSVGフィルターを変更し、それが動作しますが、私はドンfeGaussianBlur、ないfeGuassianBlur

+0

ああです!愚かな私!大変ありがとう@マハルカス –

1

ですあなたのコードのどこにバグがあるのか​​知りません。

編集:[OK]を、それはタイプミスだった:)

body { 
 
    filter: url('#goo') 
 
} 
 
.circle { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: #E63946; 
 
    border-radius: 50%; 
 
} 
 
.circle-1 { 
 
    left: 12%; 
 
}
<div class="circle circle-1"></div> 
 
<div class="circle circle-2"></div> 
 
<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 19 -9" result="goo" /> 
 
     <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
 
    </filter> 
 
    </defs> 
 
</svg>

+0

ごめんなさい:))ありがとう –

関連する問題