1

I'm using this code snippet below:

<?xml version="1.0" encoding="UTF-8"?>
<html>
   <body>
      <svg width="900" height="300">
         <g transform="translate(10,10)">
            <defs>
               <linearGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stop-color="#05a" />
                  <stop offset="100%" stop-color="#0af" />
               </linearGradient>
            </defs>
            <g>
               <g class="link">
                  <path class="gradient0" d="M36,5.50458742 C440,5.504589729,440,5.504587889,844,5.504587429" stroke-width="12" style="stroke: url('#gradient0');">
                  </path>
               </g>
            </g>
         </g>
      </svg>
   </body>
</html>

The numbers are generated automatically by D3. So I have no control over the exact numbers inside the Path d attribute.

As mentioned above, the graph is not displayed. But if I modify the value even just a little bit, the graph is then displayed. For example, if I increment only the initial path position from:d="M36,5.50458742 to d="M36,5.50458743, then the graph is displayed.

It's not just for the initial position. If I increment only the "C" path attribute value from: C440,5.504589729 to C440,5.504589730, the graph is also displayed.

What is the problem here? The Y position value is definitely a positive number, so it should've been displayed.

The graph is also displayed if I do not use linearGradient. If I modify only the stroke value from: stroke: url('#gradient0'); to stroke: black;, the graph is also displayed.

I'm using Chrome browser.

Iwan Satria
  • 1,903
  • 1
  • 19
  • 22
  • 2
    Please read about [SVG gradient for perfectly horizontal path](https://stackoverflow.com/questions/13223636/svg-gradient-for-perfectly-horizontal-path) – enxaneta Jun 10 '22 at 13:10
  • The link that you provide has the solution to my problem. Thank you for your help! – Iwan Satria Jun 10 '22 at 15:55

0 Answers0