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中进行项目。