Question

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

这就是我绘制linearGradient的方法：

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，它可以工作。为什么linearGradient不起作用？

Answer 1

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

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

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

d3：使用svg：linearGradient进行平滑＆＃34;剪辑＆＃34;自己的svg：图像

1 个答案: