d3：使用 svg:linearGradient 平滑“剪辑”自己的 svg:image

Question

在我的 d3 可视化中，我想使用 svg:linearGradient 平滑地“剪辑”我自己附加的 svg:image。当我将线性渐变附加到文本时，它可以工作！当我将它附加到我自己的 svg:image 时，它​​不会。

这就是我绘制线性渐变的方式：

g.append('svg:linearGradient')
    .attr('gradientUnits', 'userSpaceOnUse')
    .attr('x1', function (d) { ... })
    .attr('x2', function (d) { ... })
    .attr('y1', function (d) { ... })
    .attr('y2', function (d) { ... })
    .attr('id', function (d) { return 'clip-' + d.id })
    .call(function (gradient) { getComputedGradient(gradient); });

当我将它附加到我的文本中时，它可以工作：

g.append('text')
    .style('fill', function (d) { return 'url(#clip-' + d.id + ')'; })
    .text(function (d) { return d.text); })
    .attr('x', function (d) { ... })
    .attr('y', function (d) { ... });

当我将它附加到我自己的 svg 时，它不起作用：

g.append('svg:image')
    .style('fill', function (d) { return 'url(#clip-' + d.id + ')'; })
    .attr('xlink:href', '/img/test.svg');
    .attr('width', function (d) { ... })
    .attr('height', function (d) { ... })
    .attr('x', function (d) { ... })
    .attr('y', function (d) { ... });

这里的 x,y,height,width 属性和我的不一样，但这不是原因。 我也尝试使用 clipPath 而不是 linearGradient 进行相同的操作，它可以工作。为什么线性渐变不起作用？

Answer 1

‘linearGradient’ elements are never rendered directly;它们的唯一用途是可以使用 ‘fill’ 和“stroke”属性来引用。

并且填充属性表示它适用于文本和shapes。

由于图像既不是文本也不是形状，因此不适用于它。