unwanted horizontal line from svg mask

user_2193086 0
Viewed 1134

I'm rendering a line using an SVG mask and gradient, similar to how Github renders sparklines for their "year of activity" charts that are displayed when viewing and organization's list of repositories.

For some reason when the width of the SVG is a certain value, a horizontal line appears at the top of the lines:

svg mask with unwanted horizontal line

The line appears to correspond to the SVG group element that houses a rectangle which is applied a mask and a gradient fill:

svg mask with group element highlighted

However, resizing the SVG to a different width results in the line not displaying:

svg mask path with no bug

Here is the markup for an example SVG:

body {
  background: #000;
}
<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
</svg>

And here is a link to live code showing the bug: https://bl.ocks.org/clhenrick/ed231b1ba92c87f82529c153e7c77a4e/4954afeeccc9b2d61547e08bb901a8ae23c32c83

Here is a link to an example using the same technique with no bug, just a different size width for the SVG, mask, rect and different sized path: https://bl.ocks.org/clhenrick/e0b06bbb361780f818993e956dccc5d8/d1fcd24b4df5571ed7069f4a45ed9932a48d74c2

Furthermore, with the buggy example when I move the path element out of the mask and into the group element, the path looks correct: https://bl.ocks.org/clhenrick/b1ac9490a5708afbcb3ef7f93bb45b3a/5df5bd70333da98d866e7f59e3dd74060ff87474

I'm not sure why this happens at certain SVG widths or SVG path sizes and not at others.

d3.js svg css
2 Answers

Am not sure what is causing the issue but here is a work around to avoid it. The idea is to hide this line by changing the position of the rect (its y value).

So here is the buggy SVG :

body {
background:black;
}
<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>

And if you change the y from -2 to 34 the line will disappear like this :

body {
background:black;
}
<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="34" width="281" height="46" style="stroke: none; fill: url(&quot;#gradient-36&quot;); mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>

This will of course affect the fill you are applying as it's a linear background. So you may change it to adjust the color as you need.

I made more tests trying to point out what can be the cause of the issue. I tried to eliminate some part of the SVG (like the linear-gradien) and to change some values and here is what i got :

body {
  background: black;
}

svg {
  display: block;
}
<svg width="281" height="50">
  <defs>
    <mask id="mask-36" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url(&quot;#mask-36&quot;);">
    </rect>
  </g>
  </svg>
<svg width="281" height="50">
  
  <g transform="translate(0, 2)">
       <path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
  </g>
  </svg>

<svg width="281" height="50">
  <defs>
    <mask id="mask-35" x="0" y="0" width="281" height="46">
      <path fill="none" stroke-width="3" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
      </path>
    </mask>
  </defs>
  <g transform="translate(0, 2)">
    <rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url(&quot;#mask-35&quot;);">
    </rect>
   </g>
  </svg>

The first one is the buggy and when i tried to add the path directly into the SVG it works fine (the second one). In the third one i changed the value of stroke in the path to make it 3 and the line disappeared.

I can conclude that it's because you are using the path as a mask. It can be a bug related to some browser and not a bug with your code. In this case you can simply consider using the path directly as an element (and you have a lot of possiblities to color it using gradient) or use my trick in order to hide the bug.

user_86203330

It's not clear to me why github do their sparklines graphs using that complicated arrangement of rects, masks, and transforms. It appears it may be triggering a bug in Chrome.

Have you considered just simplifying the graph? Just use the sparkline path on its own, and apply the gradient directly to it?

body {
  background: #000;
}
<svg width="281" height="50">
  <defs>
    <linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#f03b20"></stop>
      <stop offset="50%" stop-color="#feb24c"></stop>
      <stop offset="100%" stop-color="#ffeda0"></stop>
    </linearGradient>
  </defs>
  <path fill="none" stroke-width="2" stroke="url(#gradient-36)" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
  </path>
</svg>

user_12928480
Related