为什么我的SVG看起来不像涟漪（关于feDisplacementMap过滤器）

我正在尝试制作一个波纹过滤器：

<radialGradient id="g" cx=".6" cy=".6" r=".05" spreadMethod="reflect">
  <stop offset="0" stop-color="#000"></stop>
  <stop offset="1" stop-color="#fff"></stop>
</radialGradient>

============================2020 03 17=====================

谢谢你回答我的问题

让我找到重点

============================

对于feImage，您需要使用外部svg，或者像我一样，使用data:uri。如果要使用data:uri，可以使用此svg编码器 现在它的工作完美

参考：

const filterFeImage=document.querySelector（“#f feImage”）；
常量xlink=”http://www.w3.org/1999/xlink";
设div=document.getElementById（'div'）；
让svg=document.getElementById（'svg'）；
让宽度=div.offsetWidth；
让高度=俯视距离；
svg.innerHTML='你好吗'；
设位移=0；
让速度=0.2；
函数setXlinkHref（）{
/*
*/
让xlinkHref=
“数据：image/svg+xml；utf8，%3Csvg version='1.1'xmlns='1http://www.w3.org/2000/svg'xmlns:xlink='1！'http://www.w3.org/1999/xlink'宽度='“+width+”'高度='“+height+”“%3E%3Cdefs%3E%3radialgradient id='rg'r=”.9“%3E”；
/*
*/
对于（变量i=0；i<11；i++）{
//偏移量=“${（i-2）*20+位移*2}%25”可以控制每一個波的波長
xlinkHref+=`%3Cstop
偏移量=“${（i-2）*20+位移*2}%25”
停止%2Dcolor='%23${i%2==0？“f00”：“000”}'%3E%3C/停止%3E`；
}
/*
*/
xlinkHref+=
%3C/radialGradient%3E%3C/defs%3E%3rect-id='width='“+width+”'height='“+height+”'fill='url（%23rg）'%3E%3C/rect%3E%3C/svg%3E”；
返回xlinkHref；
}
函数AnimateOffset（）{
设xlinkHref=setXlinkHref（）；
setAttributeNS（xlink，“href”，xlinkHref）；
//涟漪.setAttributeNS（xlink，“href”，xlinkHref）；
if（位移{
AnimateOffset（）；
}, 66);
//window.requestAnimationFrame（AnimateOffset）；

*{
保证金：0；
填充：0；
列表样式：无；
}
.分区{
宽度：100%；
高度：100vh；
背景：url（“201803190858589.jpg”）；
}
.div svg{
宽度：100%；
身高：100%；
}

有几件事：

由于使用的是

xChannelSelector=“R”yChannelSelector=“R”

，其中R代表红色，因此渐变需要一些红色

您需要用渐变填充feImage的矩形

<svg>
     <radialGradient id="g" cx=".6" cy=".6" r=".05" spreadMethod="reflect">
        <stop offset="0" stop-color="#000"></stop>
        <stop offset="1" stop-color="#f00"></stop>
      </radialGradient>
      <rect id="m1" width="410" height="300" fill="url(#g)"></rect>
</svg>

对于feImage，您需要使用外部svg，或者像我一样，使用data:uri

将过滤器应用于图像

我希望有帮助