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问题。这是您脚本的问题。

如果您查看＆＃34;组＆＃34;中生成的实际SVG。例如，您将看到以下结果：

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

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

使用组时，D3 LinearGradient在Chrome中断开

1 个答案: