如何在不修改外部SVG的情况下添加linear-gradient并应用filter blur？

针对你的需求，这里提供两种兼容Firefox、无需修改外部SVG文件的实现方案，均支持线性渐变+模糊效果：

方案一：CSS Mask + Filter（纯CSS实现） #

你的原始代码问题在于未预留模糊溢出空间，且未显式定义mask的关键属性，导致Firefox下效果异常。调整后的代码如下：

3px模糊效果代码 #

.icon-blur-3 {
  display: block;
  /* 预留模糊溢出空间：原尺寸 + 2倍模糊半径 */
  width: calc(19px + 2 * 3px);
  height: calc(19px + 2 * 3px);
  padding: 3px;
  box-sizing: border-box;
  /* 线性渐变背景 */
  background: linear-gradient(0deg, red, blue);
  /* 显式设置mask属性，确保跨浏览器一致 */
  mask-image: url("resize.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  /* 兼容旧版Firefox/Chrome的前缀 */
  -webkit-mask-image: url("resize.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  /* 应用模糊滤镜 */
  filter: blur(3px);
}

30px模糊效果代码 #

只需修改模糊半径和对应尺寸：

.icon-blur-30 {
  display: block;
  width: calc(19px + 2 * 30px);
  height: calc(19px + 2 * 30px);
  padding: 30px;
  box-sizing: border-box;
  background: linear-gradient(0deg, red, blue);
  mask-image: url("resize.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("resize.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  filter: blur(30px);
}

HTML结构 #

<span class="icon-blur-3"></span>
<span class="icon-blur-30"></span>

方案二：SVG 引用（跨浏览器更稳定） #

利用SVG原生特性，通过<use>引用外部SVG，在内部定义渐变和滤镜，完全兼容Firefox且效果精准：

3px模糊效果代码 #

<svg width="25" height="25" viewBox="0 0 25 25">
  <defs>
    <!-- 定义线性渐变 -->
    <linearGradient id="grad-3" x1="0" y1="0" x2="0" y2="19">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
    <!-- 定义模糊滤镜 -->
    <filter id="blur-3">
      <feGaussianBlur stdDeviation="3" />
    </filter>
  </defs>
  <!-- 引用外部SVG，应用渐变和滤镜 -->
  <use href="resize.svg" filter="url(#blur-3)" stroke="url(#grad-3)" />
</svg>

30px模糊效果代码 #

<svg width="79" height="79" viewBox="0 0 79 79">
  <defs>
    <linearGradient id="grad-30" x1="0" y1="0" x2="0" y2="19">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
    <filter id="blur-30">
      <feGaussianBlur stdDeviation="30" />
    </filter>
  </defs>
  <!-- 偏移位置预留模糊空间 -->
  <use href="resize.svg" filter="url(#blur-30)" stroke="url(#grad-30)" x="30" y="30" />
</svg>

原代码问题说明 #

1. 未预留模糊溢出空间：模糊效果会向外扩展元素范围，固定19px尺寸会裁剪模糊边缘
2. 未显式设置mask属性：Firefox对mask的默认行为与其他浏览器存在差异，需明确定义mask-repeat、mask-position等属性

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