JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="1" width="1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>  
</svg>
<svg id='vis'>
	<line class='tempLink' x1="100" y1="70" x2="400" y2="40" stroke="url(#grad1)" stroke-width="5px"/>
</svg>
<button onclick='download()'>Download</button>

CSS

.tempLink{
			fill:none;
		}

JavaScript

function download(){
	d3.select("#vis").style("background-color","white")
	saveSvgAsPng(document.getElementById("#vis"), "test.png");
	d3.select("#vis").style("background-color","none")
}