时间戳

首页 > 解决方案 > 在背景图像上反转 svg 蒙版

html - 在背景图像上反转 svg 蒙版

问题描述

我试图掩盖我的背景图像，但让面具变亮而不是变暗。我正在尝试获得这种外观：https ://elements-cover-images-0.imgix.net/cda178d5-3623-43be-8d74-1e76ad51bd5a?w=1170&fit=max&auto=compress%2Cformat&s=d2bfdaf9c43d63b844c304581a674e71在此处输入图像描述

我的代码从这个问题的第二个答案开始：从背景中切出的透明文本

并尝试将其合并，但未成功：Inverting SVG image mask

这是我的代码笔（它不应该滚动，但这是一个单独的问题）

    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

任何帮助，将不胜感激。我对 svg 了解不多，我只是想制作一个看起来很酷的登录页面。

标签： htmlsvgsvg-filters

解决方案

我已经在 SVG 中移动了您的图像。我不太确定这是你想要的。

蒙版有一个灰色矩形 (#555) 和白色文本。

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

推荐阅读