13

I am currently using an SVG gradient to apply a fade-out effect for paths. This allows the path to start at 100% opacity at x0 and fade out to 0% at x1, wherever those may be for the particular path it is applied to:

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

    <path
        d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
        style="stroke:url(#gradient_to_transparent);"
    />
</svg>

This works great when applying to the stroke style of the above path.

However, the problem is that by using the stroke style I cannot apply other stroke styles and it defaults to black. What I would like is to style the stroke using whatever color I want and then apply a gradient to the stroke-opacity or apply an SVG filter to create the fade-out effect. I tried messing with SVG filters and using feComponentTransfer with feFuncA, but wasn't able to get something that worked right.

The stroke color needs to be individually calculated for each path. So, the solution of setting the color in the gradient wouldn't scale very well.

2
  • Does it need to be a gradient or a filter? I would suggest using a <mask> that contains a rect with a gradient applied, but I'm not sure about the requirements you have. An example: xn--dahlstrm-t4a.net/svg/presentations/svgdemos/… Feb 14, 2014 at 15:58
  • @ErikDahlström, you should post this as an answer as it looks like a great solution. There are some complications with computing the mask size and placement for curved paths, though.
    – drarmstr
    Feb 20, 2014 at 23:32

1 Answer 1

17

Does it need to be a gradient or a filter? I would suggest using a <mask> that contains a rect with a gradient applied, but I'm not sure about the requirements you have.

<svg>	
  <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>

  <path
    d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
    fill="green"
    stroke="red"
    mask="url(#fade)"
  />
</svg>

See a similar example here.

4
  • 1
    This approach works great. However, please note that there are complications with the mask size and paths. The bounding box for a path is computed based on the x,y position of the start and end points. A curved path or thick stroke-width may extend outside of this box. Therefore, I had to actually have the mask and rect start at a negative x, y and use a width and height thousands of times larger than the object bounding box. When doing this, the linearGradient stop points also had to be adjusted so that the stops aligned with the endpoints of the path instead of the edges of the mask.
    – drarmstr
    Feb 21, 2014 at 16:03
  • There is also the corner case for horizontal or vertical lines where the bounding box would have no height or width. For this case I had to jitter the endpoint so there was a slight slope and then really make sure the mask was tens of thousands of times bigger to handle stroke widths that could be hundreds of pixels wide.
    – drarmstr
    Feb 21, 2014 at 18:37
  • @drarmstr do you have a link to an example you could share of that approach? Jun 16, 2020 at 19:34
  • 1
    @JasonAxelson - In the Sankey visualization of github.com/drarmstr/chartcollection
    – drarmstr
    Jun 17, 2020 at 5:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.