html - SVG/CSS : Masked Header Logo

Question

所以我正在尝试制作一个蒙版 Logo ，其中带阴影的部分实际上是其背后内容的透明窗口。

设计是这样的:

我想我必须用 SVG 和 Masking 来解决这个问题，但我的尝试并没有像这里看到的那样顺利:

@charset "utf-8";
*{margin:0;padding:0}
body{
	width:100%;
	min-height:100%;
	background-color:#eee;
	color:#eee;
}
/*Header
-------------*/
header{
	position:fixed;
	top:0;
	width:100%;
	height:20%;
	height:auto;
	z-index:999;
}
#logo:before{
	width:10%;
	height:15vw;
	display:block;
	content:"";
	background:#fff;
	float:left;
}
#logo:after{
	width:80%;
	height:15vw;
	display:inline-block;
	content:"";
	background:#fff;
}
#logo img{
	float:left;
	width:10%;
}
/*Content
-------------*/
main{
	position:relative;
	margin:auto;
	width:100%;
	height:200%;
	background:#2d917f
}
/*Links
-------------*/
a,a:visited{
	color:#eee;
	text-decoration:none;
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-o-transition:all .2s ease;
	transition:all .2s ease;
}
a:active, a:hover{
	color:#fff;
	border-bottom:1px solid #fff
}
/*Scrollbar
-------------*/
::-webkit-scrollbar{width:12px;height:12px;background-color:#1A1A1A}
::-webkit-scrollbar-corner{background-color:#0e0e0e}
::-webkit-scrollbar-track{background-color:#121212}
::-webkit-scrollbar-thumb{background:#2d917f}
::-webkit-scrollbar:horizontal{height:12px}
/*Selection
-------------*/
::selection{color:#fff;background-color:#2d917f}
::-moz-selection{color:#fff;background-color:#2d917f}

<header>
	<div id="logo">
		<img  src="https://ap-images.ga/up/2017/05/11151821-Logo2.svg" title="11145933-Logo.svg" alt="11145933-Logo.svg"/>
	</div>
</header>
<main>
</main>

在 Codepen 上:https://codepen.io/RafaelDeJongh/pen/PmROPW

有没有人知道我最好如何解决这个问题，以及通常如何屏蔽元素中的特定部分(在本例中为标题)？

提前致谢!

Answer 1

最简单的解决方案就是制作一个 SVG:

• 构成白色横幅背景的矩形
• 应用于整体的面具
• 最后对结果应用投影滤镜

然后将该 SVG 嵌入您的页面并覆盖您的横幅文本，或者将 SVG 保存为单独的文件并将其用作 background-imaage对于 <header>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860 256">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <g transform="translate(200,35)">
        <rect x="1" y="1" width="118" height="178" fill="#000"/>
        <path fill="white" d="M0.1,0h119.8v180H0.1V0 M3.2,33.2c0,13.8,0,27.7,0,41.5C18.6,75.1,33.9,80.4,46,90c-0.1-5.1,0-10.2-0.1-15.3
				c16.3-0.2,32.7,5,45.6,15c12.2,9.5,22,22.9,25.4,38.1c-0.4-31.5,0-63-0.2-94.5C78.9,33.2,41.1,33.2,3.2,33.2 M3.6,77.9
				c0,23,0,45.9,0,68.9c14.1,0,28.3,0,42.4,0c0-17.6,0-35.1,0-52.7C34.2,84,18.9,78.4,3.6,77.9 M49,78c0.1,4.8,0,9.5,0,14.2
				c15.5,13.6,25.1,33.8,25,54.5c14.1,0,28.3,0,42.4,0c0.5-17.7-7.1-35.2-19.3-47.8C84.7,86.1,67,78.2,49,78 M49.1,96.6
				c0.1,16.7,0,33.4,0,50.2c7.3,0,14.6,0,21.8,0C70.9,128,62.6,109.6,49.1,96.6z"/>
      </g>
    </mask>
    <filter id="shadow">
      <feOffset in="SourceAlpha" dx="10" dy="10" result="offset" />
      <feColorMatrix in="offset" type="matrix" values="0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0" result="greyoff" />
      <feGaussianBlur in="greyoff" stdDeviation="7" result="blur" />
      <feBlend in="SourceGraphic" in2="blur" mode="normal" />
    </filter>
  </defs>

  <g filter="url(#shadow)">
    <rect x="15" y="15" width="1800" height="220" fill="white" mask="url(#hole)"/>
  </g>
</svg>