如何創建SVGGooey效果-有解無憂

我正在嘗試重新創建這樣的東西。

這是我嘗試過的

// targeting the svg itself
const svg = document.querySelector("svg");

// variable for the namespace 
const svgns = "http://www.w3.org/2000/svg"

//vboxDim

var vboxW = 200;
var vboxH = 200;

//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', `0 0 ${vboxW} ${vboxH}`);

//make background
var fill1 = 'black';

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute("width", `${vboxW}`);
bg.setAttribute("height", `${vboxH}`);
bg.setAttribute("fill", fill1);

svg.appendChild(bg);

var color = ['white', 'white']
var r = 20;
var cx = (vboxH / 2);
var cy = (vboxW / 2) - 20;

for (var i = 0; i < 2; i  ) {
    let circ = document.createElementNS(svgns, 'circle');
    circ.setAttribute('class', 'crcl'   i);
    circ.setAttribute('id', 'crcl'   i);
    circ.setAttribute("cx", `${cx}`);
    circ.setAttribute("cy", `${cy}`);
    circ.setAttribute("r", r);
    circ.setAttribute("fill", color[i]);
    svg.appendChild(circ);
    r = r - 12;
    cy = cy   .5;


}

.crcl0 {
    filter: url(#goo);
}

.crcl1 {
    filter: url(#goo);
    animation: move 5s linear infinite alternate forwards;
}

@keyframes move {
    0% {
        transform: translate(-80px, 0);
    }
    100% {
        transform: translate( 80px, 0);
    }

<!DOCTYPE html>
<html>

<body>
    <link rel="stylesheet" href="style.css"></link>
    <svg>
      <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 20 -10" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
  
    <script href="index.js"></script>
</svg>

</body>

</html>

正如你所看到的，它根本沒有創造出想要的效果。我似乎無法理解為什么會這樣。我知道在創造一種粘糊糊的效果時background color，我相信上面的情況必須是對比的。

有人可以幫我指出我在這里做錯了什么的正確方向嗎？另外，我需要承認我不理解svg filter這里使用的數學。是否需要對其進行操作才能達到預期的效果？

uj5u.com熱心網友回復：

過濾器必須同時影響兩個形狀，以便它們是同一“SourceGraphic”的一部分。為此，您可以使用一個<g>元素并在其上添加過濾器：

// targeting the svg itself
const svg = document.querySelector("svg");

// variable for the namespace 
const svgns = "http://www.w3.org/2000/svg"

//vboxDim

var vboxW = 200;
var vboxH = 200;

//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', `0 0 ${vboxW} ${vboxH}`);

//make background
var fill1 = 'black';

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute("width", `${vboxW}`);
bg.setAttribute("height", `${vboxH}`);
bg.setAttribute("fill", fill1);

svg.appendChild(bg);

var group = document.createElementNS(svgns, "g");
group.classList.add("gooey");
svg.appendChild(group);

var color = ['white', 'white']
var r = 20;
var cx = (vboxH / 2);
var cy = (vboxW / 2) - 20;

for (var i = 0; i < 2; i  ) {
  let circ = document.createElementNS(svgns, 'circle');
  circ.setAttribute('class', 'crcl'   i);
  circ.setAttribute('id', 'crcl'   i);
  circ.setAttribute("cx", `${cx}`);
  circ.setAttribute("cy", `${cy}`);
  circ.setAttribute("r", r);
  circ.setAttribute("fill", color[i]);
  group.appendChild(circ);
  r = r - 12;
  cy = cy   .5;
}

.gooey {
  filter: url(#goo);
}

.crcl1 {
  animation: move 5s linear infinite alternate forwards;
}

@keyframes move {
  0% {
    transform: translate(-80px, 0);
  }
  100% {
    transform: translate( 80px, 0);
  }
}

<!DOCTYPE html>
<html>

<body>
  <link rel="stylesheet" href="style.css"></link>
  <svg>
      <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 20 -10" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
  
    <script href="index.js"></script>
</svg>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454222.html

標籤：css svg CSS动画 svg 过滤器

上一篇：如何在使用成幀器動作懸停時從中心制作比例

下一篇：填充非凸SVG路徑