Search code examples
htmlcsssvgmask

Applying mask on part of an element

I'm encountering difficulty in applying a mask to only the top portion of an element rather than the entire element. I'm uncertain if I'm approaching this correctly.

I have an element called "footer" with a gradient. Behind this footer, there may be additional graphical elements.

My aim is to mask the top 100 pixels of this footer to create a smooth transition of the footer's gradient.

However, when I apply the mask, everything that isn't a colored object within the SVG is also masked away, including the area outside of the SVG.

The element

<footer class="footer">

</footer>

The styling

.footer {
    position: relative;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); 
    height: 200px;

    -webkit-mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    -webkit-mask-size: 1000px auto; 
    mask-size: 1000px auto; 
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    mask-position: top;
}
  • The gray is the background on the webpage and is not related to the footer.
  • The red is the size if the SVG
  • the blue is what i dont want masked.

This should create a landscape popping up from the footer element. enter image description here

Footer without the mask enter image description here

Solution

  • In this case the height of the SVG is not important, so if you just extend the SVG downwards, that is fine. Here is the SVG I use in the example:

    <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
  <circle cx="100" cy="100" r="100"  />
  <circle cx="500" cy="50" r="50"  />
  <circle cx="900" cy="100" r="100"  />
  <rect y="100" width="1000" height="900" />
</svg>

    It is 1000x1000 and the rectangle covers the part from y="100" to the bottom and therefore makes the bottom part of the footer transparent.

    .footer {
    position: relative;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); 
    height: 200px; 
    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MCIgcj0iNTAiICAvPgogIDxjaXJjbGUgY3g9IjkwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8cmVjdCB5PSIxMDAiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjkwMCIgLz4KPC9zdmc+Cgo=');
    mask-size: 1000px auto; 
    mask-repeat: no-repeat; 
    mask-position: top left;
}
    <footer class="footer"></footer>