如何使用SVG Filter并为其应用shader？

一、SVG Filter的基础使用步骤 #

SVG Filter的核心是先定义滤镜效果，再将其绑定到HTML DOM或SVG元素上，操作流程很直接：

1. 定义SVG Filter
   在HTML中嵌入一个隐藏的SVG（通过width="0" height="0"或display: none"隐藏，避免占用布局空间），用<filter>标签创建滤镜并赋予唯一ID，内部通过滤镜原语（比如feGaussianBlur、feColorMatrix等）组合出具体效果。

举个模糊+颜色反转的示例：

<!-- 用于定义滤镜的隐藏SVG -->
<svg width="0" height="0" viewBox="0 0 0 0">
  <filter id="blur-invert">
    <!-- 第一步：给原元素添加模糊效果 -->
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    <!-- 第二步：对模糊后的图像做颜色反转处理 -->
    <feColorMatrix in="blur" type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" />
  </filter>
</svg>

2. 将滤镜应用到DOM元素
   通过CSS的filter属性，用url()引用刚才定义的滤镜ID即可：

.target-element {
  filter: url(#blur-invert);
}

也可以直接在元素的style属性中写：

<div style="filter: url(#blur-invert);">这是应用了滤镜的DOM元素</div>

常用的滤镜原语还有feDropShadow（投影）、feComposite（图层混合）、feOffset（偏移）等，组合这些原语可以实现复杂的视觉效果。

二、SVG Filter能否使用Shader？ #

标准SVG Filter规范不支持直接嵌入GLSL Shader，之前曾有非标准的feCustomFilter提案允许在SVG Filter中写自定义Shader，但目前没有主流浏览器支持，该提案已被废弃。

不过可以通过变通方法实现类似效果：利用SVG Filter的feImage原语，加载一个由WebGL渲染的Canvas（Canvas内部运行你编写的Shader），再将这个Canvas作为滤镜源，叠加到目标DOM元素上。

示例思路代码如下：

<svg width="0" height="0">
  <filter id="shader-filter">
    <!-- 引用WebGL渲染的Canvas作为滤镜素材 -->
    <feImage xlink:href="#webgl-canvas" result="shader-output" />
    <!-- 将Shader效果与原元素混合 -->
    <feComposite in="SourceGraphic" in2="shader-output" operator="over" />
  </filter>
</svg>

<canvas id="webgl-canvas" width="400" height="400" style="display: none;"></canvas>
<div style="filter: url(#shader-filter);">应用Shader效果的DOM元素</div>

<script>
// 初始化WebGL并渲染Shader效果到canvas
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
// ... 此处省略WebGL Shader编译、顶点缓冲区配置、绘制等代码 ...
</script>

这种方式相当于把WebGL的Shader效果作为中间层，通过SVG Filter覆盖到DOM元素上，能实现近似CSS Custom Filter的效果。

另外，如果你只是想给DOM元素添加Shader效果，还可以考虑CSS Paint API（部分现代浏览器支持），它允许用JS编写自定义绘制逻辑，也能结合Shader实现需求，但同样需要额外的代码处理。

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