React项目中SVG线性渐变、rect与feDisplacementMap结合及滤镜失效排查

你的SVG滤镜未生效，核心问题有以下几点，逐一解决即可：

1. 滤镜未被任何元素引用 #

你定义了<filter id="f">，但没有任何SVG元素添加filter="url(#f)"属性——滤镜必须被明确应用到目标元素上才会触发效果。

2. 滤镜未放置在<defs>中（规范问题） #

虽然SVG允许滤镜直接放在根节点，但<defs>是专门存放可复用定义（滤镜、渐变、蒙版等）的区域，把滤镜移进去更符合规范，也能避免意外渲染。

3. primitiveUnits与feImage的适配问题 #

你设置了primitiveUnits="objectBoundingBox"，但<feImage>未指定0-1范围的比例值（x/y/width/height），这会导致位移图尺寸不符合预期。建议改用userSpaceOnUse，和SVG全局坐标系统保持一致，更直观。

4. 循环引用风险（可选） #

如果直接给<rect id="rectangle">应用滤镜，而滤镜内部又通过<feImage>引用这个rect，会触发循环引用，浏览器可能无法正确渲染。建议把位移映射图（你的渐变rect）和被滤镜处理的元素分开。

修复后的代码示例 #

<svg
  xmlns="http://www.w3.org/2000/svg"
  ref={svgRef}
  width="1000"
  height="200"
  style={{
    width: '1000px',
    display: 'block',
    position: 'absolute',
    bottom: 0,
  }}
>
  <defs>
    <linearGradient
      id="grad1"
      x1="0%"
      y1="11%"
      x2="0%"
      y2="32%"
    >
      <stop
        offset="0%"
        style={{ stopColor: 'rgb(255,0,0)', stopOpacity: '1' }}
      />
      <stop
        offset="100%"
        style={{ stopColor: 'rgb(0,0,0)', stopOpacity: '1' }}
      />
    </linearGradient>
    <!-- 把滤镜移到defs里 -->
    <filter id="f" primitiveUnits="userSpaceOnUse">
      <feImage
        ref={feImageRef}
        result="pict2"
        xlinkHref="#displacement-map"
        x="0"
        y="0"
        width="1000"
        height="100"
      />
      <feDisplacementMap
        rotate={rotate}
        scale={scale}
        xChannelSelector="R"
        yChannelSelector="R"
        in2="pict2"
        in="SourceGraphic"
      />
    </filter>
  </defs>

  <!-- 位移映射图：隐藏起来，只作为滤镜的数据源 -->
  <rect id="displacement-map" width="1000" height="100" fill="url(#grad1)" style={{display: 'none'}} />

  <!-- 要应用滤镜的目标元素：可替换为你需要的内容 -->
  <rect width="1000" height="200" fill="blue" filter="url(#f)" />
</svg>

关键改动说明 #

• 将<filter>移入<defs>标签内，符合SVG规范。
• 新增专门的位移映射图rect，设置display:none避免显示，仅提供滤镜数据。
• 给目标元素添加filter="url(#f)"属性，触发滤镜效果。
• 把primitiveUnits改为userSpaceOnUse，并给<feImage>指定明确的坐标和尺寸，确保位移图显示正确。
• 规避了循环引用问题，滤镜逻辑更清晰。

修改后滤镜即可正常生效，你可以通过修改rotate和scale状态实现动画效果，完全满足需求。

内容的提问来源于stack exchange，提问作者Reynald Lamury