Question

我正在尝试使用SVG Filter重新创建Gooey效果。我有2个圆圈，我希望效果影响那2个圆圈，但我无法弄清楚这个例子中的问题是什么。请帮帮我。这是我的代码：

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>

Answer 1

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

你有一个拼写错误，它是feGaussianBlur，而不是feGuassianBlur

Answer 2

我改变了你的svg过滤器并且它有效，但我不知道代码中的错误在哪里。

编辑：好的，这是一个错字：）

＆＃13;

body {
  filter: url('#goo')
}
.circle {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #E63946;
  border-radius: 50%;
}
.circle-1 {
  left: 12%;
}

＆＃13;

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

＆＃13;

使用SVG玩Gooey效果

2 个答案: