Why does my opacity gradient show in Inkscape but not in browsers?

Question

I created an SVG with an opacity gradient in Inkscape. In the file I see it made a <mask> with a radialGradient and a linearGradient inside <defs>. It then uses it as follows.

<g mask="url(#mask3597)">
   <path d=""/>
</g>

The masked path displays fine in Inkscape and Inkscape viewer, but does not appear at all in major browsers.

What is the unsupported feature, and is there a way to do this that will show up in browsers?

Update

Here is the SVG

The gradient mask is the only way I knew how to make the transperancy gradient. I am new to Inkscape. If someone could link a tutorial for a better method it would be much appreciated.

Update 2

I managed to do what I think joojaa was suggesting and it worked, thanks! I still have slight jaggies (conflation?) so if someone could describe exactly how to get the correct kind of overlap to fix that it would still be appreciated.

Answer 1

To avoid the conflation problem, I'd construct it as follows. Also a construction like this is simple, and should avoid any browser rendering issues, or the need for a mask.

1. With the Bézier tool, draw a rough shape over the area you wish to fill with the gradient, making sure it overlaps the black areas, and apply the gradient to it.

2. Reduce the object opacity to something like 80%, or alternatively add some alpha transparency to the gradient stops themselves.

3. Make sure the shape is selected and send to the bottom of the stack by pressing End

Example