lundi 27 juin 2016

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

Aucun commentaire:

Enregistrer un commentaire