如何将 feTurbulence 和 feDisplacementMap 与 `svg.filter.js` 结合使用？

Question

此 SVG 滤镜：

<filter id="xkcdify" filterUnits="userSpaceOnUse" x="-5" y="-5" width="100%" height="100%">
  <feTurbulence 
      type="fractalNoise" baseFrequency="0.05" result="noise" 
  />
  <feDisplacementMap 
      scale="5" xChannelSelector="R" yChannelSelector="G" 
      in="SourceGraphic" in2="noise" 
  />
</filter>

被 Chart XKCD package 用来将置换贴图应用于 SVG 数据。

我正在尝试确定如何使用 svg.filter.js 制作类似的过滤器，但我所拥有的不起作用：

    g.filterWith(add =>
      add
        .turbulence(0.05, 1, 0, "stitch", "fractalNoise")
        .displacementMap(add.SourceGraphic, 5, "R", "G")
    );

以上代码生成此过滤器：

<filter id="SvgjsFilter1029">
  <feTurbulence 
    id="SvgjsFeTurbulence1027" 
    in="SourceGraphic"
    result="SvgjsFeTurbulence1027"  
    type="fractalNoise" stitchTiles="stitch" seed="115" 
    numOctaves="1" baseFrequency="0.05" 
  />
  <feDisplacementMap 
    id="SvgjsFeDisplacementMap1028" 
    in="SvgjsFeTurbulence1027" 
    result="SvgjsFeDisplacementMap1028"
    yChannelSelector="G" xChannelSelector="R" scale="5" 
  />
</filter>

这不是我想要的。

它需要我的输入：

然后把它变成这样：

我的目标是生成一个像第一个那样的过滤器，当它应用于输入时会得到：

有没有办法用 svg.filter.js 做到这一点？

Answer 1

两件事：

add.SourceGraphic应该是add.$source（readme中有很多例子）。
要按 feDisplacementMap 的正确顺序获得 in/in2，您需要分步创建过滤器（无链接）。

rect.filterWith(add => {
    var noise = add.turbulence(0.05, 1, 0, "stitch", "fractalNoise");
    add.displacementMap(add.$source, noise, 5, "R", "G");
});

https://jsfiddle.net/yxobe2dp/

如何将 feTurbulence 和 feDisplacementMap 与 `svg.filter.js` 结合使用？

How to use feTurbulence and feDisplacementMap with `svg.filter.js`?

svg

svg-filters

svg.js