Preserving CSS styling (fill gradient, fonts) when downloading D3.js SVG

Question

I have a script that generates a custom chart according to user inputted values through an HTML form, and I want the user to be able to download the svg into SVG and PNG file formats.

The outputted svg within the script looks perfect, with a gradient fill and labels with the font.

However, when I download the svg, the styles get lost. The gradient doesn't show up and the labels default back to the system font.

I've tried to use getComputedStyles and using jQuery based on some other answers, but they haven't worked.

CSS for the gradient is here:

/* Styling for the gradient */
    .stop-left {
        stop-color: #00000068;
    }

    .stop-right {
        stop-color: #fffffff3;
    }

    .filled {
        fill: url(#mainGradient);
    }

JavaScript for the gradient:

// Create the svg:defs element and the main gradient definition.
            var svgDefs = svg.append('defs');

            var mainGradient = svgDefs.append('linearGradient')
                .attr('id', 'mainGradient');

            // Create the stops of the main gradient. Each stop will be assigned
            // a class to style the stop using CSS.
            mainGradient.append('stop')
                .attr('class', 'stop-left')
                .attr('offset', '0');

            mainGradient.append('stop')
                .attr('class', 'stop-right')
                .attr('offset', '1');

Original svg

downloaded svg