线性渐变不起作用

Question

I am trying to add SVG gradient but it doesn't seem to add it,

Code

var svgContainer = d3.select("#myConta")
    .append("svg")
    .attr("id", "myContasvg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("preserveAspectRatio", "none")
    .attr("viewBox", "0 0 " + width+ " " + height)
    .attr("fill", "#2E2E2E")
    .attr("float", "right")
    .attr("fill", "url(#svgLG1)")
    .append("g");

var gradient = svgContainer.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "svgLG1")
    .attr("x1", "0")
    .attr("y1", "1")
    .attr("x2", "0.9967")
    .attr("y2", "0")
    .attr("spreadMethod", "reflect");

    gradient.append("svg:stop")
       .attr("offset", "0.0267")
       .attr("stop-color", "#0f0");

    gradient.append("svg:stop")
        .attr("offset", "0.4967")
        .attr("stop-color", "#ff0");

    gradient.append("svg:stop")
        .attr("offset", "1")
        .attr("stop-color", "#f00");

JSFiddle

I am able to make it work with CSS gradient ( fiddle ) but because of needs (IE9 support and calculating offset values by code) I need to use SVG.

Edit

It's not duplicate

Answer 1

<svg> is only a container element and fills applied to it don't render. You have to apply your fill to a graphic element such as a <rect> , <circle> , <text> etc.

So therefore you need to create a <rect> as a background and add the fill url to that.

Code I used for testing

var mysvg = d3.select("#a1")
    .append("svg")
    .attr("id", "mysvg")
    .attr("width", "100%")
    .attr("height", "100%").attr("fill", "url(#svgLG1)");

var rect = mysvg.append("rect")
    .attr("x", "10")
    .attr("y", "20")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("stroke", "black")
   ;

var gradient = mysvg.append("svg:linearGradient")
    .attr("id", "svgLG1")
    .attr("x1", "0")
    .attr("y1", "1")
    .attr("x2", "1")
    .attr("y2", "0");
    gradient.append("svg:stop").attr("offset", "0").attr("stop-color", "#0f0");
    gradient.append("svg:stop").attr("offset", "0.4867").attr("stop-color", "#ff0");
    gradient.append("svg:stop").attr("offset", "1").attr("stop-color", "#f00");

http://jsfiddle.net/r55g9po2/17/