CODEWITHSUNDEEP
cssfirefoxsvggradientfade
Sam Assoum
Sam Assoum

Reputation: 447

SVG Image opacity gradient

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);

Upvotes: 3

Views: 2918

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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>

Upvotes: 6

Related Questions