SVG遮罩效果/CSS滤镜：色相调整+高亮发光边缘实现

直接上可复用的解决方案，核心是用SVG滤镜实现可控发光边缘，再通过CSS的hue-rotate()统一调整整体颜色：

步骤1：定义发光滤镜 #

在SVG的<defs>中添加自定义滤镜，通过高斯模糊+颜色矩阵组合实现高亮发光效果：

<svg width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <!-- 自定义发光滤镜 -->
    <filter id="glow">
      <!-- 生成图形边缘的模糊层 -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur-layer" />
      <!-- 调整模糊层的颜色强度与透明度 -->
      <feColorMatrix in="blur-layer" mode="matrix" values="1 0 0 0 0
                                                           0 1 0 0 0
                                                           0 0 1 0 0
                                                           0 0 0 18 0" result="glow-layer" />
      <!-- 将发光层叠加到原图形下方 -->
      <feComposite in="glow-layer" in2="SourceGraphic" operator="over" />
    </filter>
  </defs>

  <!-- 应用滤镜的目标图形 -->
  <circle cx="200" cy="200" r="100" fill="#ff4444" filter="url(#glow)" class="color-tweak" />
</svg>

步骤2：用CSS的hue-rotate调整颜色 #

给目标元素添加CSS类，通过filter属性的hue-rotate()同步调整图形和发光效果的颜色：

.color-tweak {
  /* 调整角度改变整体色调，例如90deg转为蓝绿色，180deg转为补色 */
  filter: hue-rotate(90deg);
}

参数自定义说明 #

• feGaussianBlur的stdDeviation：数值越大，发光边缘越宽越柔和
• feColorMatrix最后一个参数（示例中的18）：数值越高，发光亮度越强；调小可降低发光强度
• hue-rotate的角度：0deg为原颜色，360deg完成一次色环循环，按需调整即可

这个方案全程用SVG+CSS实现，无需依赖PS，且颜色调整通过CSS实时可控，比传统改色方式更高效。

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