0

I have a simple sankey diagram created with SVG:

enter image description here

The Codepen for the SVG is here: https://codepen.io/pi3141592/pen/JjOQReV

The issue:

There should be a linear fill from node2 to node3, which is not appearing. This linear gradient is defined as gradient2, with the relevant path being:

 <path class="link" d="M257.5,402.4375C371.25,402.4375 371.25,402.4375 485,402.4375" style="stroke: url(&quot;#gradient1&quot;); stroke-width: 180;">
  <title>node2 to node3</title> 
 </path>

Upon investigation, if I change the stroke from linear to solid, eg 'red', then the fill appears:

 <path class="link" d="M257.5,402.4375C371.25,402.4375 371.25,402.4375 485,402.4375" style="stroke: red; stroke-width: 180;">
  <title>node2 to node3</title> 
 </path>

enter image description here

I thought, maybe there's something wrong with the defs for the linear gradient, however, if I use one of the other defined gradients that are working (eg gradient0) then it still doesn't appear.

 <path class="link" d="M257.5,402.4375C371.25,402.4375 371.25,402.4375 485,402.4375" style="stroke: url(&quot;#gradient1&quot;); stroke-width: 180;">
  <title>node2 to node3</title> 
 </path>

enter image description here

I'm baffled as to why the gradient fill won't work for this one particular path. I can't see what could be causing the issue, especially as other linear fills are working.

Pi31
  • 25
  • 6
  • The curve is degenerate so the shape has no height (except due to the stroke-width). – Robert Longson Mar 09 '22 at 08:35
  • The path you want to stroke is a perfectly horizontal line. Please read about [SVG gradient for perfectly horizontal path](https://stackoverflow.com/questions/13223636/svg-gradient-for-perfectly-horizontal-path) – enxaneta Mar 09 '22 at 08:43

0 Answers0