线性渐变不适用于Webkit与d3生成的SVG [英] Linear gradient not applying in Webkit with d3 generated SVG

问题描述

我为d3.js图创建了一个特定的实现，看起来当动态创建一个SVG文档时， linearGradient 不能用于Webkit浏览器测试只在Chrome，Webkit家庭），而Gecko显示预期的行为。

我如何得出结论它与动态生成或d3？

d3代码首先初始化文档：

  // in construction：
 // ... 
 svg = d3.select（el）
 .append（'svg：svg'）
 .attr（'width'，width）
 .attr（'height'，height），
 defs = svg.append ：defs'），
 linearGradient1 = defs.append（'svg：linearGradient'）
 .attr（'id'，'linear-gradient-1'）
 .attr ，0）
 .attr（'y1'，1）
 .attr（'x2'，6.123233995736766e-17）
 .attr（'y2'，0），
 linearGradient1Stop1 = linearGradient1.append（'svg：stop'）
 .attr（'offset'，'0％'）
 .attr（'stop-color'，'＃e3e5e8'），
 //这里有几个其他站点... 
  

…比刷新渲染器，例如。在向图形数据结构添加节点之后，根据需要（注意： selfRef.node 仅仅是所有节点的d3选择器的句柄）：

  //当添加新节点时：
 refresh：function（）{
 // ... 
 //添加新节点
 var g = selfRef.node.enter '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 =1889height =400> 
< defs> 
< linearGradient id =linear-gradient-1x1 =0y1 =1x2 =6.123233995736766e-17y2 =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.6stop-color =＃f2f6ff>< / stop> 
< / linearGradient> 
< / defs> 
< g> 
< g class =node
 transform =translate（1113.425033222223,312.1412317958371）> 
< rect width =144height =42rx =3ry =3
 fill =url（＃linear-gradient-1）
 style = stroke：＃4d4d4d; stroke-width：1px;>< / rect> 
<！ - 节点的一些其他形状...  - 
< / g> 
<！ - 等等，这里更多的节点组...  - 
< / g> 
< / svg> 
  
 
 
 
我尝试的东西
 
 
 
 
 
将引用任何组外的渐变的元素拉出。
 
 
将不同值的版本声明添加到SVG它只出现在1.1？）
 
 
用引号括住引用（即 fill =url（'＃linear-gradient-1'） 
 
 
 
 
注意
 
 
 
  Robert Longson提到这个案件中的案件很重要，很奇怪，似乎当将文档粘贴到空白页面（在Chrome的开发工具中）时，线性渐变元素会转换为驼峰式格式（虽然它不会显示在DOM视图中，但都是小写的）。我在区分我的d3生成代码和粘贴的静态文档的结果后发现了这一点。这是什么？
 
 
 
 
 
 
 TL; DR 
 
 
 
生成动态SVG渐变在Chrome中运行时不起作用，以及如何解决此问题？
解决方案
将错误标记为为我工作，基于它工作在xhtml。对于Safari，似乎你必须用mime类型的应用程序/ xhtml + xml来提供你的网页，或请求Safari开发人员重新打开该bug。 FWIW对我来说似乎是一个错误。
 
I'm creating a specific implementation for a d3.js graph, and it seems that when creating an SVG document dynamically, linearGradients are not working on Webkit browsers (tested only on Chrome, of the Webkit family), while Gecko is showing the expected behavior.

How do I conclude it has to do with dynamic generation, or d3? I tried copying the resulted document into an empty page, and the gradient came to life.

The d3 code initializes the document first:
// 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 ...
… than refreshes the renderer, e.g. after adding "nodes" to the graph data struct, on demand (note: selfRef.node is simply a handle to the d3 selector of all the nodes):
// 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)

    // ...
}
Here's the generated document, it's nothing special:
<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>


Things I have tried


Pulling the element referencing the gradient outside any group.
Adding version declaration to the SVG with varying values (maybe it only appears on 1.1?)
Wrapping the reference in quotes (i.e. fill="url('#linear-gradient-1')") or omitting the dashes from the id, thinking Webkit is less lenient here.


Note

Robert Longson mentioned that case matters in this post, and, weird enough, it seems that when pasting the document in an empty page (in the Chrome's dev-tools), the linear gradient element transforms to camel-case format (though it doesn't show in the DOM view, all is lowercase there). I discovered this after diffing the results of my d3 generated code and the pasted static document. What's up with that?



TL;DR

How come generating dynamic SVG gradients don't work when running in Chrome, and how to fix this?
解决方案
Seems like the Safari developers marked the bug as works for me, based on it working in xhtml. For Safari it seems you'd have to serve your webpages with a mime type of application/xhtml+xml or petition the Safari developers to reopen the bug. FWIW it seems like a bug to me.

                        
这篇关于线性渐变不适用于Webkit与d3生成的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！