10
<filter id="demo1-composite" x="0" y="0" width="100%" height="100%">
20
  {/* 1. 定义背景图像源 */}
30
  <feImage 
40
    href="/images/supercss/81.base/1.png" 
50
    x="0" y="0" width="600" height="300" 
60
    preserveAspectRatio="xMidYMid slice"
70
    result="img"
80
  />
90
  
10
  {/* 
11
      input1 (in): 背景图
12
      input2 (in2): 前景图：SourceGraphic (即我们的文字)
13
      operator: in => 显示图片，但只在文字区域显示
14
  */}
15
  <feComposite in="img" in2="SourceGraphic" operator="in" />
16
  {/* 添加阴影效果 */}
17
  <feDropShadow dx="1" dy="1" stdDeviation="0" floodColor="#FFFFFF"/>
18
</filter>

10
<filter id="demo2-knockout" x="-10%" y="0" width="120%" height="100%">
20
  {/* 生成一个深色的填充层 */}
30
  <feFlood floodColor="#1f2937" floodOpacity="0.5" result="floodFill" />
40
  
50
  {/* 
60
    operator="out"
70
    in="floodFill" (深色层)
80
    in2="SourceAlpha" (文字的轮廓)
90
    结果：显示前景图与背景图不重叠的区域，结果为挖空效果。
10
  */}
11
  <feComposite in="floodFill" in2="SourceAlpha" operator="out" />
12
</filter>

10
<filter id="demo3-atop" x="0" y="0" width="100%" height="100%">
20
  {/* 1. 原始图像 (SourceGraphic) 是下层的银色文字 */}
30
  
40
  {/* 2. 创建上层装饰：一个只占据上半部分的矩形 */}
50
  <feFlood floodColor="#ffd700" result="gold" />
60
  <feOffset in="gold" dy="-60" result="goldMoved" /> 
70
  {/* 这里用 offset 简单模拟移动，或者直接用 feImage 加 svg rect */}
80

90
  {/* 3. 合成：上层装饰 atop 原始文字 
10
      效果：装饰层只会显示在文字区域内。
11
      且装饰层透明/未覆盖的地方，会显示原始文字。
12
  */}
13
  <feComposite 
14
    in="topLayer" 
15
    in2="SourceGraphic" 
16
    operator="atop" 
17
  />
18
</filter>

10
<filter id="demo4-xor" x="-50%" y="-50%" width="200%" height="200%">
20
  <feFlood floodColor="#06b6d4" result="color1" />
30
  <feComposite in="color1" in2="SourceGraphic" operator="in" result="shape1" />
40
  
50
  <feOffset in="shape1" dx={-offset.x} dy={-offset.y} result="shifted1" />
60
  
70
  <feFlood floodColor="#ef4444" result="color2" />
80
  <feComposite in="color2" in2="SourceGraphic" operator="in" result="shape2" />
90
  
10
  <feOffset in="shape2" dx={offset.x} dy={offset.y} result="shifted2" />
11
  
12
  {/* XOR 操作：重叠部分透明 */}
13
  <feComposite in="shifted1" in2="shifted2" operator="xor" />
14
</filter>

10
<filter id="demo5-arithmetic" x="0" y="0" width="100%" height="100%">
20
  {/* 1. 源图像 */}
30
  <feImage 
40
    href="/images/supercss/81.base/1.png" 
50
    x="0" y="0" width="400" height="250" 
60
    preserveAspectRatio="xMidYMid slice"
70
    result="img1"
80
  />
90
  
10
  {/* 2. 第二个源：对原图进行反色处理，模拟另一种风格 */}
11
  <feColorMatrix 
12
    in="img1" 
13
    type="matrix" 
14
    values="-1 0 0 0 1 
15
            0 -1 0 0 1 
16
            0 0 -1 0 1 
17
            0 0 0 1 0" 
18
    result="img2" 
19
  />
20

21
  {/* 3. 算术混合 
22
      公式: result = k1*i1*i2 + k2*i1 + k3*i2 + k4
23
      这里我们只用 k2 和 k3 来做线性插值 (Cross Fade)
24
  */}
25
  <feComposite 
26
    in="img1" 
27
    in2="img2" 
28
    operator="arithmetic" 
29
    k1="0" 
30
    k2={k2} 
31
    k3={k3} 
32
    k4="0" 
33
  />
34
</filter>

10
<filter id="grunge-text">
20
  {/* 1. 生成粗糙的噪点纹理 */}
30
  <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
40
  
50
  {/* 2. 提高噪点对比度，让黑白分明 */}
60
  <feColorMatrix type="matrix" values="1 0 0 0 0  
70
                                       0 1 0 0 0  
80
                                       0 0 1 0 0  
90
                                       0 0 0 6 -3" 
10
                                       in="noise" result="high-contrast-noise" />
11
  
12
  {/* 3. 算术合成：原图 - 噪点 */}
13
  {/* 
14
      k2=1: 100% 原图
15
      k3=-1.5: 减去 1.5倍的噪点亮度 (腐蚀效果)
16
      这会吃掉文字的一部分
17
  */}
18
  <feComposite operator="arithmetic" k1="0" k2="1" k3="-1.5" k4="0" 
19
                in="SourceGraphic" in2="high-contrast-noise" />
20
</filter>

10
<filter id="cyber-glow">
20
  {/* 1. 提取原图 */}
30
  <feImage href="#source-text" result="original"/>
40

50
  {/* 2. 偏移并模糊，制造残影 A (青色) */}
60
  <feOffset dx="-5" dy="0" in="SourceGraphic" result="off-a"/>
70
  <feGaussianBlur stdDeviation="4" in="off-a" result="blur-a"/>
80
  <feColorMatrix in="blur-a" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 1 0 1  0 0 0 1 0" result="cyan-glow"/>
90

10
  {/* 3. 偏移并模糊，制造残影 B (洋红) */}
11
  <feOffset dx="5" dy="0" in="SourceGraphic" result="off-b"/>
12
  <feGaussianBlur stdDeviation="4" in="off-b" result="blur-b"/>
13
  <feColorMatrix in="blur-b" type="matrix" values="1 0 0 0 1  0 0 0 0 0  0 0 1 0 1  0 0 0 1 0" result="magenta-glow"/>
14

15
  {/* 4. 混合：青色 + 洋红 (Arithmetic Add) */}
16
  <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="cyan-glow" in2="magenta-glow" result="glow-mix"/>
17

18
  {/* 5. 混合：发光背景 + 原图 (White Text) */}
19
  <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="glow-mix" in2="SourceGraphic"/>
20
</filter>