如何在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中而不是颜色渐变中应用图像。任何人都可以帮忙。