Цвет заливки svg, содержащий URL-адрес, цвет градиента не отображается по краям, отлично работает во всех других браузерах

Question

Вот пример кода компонента

$areaGraph.enter().append("path")
                            .attr('class','area')
            .merge($areaGraph)
            .attr("fill", (d,i)=>{
                return `url(#svgGradient${i})`
            })
            .attr('fill-opacity',()=>{
                return series_data.length  === 1? 1:.5;
            })
            .attr("d", area);

    var $allGradients = selection.selectAll("linearGradient").data(series_data);
    $allGradients.enter().append("linearGradient").merge($allGradients)
    .attr("id", (d,index)=>{
        return "svgGradient"+index
    })
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", 0).attr("y1", config.yScale(0))         
    .attr("x2", 0)
    .selectAll("stop")
    .data(function(d, i){
        var color = MRParseColors(config.color);
        return [
            {offset: "0%", opacity:.05,color:color},
            {offset: "100%", opacity:.9 ,color:color}
        ]
    })

    .enter().append("stop")
    .attr("offset", function(d) { return d.offset; })
    .attr("stop-color", function(d,i) { return d.color; })
    .attr("stop-opacity", function(d) { return d.opacity; });