Question

我试图用D3生成一个SVG渐变（用于一个笔画）（项目的其余部分使用D3，所以使用D3这似乎是有道理的......）

以下是生成渐变的代码：

function generateBlindGradient(svg, color, side) {
  // can't have a hash mark in the id or bad things will happen
  idColor = color.replace('#', '');
  side = side || 'right';
  // this is a sneaky d3 way to select the element if present
  // or create the element if it isn't
  var defs = svg.selectAll('defs').data([0]);
  defs.enter().append('svg:defs');

  var id = 'gradient-' + idColor + '-' + side;
  var gradient = defs.selectAll('lineargradient#'+id).data([0]);
  gradient.enter().append('svg:lineargradient')
    .attr('id', id);

  var colors = [
    { offset : '50%', color : '#DFE2E6' },
    { offset : side === 'left' ? '100%' : '0%', color : color }
  ];
  var stops = gradient.selectAll('stop').data(colors);
  stops.enter().append('svg:stop');
  stops.attr('stop-color', function(d) { return d.color; })
    .attr('offset', function(d) { return d.offset; });

  return id;
}

这很有效......几乎是正确的。它会生成如下渐变：

<lineargradient id="gradient-a8d4a1-left">
  <stop stop-color="#DFE2E6" offset="50%"></stop>
  <stop stop-color="#a8d4a1" offset="100%"></stop>
</lineargradient>

该渐变不起作用（作为fill或stroke） - 它应用的元素不会中风或填充。

如果我使用网络检查器来编辑HTML＆＃34; lineargradient元素，即使我没有改变任何东西，渐变突然起作用 - 所以我猜测在Chrome的SVG解析中有什么奇怪的东西或者d3的元素生成。

我认为这可能归结为lineargradient和linearGradient之间的混淆 - d3似乎与camelCased元素存在一些问题，当我创建linearGradient元素时，它没有＆＃ 39;选择它们（我得到很多很多副本）。此外，在Chrome的检查员中，这些元素显示为lineargradient;当我编辑为HTML时，它们是linearGradient。我不确定这里发生了什么或如何解决它。

Answer 1

SVG区分大小写，因此它的线性渐变而非线性渐变用于创建。

我认为Chrome has a selector bug你不能选择驼峰元素。

常见的解决方法似乎是为所有linearGradient元素分配一个类，并按类而不是标记名称进行选择。

使用d3生成工作svg渐变

1 个答案: