svg - Unable to select <linearGradient> with D3.js in Chrome

Question

Chrome doesn't select <linearGradient> with D3.js. In the following code all selections are empty.

var defs = d3.select("body").append("svg").append("defs");
defs.append("linearGradient");
defs.append("linearGradient");
console.log(defs.selectAll("linearGradient")); // empty
console.log(defs.selectAll("lineargradient")); // empty
console.log(d3.selectAll("linearGradient")); // empty

If you replace <linearGradient> with say <mask> it's all right.

var defs = d3.select("body").append("svg").append("defs");
defs.append("mask");
defs.append("mask");
console.log(defs.selectAll("mask")); // 2 elements selected

Firefox works fine for both. I'm using Chrome 28.0.1500.95. Please suggest a way to select the gradients.

Answer 1

This is a bug in webkit -- see the bug report. The short answer is that for it's just broken. You may be able to work around this by keeping explicit references to the gradients you need to modify, e.g.

var grad1 = defs.append("linearGradient");