如何創建結合 feTurbulence 和 feGaussianBlur 的 svg 過濾器

Question

如何創建具有大量模糊和粒狀紋理的 svg 圓？

我不知道如何在過濾器中結合 GaussianBlur 和 feTurbulence，這只是應用或反轉的粒狀紋理。

我想要實現的模糊， 顆粒狀紋理

Answer 1

這是我相信你想要的一個例子。

1. 模糊原始對象
2. 創建（單色）顆粒
3. 在模糊對象的頂部合成紋理。

您必須在模糊后應用顆粒。 因為如果你反過來做，你只會模糊紋理。 而且很可能會失去效果。

 svg { width: 500px; }

 <svg viewBox="0 0 100 100"> <filter id="blur-plus-grain" x="-50%" y="-50%" width="200%" height="200%"> <!-- Blur the input object --> <feGaussianBlur stdDeviation="10" result="blur"/> <!-- Create some grainy noise --> <feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="3" stitchTiles="stitch"/> <!-- Make the grain greyscale --> <feColorMatrix type="saturate" values="0" result="grain"/> <!-- Composit the grain onto the blurred object --> <feComposite operator="in" in="blur" in2="grain"/> </filter> <ellipse cx="50" cy="50" rx="30" ry="20" fill="gold" filter='url(#blur-plus-grain)'/> </svg>