I am currently using an SVG gradient to apply a fade-out effect to patches.
This allows you to start the path with 100% opacity at x0 and gradually reduce the opacity to 0% at x1 , wherever they are for the particular path to which the gradient is applied:

 <linearGradient id="gradient_to_transparent" x1="0%" x2="100%"> <stop offset="0" stop-opacity="1"></stop> <stop offset="1" stop-opacity="0"></stop> </linearGradient>

This works great when applied to the outline stroke style:

 <path d="..." style="stroke:url(#gradient_to_transparent);"></path>

However, the problem is that when using this stroke style, I cannot additionally apply other stroke styles, and by default they remain black.

I would like the stroke style to be performed using any color I specify, and then apply a gradient to the stroke opacity or apply an SVG filter to create a fade-out effect.

I tried using SVG - feComponentTransfer with feFuncA , but could not get what would work.

The stroke color must be calculated separately for each path. Thus, the solution to set the color in the gradient will not scale.

Translation of the answer: using an SVG filter @drarmstr

2 answers 2

enter image description here

Should it be a gradient or filter? I would suggest using <mask> , which contains a rectangle with a gradient applied, but I'm not sure if I understood your requirements correctly.

 <svg id="svg1" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="1280" height="640" viewBox="-20 20 400 80"> <defs> <linearGradient id="fadeGrad" y2="1" x2="0"> <stop offset="0.5" stop-color="white" stop-opacity="0"/> <stop offset="1" stop-color="white" stop-opacity=".5"/> </linearGradient> <mask id="fade" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#fadeGrad)"/> </mask> </defs> <g id="web2.0-reflection"> <text id="text" font-size="40" font-weight="bold" fill="yellowgreen" font-family="sans-serif" text-rendering="geometricPrecision">Instant Web 2.0 </text> <use xlink:href="#text" transform="scale(1 -1)" mask="url(#fade)"/> </g> </svg>

See a similar example.

Translation of the answer: using an SVG filter @Erik Dahlström

    SVG animation example

    The code is taken from the example below.
    Added sequential animations of letters using the skewX() and skewY() commands skewX() rotate letters around the X and Y axes, respectively.

     <svg id="svg1" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="1280" height="640" viewBox="-20 20 400 80"> <defs> <linearGradient id="fadeGrad" y2="1" x2="0"> <stop offset="0.5" stop-color="white" stop-opacity="0"/> <stop offset="1" stop-color="white" stop-opacity=".5"/> </linearGradient> <mask id="fade" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#fadeGrad)"/> </mask> </defs> <g id="web2.0-reflection"> <text id="text" font-size="40" font-weight="bold" fill="purple" font-family="sans-serif" text-rendering="geometricPrecision">Instant Web 2.0 <animateTransform id="an1" attributeName="transform" type="skewX" values="0;50;0;-50;0" begin="0;an2.end" dur="8s" repeatCount="1"/> <animateTransform id="an2" attributeName="transform" type="skewY" values="0;3;0;-3;0" begin="an1.end" dur="5s" repeatCount="1"/> </text> <use xlink:href="#text" transform="scale(1 -1)" mask="url(#fade)"/> </g> </svg>

    The code is taken from the example below. Added sequential letter animations with the skewX() and skewY()