How to use filter blur with masked element?

Question

I have this svg file:

<svg width="19" height="19" viewBox="0 0 19 19" fill="none" stroke="#000" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.4634 1.28027L1.17004 17.5619M7.41582 17.5619L17.4634 7.52156M17.4634 13.7628L13.6616 17.5619" stroke-width="2.33" stroke-linecap="round" />
</svg>

Without any edit to the svg, I want to add linear-gradient to it, then blur.

span {
  display:block;
  width:19px;
  height:19px;
  background: linear-gradient(0deg,red,blue);
  mask-image: url("resize.svg");
  filter: blur(3px);
}

<span> </span>

The file needs to be local so the snippet won't work, but you can try it locally after downloading the svg file.

The result I get from this code:

What I want instead:

at 3px blur

at 30px blur

1. I can't change the svg file.
2. It needs to be a linear-gradient not just a solid color.
3. It must work in firefox. Don't mind if it doesn't work in other browsers.
4. It don't need to use mask just a way to add the linear-gradient to the img and blur it.
5. The svg file is an external file not inline svg.

Answer 1

it can work if i put the span inside another element and apply the blur to the parent ( the new element )

span {
  display: block;
  background: linear-gradient(0deg, red, blue);
  width: 19px;
  height: 19px;
  mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTE3LjQ2MzQgMS4yODAyN0wxLjE3MDA0IDE3LjU2MTlNNy40MTU4MiAxNy41NjE5TDE3LjQ2MzQgNy41MjE1Nk0xNy40NjM0IDEzLjc2MjhMMTMuNjYxNiAxNy41NjE5IiBzdHJva2Utd2lkdGg9IjIuMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KPC9zdmc+Cg==');
}

div {
  filter: blur(3px);
}

<div>
  <span></span>
</div>

the file need to be local so the snippet won't work but you can try it locally after downloading the svg file