CODEWITHSUNDEEP
htmlsvgsvg-filters
mckee80
mckee80

Reputation: 27

invert svg mask on background image

I'm trying to mask my background image, but have the mask lighten instead of darken. I'm trying to get this kind of look: enter image description herehttps://elements-cover-images-0.imgix.net/cda178d5-3623-43be-8d74-1e76ad51bd5a?w=1170&fit=max&auto=compress%2Cformat&s=d2bfdaf9c43d63b844c304581a674e71

My code started with the second answer to this question: Transparent text cut out of background

And tried, unsuccesfully, to incorportate this one: Inverting SVG image mask

Here is my codepen (it shouldn't be scrolling, but that is a separate issue)

    svg{width:100%;}
    body {
      background:url("https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }


<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

</head>

<body>
  <svg viewbox="0 0 100 100">
    <defs>
      <filter id="invert">
        <feComponentTransfer>
          <feFuncR type="table" tableValues="1 0"/>
          <feFuncG type="table" tableValues="1 0"/>
          <feFuncB type="table" tableValues="1 0"/>
        </feComponentTransfer>
      </filter>
      <g id="text">
        <text text-anchor="middle" x="50" y="38" dy="1">Venture</text>
        <text text-anchor="middle" x="50" y="50" dy="1">Into the Wild</text>
      </g>
      <mask id="mask" x="0" y="0" width="100" height="100">
        <!-- <image width=1000 xlink:href="https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg" filter="url(#invert)"/> -->
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <use xlink:href="#text" />
      </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" mask="url(#mask)" fill-opacity="0.6"/>
    <use xlink:href="#text" mask="url(#mask)" />
  </svg>    </body> </html>

https://codepen.io/mckee80/pen/NoVMWP

Any help would be appreciated. I don't know much about svg, I'm just trying to make a cool looking landing page.

Upvotes: 0

Views: 2109

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I've moved your image in the SVG. I'm not very sure this is what you want.

The mask has a grey rectangle (#555) and white text. 

      <svg viewbox="0 0 100 100">
      <defs> 
        <mask id="test">
       <g id="text" fill="white">
        <rect width="100%" height="100%" fill="#555" />
        <text text-anchor="middle" x="50" y="38" dy="1">Venture</text>
        <text text-anchor="middle" x="50" y="50" dy="1">Into the Wild</text>
      </g>
        </mask>
        </defs>
        <image width="180%" xlink:href="https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg" style="mask: url(#test)" />
        
      </svg>

Upvotes: 2

Related Questions