时间戳

首页 > 解决方案 > 我如何创建一个结合了 feTurbulence 和 feGaussianBlur 的 svg 过滤器

svg - 我如何创建一个结合了 feTurbulence 和 feGaussianBlur 的 svg 过滤器

问题描述

如何创建具有大量模糊和颗粒状纹理的 svg 圆圈？

我不知道如何在过滤器中结合 GaussianBlur 和 feTurbulence，它只是应用或反转的粒状纹理。

我想要达到的模糊， 颗粒状的纹理

标签： svggaussianblur

解决方案

这是我相信你想要的一个例子。

  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>

推荐阅读