Loading ...
Sorry, an error occurred while loading the content.

66117Right-aligned SVG fade-out mask for use in SVG+HTML

Expand Messages
  • gijskruitbosch
    May 14 9:03 AM
    • 0 Attachment
      Hi,

      I'm trying to come up with a way to have a fixed-size gradient apply leftwards from the right edge of a variable-size HTML box. The best I could come up with is here:

      http://jsbin.com/ahelew/2/edit

      Note that there are two boxes, of different sizes, with the same mask applied to them. Unfortunately, in the second (wider) box, more characters get faded out.

      The problem seems to be that positioning something on the right side seems impossible in SVG+HTML, and using userSpaceOnUse for the coordinate system makes percentages resolve against the window width rather than the width of the box on which the mask is applied...

      Does anyone have any ideas how I might go around doing this, or is it simply not possible?

      Cheers,
      Gijs