D3 градиентная заливка показывает черный в сафари

Question

Я создаю пузырьковую диаграмму, используя d3 v5 и использую следующее для создания градиентной заливки:

for (let i = 0; i < color.length - 1; i++) {
  const gradient = svg.append('svg:defs')
  .append('svg:linearGradient')
  .attr('id', 'gradient' + i)
  .attr('x1', '0%')
  .attr('y1', '0%')
  .attr('x2', '100%')
  .attr('y2', '100%')
  .attr('spreadMethod', 'pad');

  gradient.append('svg:stop')
    .attr('offset', '0%')
    .attr('stop-color', function(d, j) {
          return '#' + color[i];
      })
    .attr('stop-opacity', 1);

  gradient.append('svg:stop')
    .attr('offset', '100%')
    .attr('stop-color', function(d, j) {
      return '#' + color[i + 1];
    })
    .attr('stop-opacity', 1);
}

А затем примените его к кругу, используя:

.attr('fill', function(d, j) {
    return 'url(#gradient' + j + ')';
  })

Пузырьковая диаграмма отлично работает в Firefox и Chrome, но в Safari она выглядит черной. Проект на Angular 6.