0

I have applied linear gradient color codes in one svg . Now i wants replace the color codes to any one image as background within the svg.

My linear color gradient code below :

 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 + ')');

Now color gradient working as a background of svg .

how to applied the image in the svg instead of color gradient. any one please help .

John Ken
  • 898
  • 1
  • 13
  • 26
  • Does this answer your question? [Fill SVG path element with a background-image](https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – Piyush Dec 26 '19 at 11:52
  • Just pass the url of image when setting style `this.ctxPattern.style('fill', 'url(' your image url ')');` – Awais Dec 26 '19 at 12:01
  • i got answers from this https://stackoverflow.com/a/20519827/795932 – John Ken Jan 01 '20 at 10:11

0 Answers0