如何在SVG中为图像添加纹理且不对透明像素进行纹理化？

嘿，这个问题我之前也碰到过！你当前的滤镜会把纹理直接混合到整个画布，包括透明区域，因为feBlend不会区分源图的透明像素。要实现只给有内容的区域加纹理，有两种实用的方法可以试试：

方法一：用滤镜内部的遮罩处理 #

通过提取源图的alpha通道作为遮罩，让纹理只保留在非透明区域，再和原图混合：

<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <filter id="texture">
      <!-- 提取源图的alpha通道，生成遮罩：透明区域为黑色，非透明区域为对应alpha值的白色 -->
      <feColorMatrix in="SourceGraphic" type="matrix"
        values="0 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 1 0" result="alpha-mask"/>
      <!-- 加载纹理图 -->
      <feImage href="https://i.imgur.com/pjWcnJs.jpg" result="texture-img"/>
      <!-- 只保留遮罩范围内的纹理 -->
      <feComposite in="texture-img" in2="alpha-mask" operator="in"/>
      <!-- 将处理后的纹理与原图混合 -->
      <feBlend in="SourceGraphic" in2="previous" mode="multiply"/>
    </filter>
  </defs>
  <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" width="500" height="500" filter="url(#texture)"/>
</svg>

步骤解释： #

• feColorMatrix：把原图转换成仅保留alpha通道的灰度图，作为后续遮罩使用。
• feComposite的operator="in"：这个操作会裁剪纹理，只保留和遮罩重叠的部分（也就是原图非透明的区域）。
• 最后feBlend完成纹理和原图的混合，达到你想要的效果。

方法二：用Mask + 混合模式（更直观） #

这种方法不需要复杂的滤镜链，直接用mask限制纹理的显示区域，再通过CSS混合模式实现叠加效果：

<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <!-- 用原图作为遮罩，只有原图非透明的区域会显示后续内容 -->
    <mask id="non-transparent-mask">
      <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" width="500" height="500"/>
    </mask>
  </defs>
  <!-- 先绘制基础原图 -->
  <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" width="500" height="500"/>
  <!-- 绘制纹理，用mask限制显示区域，再设置混合模式为multiply -->
  <g mask="url(#non-transparent-mask)" style="mix-blend-mode: multiply;">
    <image x="0" y="0" href="https://i.imgur.com/pjWcnJs.jpg" width="500" height="500"/>
  </g>
</svg>

步骤解释： #

• 先画原图作为底层，再在上面绘制纹理。
• mask会让纹理只出现在原图有像素的地方，透明区域的纹理会被隐藏。
• mix-blend-mode: multiply让纹理和原图以乘法模式混合，和你之前用feBlend的效果一致。

两种方法都能实现你的需求，第二种代码更简洁易懂，适合快速实现；第一种全部在滤镜内处理，适合需要整合到复杂滤镜链的场景。

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