使用组时 D3 LinearGradient 在 Chrome 中损坏

Question

我一直在 IE9/IE11 上使用 LinearGradient，一切正常，但我在 chrome 上测试样本后发现没有渲染 linearGradient，当我包装使用 LinearGradient 的形状时，设法重现了该问题一个小组 不带群组的工作版http://jsfiddle.net/v3127wmp/1

var width = 300,  height = 300;
var svg = d3.select('#div').append('svg').attr('width', width).attr('height', height);
//var g = svg.selectAll('g').append('g');


var gradient = svg.append("defs")
    .append("linearGradient").attr("id", "gradient")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);

var gradient2 = svg.append("defs")
    .append("linearGradient").attr("id", "gradient2")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient2.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient2.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);


var circle = svg.append('circle')
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('r', height / 3)
    .attr('fill', 'url(#gradient)');

带有群组http://jsfiddle.net/u1zs2oqo的破解版

    var width = 300,  height = 300;
var svg = d3.select('#div').append('svg').attr('width', width).attr('height', height);
var g = svg.selectAll('g').append('g');


var gradient = svg.append("defs")
    .append("linearGradient").attr("id", "gradient")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);

var gradient2 = svg.append("defs")
    .append("linearGradient").attr("id", "gradient2")
    .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%")
    .attr("y2", "100%").attr("spreadMethod", "pad");

 gradient2.append("stop").attr("offset", "0%")
    .attr("stop-color", "#a00000").attr("stop-opacity", 1);

gradient2.append("stop").attr("offset", "100%")
    .attr("stop-color", "#aaaa00").attr("stop-opacity", 1);


var circle = g.append('circle')
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('r', height / 3)
    .attr('fill', 'url(#gradient)');

Answer 1

这不是 Chrome 问题。这是您的脚本的问题。

如果您查看“组”示例中生成的实际 SVG，您将看到以下结果：

<svg width="300" height="300">
  <defs>
    <linearGradient id="gradient" ... >
  </defs>
  <defs>
    <linearGradient id="gradient2" ... >
  </defs>
</svg>

所以没有<g> 和<circle>。所以你的脚本有问题。