使用 d3 生成工作 svg 渐变

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）--应用它的元素没有描边或填充。

如果我对 lineargradient 元素的 "edit the HTML" 使用网络检查器，即使我不做任何更改，渐变也会突然起作用——所以我猜发生了一些奇怪的事情在 Chrome 的 SVG 解析或 d3 的元素生成中。

我认为这可能是由于 lineargradient 和 linearGradient 之间的混淆——d3 似乎对驼峰式元素有一些问题，当我用它创建 linearGradient 元素时，它没有 select 他们（我得到了很多很多副本）。此外，在 Chrome 的检查器中，这些元素显示为 lineargradient；当我编辑为 HTML 时，它们是 linearGradient。我不确定这里发生了什么或如何解决它。

Answer 1

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

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

常见的解决方法似乎是将 class 分配给所有 linearGradient 元素，并通过 class 而不是标签名称分配 select。

使用 d3 生成工作 svg 渐变

Generating a working svg gradient with d3

svg

linear-gradients

d3.js