javascript - 如何在javascript中应用图像而不是线性渐变

Question

我在一个 svg 中应用了线性渐变颜色代码。现在我想将颜色代码替换为任何一个图像作为 svg 中的背景。

我的线性颜色渐变代码如下：

 var ctx = ['rgba(243, 234, 255, 0.5)', 'rgba(134,104,155, 0.5)']; 
        var ctxValue = this.svg
          .append('defs')
          .append('linearGradient') 
          .attr('x1', '0%')
          .attr('x2', '0%')
          .attr('y1', '0%')
          .attr('y2', '100%'); 
        ctxValue
          .selectAll('stop')
          .data(ctx)
          .enter()
          .append('stop')
          .style('stop-color', function(d) {
            return d;
          })
          .attr('offset', function(d, i) {
            return 100 * (i / (ctx.length - 1)) + '%';
          });
        var linearColor = '#ctxValue-' + valId; 
        this.ctxPattern.style('fill', 'url(' + linearColor + ')');

现在颜色渐变作为 svg 的背景。

如何在 svg 中应用图像而不是颜色渐变。任何人请帮助。

标签： javascripthtmlcssreactjssvg