用d3生成工作svg梯度

Question

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>

如果我使用web inspector来“编辑lineargradient元素的HTML”，即使我没有改变任何东西，梯度也会突然起作用--所以我猜Chrome的SVG解析或D3的元素生成中发生了一些奇怪的事情。

我认为这可能归因于lineargradient和lineargradient之间的混淆-D3似乎在camelCased元素上有一些问题，当我让它创建lineargradient元素时，它不会选择它们（我得到了很多很多副本）。此外，在Chrome的检查器中，这些元素显示为lineargradient；当我编辑为HTML时，它们是lineargradient。我不知道这是怎么回事，也不知道该怎么解决。

Answer 1

SVG是区分大小写的，因此它的linearGradient而不是用于创建的linearGradient。

我认为Chrome有一个选择器错误，你不能选择骆驼外壳的元素。

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