线性渐变不适用于带有d3生成的SVG的Webkit

我正在为d3.js图创建特定的实现，似乎在动态创建SVG文档时，linearGradient不能在Webkit浏览器上运行（仅在Webkit系列的Chrome上进行了测试），而Gecko则显示了预期的效果。行为。

我如何得出结论，它与动态生成或d3有关？我尝试将生成的文档复制到一个空白页中，渐变变得生动起来。

d3代码首先初始化文档：

// in construction:
// ...
svg = d3.select(el)
    .append('svg:svg')
    .attr('width', width)
    .attr('height', height),
defs = svg.append('svg:defs'),
linearGradient1 = defs.append('svg:linearGradient')
    .attr('id', 'linear-gradient-1')
    .attr('x1', 0)
    .attr('y1', 1)
    .attr('x2', 6.123233995736766e-17)
    .attr('y2', 0),
linearGradient1Stop1 = linearGradient1.append('svg:stop')
    .attr('offset', '0%')
    .attr('stop-color', '#e3e5e8'),
    // several other stops here ...

…然后刷新渲染器，例如在按需向图形数据结构中添加“节点”之后（请注意：selfRef.node只是所有节点d3选择器的句柄）：

// called e.g. when adding new nodes:
refresh: function() {
    // ...
    // add new nodes
    var g = selfRef.node.enter().append('svg:g').attr('class', 'node');

    g.append('svg:rect')
        .attr('width', 144)
        .attr('height', 42)
        .attr('rx', 3)
        .attr('ry', 3)
        .attr('fill', 'url(#linear-gradient-1)')
        .style('stroke', '#4d4d4d')
        .style('stroke-width', 1)

    // ...
}

这是生成的文档，没什么特别的：

<svg width="1889" height="400">
    <defs>
        <linearGradient id="linear-gradient-1" x1="0" y1="1" x2="6.123233995736766e-17" y2="0">
            <stop offset="0%" stop-color="#e3e5e8"></stop>
            <stop offset="11%" stop-color="#e6e8ec"></stop>
            <stop offset="59%" stop-color="#eff2fa"></stop>
            <stop offset="100%" stop-opacity="0.6" stop-color="#f2f6ff"></stop>
        </linearGradient>
    </defs>
    <g>
        <g class="node" 
           transform="translate(1113.425033222223,312.1412317958371)">
            <rect width="144" height="42" rx="3" ry="3" 
                  fill="url(#linear-gradient-1)" 
                  style="stroke: #4d4d4d; stroke-width: 1px;"></rect>
            <!-- some other shapes of the node... -->
        </g>
        <!-- etc. etc., some more node groups here... -->
    </g>
</svg>

我尝试过的事情

• 将引用渐变的元素拉到任何组之外。
• 向versionSVG添加具有不同值的声明（也许它仅出现在1.1？）
• 将引用括在引号中（即fill="url('#linear-gradient-1')"），或在ID中省略破折号，以为Webkit在这里不太宽容。

笔记

罗伯特·朗森（Robert Longson）在这篇文章中提到大小写很重要，而且很奇怪，似乎在将文档粘贴到空白页面（在Chrome的开发工具中）时，线性渐变元素会转换为驼峰式格式（尽管事实并非如此）。 t在DOM视图中显示，则所有内容都是小写的）。我之后发现这个版本比较我的D3生成的代码的结果和粘贴的静态文件。那是怎么回事？

TL; DR

在Chrome中运行时，如何生成动态SVG渐变不起作用，以及如何解决此问题？