SVG Image opacity gradient - css

I'm using this bit of code in an .svg file to apply a opacity fade out gradient on an element. The following code works well, but fades from left to right instead of vertically from top to bottom.
What code change would I need to make to achieve this? Thanks for the help!
SVG file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full">
<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
</mask>
</svg>
CSS:
mask: url(/mypath/mask.svg#m1);


You set the direction of a gradient with the x1,y1,x2 and y2 attributes.
For a vertical gradient starting at the top and going down you need to go from (0,0) to (0,1).
<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>

Related

How to scale svg background for react.js app?

I have a problem with scaling my background svg image. I would expect it to scale to every browser window size, but right now it doesn't scale vertically no matter what params I set. I already tried removing width and height directly in svg file as stated in Why don't my SVG images scale using the CSS "width" property? and attempted to adjust viewBox and preserveAspectRatio manually, but the image at some point of scaling always ends up with messed up height (for example 1/3 of the full height for mobile devices). Am I doing something wrong with the image or should I simply create another one for different ratios?
My SVG background
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
<stop offset="0" style="stop-color:#4C0082"/>
<stop offset="0.385" style="stop-color:#4C0382"/>
<stop offset="0.6165" style="stop-color:#4D0B81"/>
<stop offset="0.8074" style="stop-color:#4F1980"/>
<stop offset="0.9753" style="stop-color:#522D7E"/>
<stop offset="1" style="stop-color:#52317E"/>
<stop offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/>
<polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263
-338.119,1145.007 "/>
<polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/>
<polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
<stop offset="0" style="stop-color:#4C0082"/>
<stop offset="0.385" style="stop-color:#4C0382"/>
<stop offset="0.6165" style="stop-color:#4D0B81"/>
<stop offset="0.8074" style="stop-color:#4F1980"/>
<stop offset="0.9753" style="stop-color:#522D7E"/>
<stop offset="1" style="stop-color:#52317E"/>
<stop offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>

Have you tried adding it as a background image via CSS?
.mainElement {
width: 100vw;
height: 100vh;
background: url("https://pixabay.com/get/57e7d0424a50a914ea9d8578c52f317a123ec3e45659704174267cd495/witch-1751025.svg") no-repeat center center;
background-size: cover;
}
<div class="mainElement"></div>
You might want to look into this post https://css-tricks.com/perfect-full-page-background-image/

Take a look at preserveAspectRatio and ensure your html, body, and svg elements are all taking up 100% height of the viewport.
html {
height: 100%;
}
body {
margin: 0;
background: #4C0082;
height: 100%;
}
svg {
height: 100%;
width: 100%;
}
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 960 560">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)"> <stop offset="0" style="stop-color:#4C0082"/> <stop offset="0.385" style="stop-color:#4C0382"/> <stop offset="0.6165" style="stop-color:#4D0B81"/> <stop offset="0.8074" style="stop-color:#4F1980"/> <stop offset="0.9753" style="stop-color:#522D7E"/> <stop offset="1" style="stop-color:#52317E"/> <stop offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/><polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263 -338.119,1145.007 "/><polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/><polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)"> <stop offset="0" style="stop-color:#4C0082"/> <stop offset="0.385" style="stop-color:#4C0382"/> <stop offset="0.6165" style="stop-color:#4D0B81"/> <stop offset="0.8074" style="stop-color:#4F1980"/> <stop offset="0.9753" style="stop-color:#522D7E"/> <stop offset="1" style="stop-color:#52317E"/> <stop offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>

Is it possible to animate a linear gradient gradientTransform property of an svg image

I have a simple outer circle svg created with the following code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
data-name="Layer 1"
viewBox="0 0 260 260">
<style>
.class1 {
fill-opacity:1;
fill:url(#grayGradient);
}
</style>
<defs>
<linearGradient id="grayGradient"
gradientUnits="userSpaceOnUse"
x1="0" y1="130" x2="260" y2="130">
<stop offset="0" style="stop-color:#919191;stop-opacity:1;" />
<stop offset="1" style="stop-color:#919191;stop-opacity:0;" />
</linearGradient>
</defs>
<title>outer circle</title>
<path
d="M130,0A130,130,0,1,0,260,130,130,130,0,0,0,130,0Zm.36,235a105,105,0,1,1,105-105A105,105,0,0,1,130.36,235Z"
class="class1" />
</svg>
I'm trying to make this look like an indeterminate progress circle, so I want to rotate the gradient around the path of the circle. I know that if I add a gradientTransform=rotate() attribute to the linearGradient, it will move the position of the gradient in the circle.
Is it possible to animate the gradientTransform so that it will appear that the circle is spinning?
I'm very new to svg. Perhaps there is a better way to achieve the effect I'm looking for? I do need to use an svg image that has the same shape.
Thanks for any and all suggestions...

Just add inside <linearGradient> ... </linearGradient> this string:
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 130 130"
to="360 130 130"
dur="1s"
repeatCount="indefinite"
/>
But it won't work in IE and Safari.

unwanted horizontal line from svg mask

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:
The line appears to correspond to the SVG group element that houses a rectangle which is applied a mask and a gradient fill:
However, resizing the SVG to a different width results in the line not displaying:
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("#gradient-36"); mask: url("#mask-36");">
</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.

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>

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("#gradient-36"); mask: url("#mask-36");">
</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("#gradient-36"); mask: url("#mask-36");">
</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("#mask-36");">
</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("#mask-35");">
</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.

SVG linearGradient with animation keyframes together

I create simple example where use two path sec1 and sec2. For both path I use linearGradient with id step1 and step2. First part (sec1) work great, second part (sec2) not yet.
Sec2 must first be in hide, then change positions and scale. I try do this by keyframing, but can't hide sec2 in beginning. Also if I try to use in linearGradient attribute begin="step1.end;" it not working, and not running after filling sec1.
I want create like one animation line which begin from left to right and then from top to bottom, with first change sec2 postion and scale (in hide) after this begin drawing and show gradient animation.
My example here:
https://jsfiddle.net/0gkrch42/

You had two main problems...
Your second animation didn't start hidden because you had the gradient offset starting at "40%' instead of zero
The second problem was that when you use id.end for timing attributes, the id has to reference another <animation> element, not a graphics element.
<svg id="Logo-Defs" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="step1" x1="0" y1="0" x2="1" y2="0">
<stop offset="40%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
<stop offset="40%" stop-opacity="0" stop-color="black">
<animate id="anim1" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
</linearGradient>
<linearGradient id="step2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
<stop offset="0%" stop-opacity="0" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
</linearGradient>
<g>
<path id="sec1" class="cls-1" d="M155.06,43V41.83A42.78,42.78,0,0,0,143.12,16.5c-10.62-11.07-26-12-26-12S10.86,5,3.3,5C3.27,5,.44.25.44.25L117.08.73C137,2,158,18.38,159.07,43,158.09,43,156.08,43,155.06,43Z" />
<path id="sec2" class="cls-1" d="M159.22,129.83V43.18h-4.06q.11,43.42.22,86.84,0,1.89,0,3.78v.91h3.82Z" />
</g>
</defs>
</svg>
<svg id="svg" class="Animate-Path" width="100%" height="100%" viewBox="0 0 512 650" xml:space="preserve">
<use id="Draw-sec1" xlink:href="#sec1" fill="url(#step1)" />
<use id="Draw-sec2" xlink:href="#sec2" fill="url(#step2)" />
<!--<use class="Animate-Fill" xlink:href="#Logo-Group" /> -->
</svg>

compass/css fade border at edges?

I've seen this technique used quite a lot. Like say a separator border (like bottom border for stackoverflow header) which fades at both ends. How do I achieve this with compass? I've searched their documentation and google and can't find any examples of how to do this.

I've never used Compass CSS, but how about mixing CSS and SVG?
Your SVG file:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
<stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" />
</svg>
The CSS:
div.separator
{
width: 80%;
height: 16px;
background-image: url(gradient_file.svg);
}

Resources