线性渐变不起作用

Question

我正在尝试添加SVG渐变，但它似乎没有添加它，

代码

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

我能够使用CSS渐变（fiddle），但由于需要（IE9支持并通过代码计算偏移值），我需要使用SVG。

修改

这不重复

Answer 1

<svg>只是一个容器元素，应用于它的填充不会渲染。您必须将填充应用于图形元素，例如<rect>，<circle>，<text>等。

因此，您需要创建一个<rect>作为背景并添加填充网址。

我用于测试的代码

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/