Question

我正在屏蔽一个svg所以它有一个背景颜色，只是徽标被掩盖了。我想用它作为全宽菜单背景。这是我复制这个想法的笔： http://codepen.io/maddesigns/pen/PwqYON

在笔中，他只使用文字，但我想使用之前在插图画家制作的svg图像。

希望有人可以帮助我。

这是代码：

svg {
  width: 100%;
  height: inherit;
}
svg text {
  text-anchor: middle;
}
svg #alpha {
  fill: gray;
}
svg #text {
  letter-spacing: -4px;
  font-size: 8em;
  font-weight: 800;
}
svg #subtitle {
  letter-spacing: 4px;
  word-spacing: 0.25em;
  font-size: 1.5em;
  font-weight: 400;
  text-transform: uppercase;
}
svg #base {
  fill: black;
  -webkit-mask: url(#mask);
          mask: url(#mask);
}

    <svg aria-labelledby="text">
      <defs>
        <mask id="mask" x="0" y="0" width="100%" height="100%" >
          <rect id="alpha" x="0" y="0" width="100%" height="100%" />
<path class="text" x="0" y="0" d="M-152.2,402.7c1.5-0.3,3.5-0.5,6-0.5c3.1,0,5.4,0.7,6.8,2c1.3,1.2,2.1,2.9,2.1,5.1s-0.6,3.9-1.9,5.2
	c-1.7,1.8-4.4,2.7-7.4,2.7c-0.9,0-1.8,0-2.5-0.2v9.7h-3.1L-152.2,402.7L-152.2,402.7z M-149.1,414.4c0.7,0.2,1.5,0.3,2.6,0.3
	c3.8,0,6.1-1.8,6.1-5.2c0-3.2-2.3-4.8-5.7-4.8c-1.4,0-2.4,0.1-3,0.3C-149.1,404.9-149.1,414.4-149.1,414.4z"/>
<path class="text" d="M-133,402.7c1.6-0.3,3.9-0.5,6-0.5c3.3,0,5.5,0.6,7,2c1.2,1.1,1.9,2.7,1.9,4.6c0,3.2-2,5.3-4.6,6.2v0.1
	c1.9,0.6,3,2.4,3.6,4.9c0.8,3.4,1.4,5.7,1.9,6.7h-3.2c-0.4-0.7-0.9-2.8-1.6-5.8c-0.7-3.3-2-4.6-4.9-4.7h-3v10.5h-3.1V402.7
	L-133,402.7z M-129.9,413.7h3.2c3.3,0,5.5-1.8,5.5-4.6c0-3.1-2.3-4.5-5.6-4.5c-1.5,0-2.6,0.1-3.1,0.3L-129.9,413.7L-129.9,413.7z"/>
<path class="text" d="M-92.8,414.2c0,8.4-5.1,12.8-11.3,12.8c-6.4,0-10.9-5-10.9-12.3c0-7.7,4.8-12.7,11.3-12.7C-97.1,402-92.8,407-92.8,414.2z
	 M-111.7,414.6c0,5.2,2.8,9.8,7.7,9.8c5,0,7.8-4.6,7.8-10.1c0-4.8-2.5-9.9-7.7-9.9C-109.1,404.5-111.7,409.3-111.7,414.6z"/>
<path class="text" d="M-1.3,405.1L-1.3,405.1c-0.4,1.4-0.8,2.9-1.3,4.4l-2.4,7h7.3l-2.4-7C-0.6,408-0.9,406.5-1.3,405.1z"/>
<path class="text" d="M-90.7,400.8V428H9.9v-27.2H-90.7z M-67.7,426.6l-0.6-10.7c-0.2-3.4-0.4-7.5-0.4-10.5h-0.1c-0.8,2.8-1.8,5.9-3.1,9.2
	l-4.3,11.8h-2.4l-3.9-11.6c-1.2-3.4-2.1-6.6-2.8-9.4h-0.1c-0.1,3-0.3,7.1-0.5,10.7l-0.6,10.4h-3l1.7-24.3h4l4.1,11.7
	c1,3,1.8,5.7,2.4,8.2h0.1c0.6-2.4,1.5-5.1,2.6-8.2l4.3-11.7h4l1.5,24.3C-64.6,426.6-67.7,426.6-67.7,426.6z M-46.2,426.6h-13.6
	v-24.3h13.1v2.6h-10v7.7h9.4v2.6h-9.4v8.7h10.5V426.6z M-25.7,423.3c-2.3,2.3-6,3.5-10.7,3.5c-2.2,0-4.1-0.1-5.7-0.3v-23.9
	c1.9-0.3,4.2-0.5,6.7-0.5c4.5,0,7.7,1,9.8,3c2.2,2,3.4,4.8,3.4,8.7C-22.2,417.9-23.4,421.1-25.7,423.3z M-15,426.6h-3.1v-24.3h3.1
	V426.6z M5.6,426.6L3,419h-8.6l-2.5,7.6h-3.2l8.2-24.3h3.8L9,426.6H5.6z"/>
<path class="text" d="M-35.3,404.7c-1.6,0-2.8,0.1-3.7,0.3v19.1c0.8,0.1,1.9,0.2,3.2,0.2c6.7,0,10.3-3.7,10.3-10.3
	C-25.4,408.3-28.7,404.7-35.3,404.7z"/>
<path class="text" d="M31,425.5c-1.4,0.5-4.2,1.3-7.5,1.3c-3.7,0-6.7-0.9-9.1-3.2c-2.1-2-3.4-5.3-3.4-9c0-7.2,5-12.5,13.1-12.5c2.8,0,5,0.6,6,1.1
	l-0.8,2.6c-1.3-0.6-2.9-1-5.4-1c-5.9,0-9.8,3.7-9.8,9.8c0,6.2,3.7,9.8,9.4,9.8c2.1,0,3.5-0.3,4.2-0.6v-7.2h-4.9v-2.5h8v11.4H31z"/>
<path class="text" d="M35.8,402.7c1.6-0.3,3.9-0.5,6-0.5c3.3,0,5.5,0.6,7,2c1.2,1.1,1.9,2.7,1.9,4.6c0,3.2-2,5.3-4.6,6.2v0.1
	c1.9,0.6,3,2.4,3.6,4.9c0.8,3.4,1.4,5.7,1.9,6.7h-3.2c-0.4-0.7-0.9-2.8-1.6-5.8c-0.7-3.3-2-4.6-4.9-4.7h-3v10.5h-3.1V402.7
	L35.8,402.7z M38.9,413.7h3.2c3.3,0,5.5-1.8,5.5-4.6c0-3.1-2.3-4.5-5.6-4.5c-1.5,0-2.6,0.1-3.1,0.3
	C38.9,404.9,38.9,413.7,38.9,413.7z"/>
<path class="text" d="M76,414.2c0,8.4-5.1,12.8-11.3,12.8c-6.4,0-10.9-5-10.9-12.3c0-7.7,4.8-12.7,11.3-12.7C71.7,402,76,407,76,414.2z
	 M57.1,414.6c0,5.2,2.8,9.8,7.7,9.8c5,0,7.8-4.6,7.8-10.1c0-4.8-2.5-9.9-7.7-9.9C59.7,404.5,57.1,409.3,57.1,414.6z"/>
<path class="text" d="M83.2,402.4v14.4c0,5.4,2.4,7.7,5.6,7.7c3.6,0,5.9-2.4,5.9-7.7v-14.4h3.2v14.1c0,7.5-3.9,10.5-9.2,10.5
	c-5,0-8.7-2.8-8.7-10.4v-14.3L83.2,402.4L83.2,402.4z"/>
<path class="text" d="M103.3,402.7c1.5-0.3,3.5-0.5,6-0.5c3.1,0,5.4,0.7,6.8,2c1.3,1.2,2.1,2.9,2.1,5.1s-0.6,3.9-1.9,5.2
	c-1.7,1.8-4.4,2.7-7.4,2.7c-0.9,0-1.8,0-2.5-0.2v9.7h-3.1V402.7L103.3,402.7z M106.5,414.4c0.7,0.2,1.5,0.3,2.6,0.3
	c3.8,0,6.1-1.8,6.1-5.2c0-3.2-2.3-4.8-5.7-4.8c-1.4,0-2.4,0.1-3,0.3V414.4L106.5,414.4z"/>
<path class="text" d="M119.5,421.1c2,0,3.5,1.6,3.5,3.5c0,2-1.6,3.5-3.6,3.5s-3.6-1.5-3.6-3.5C115.9,422.6,117.5,421.1,119.5,421.1L119.5,421.1z
	 M119.4,421.8c-1.5,0-2.7,1.3-2.7,2.8c0,1.6,1.1,2.8,2.7,2.8c1.5,0,2.7-1.2,2.7-2.8C122.1,423.1,121,421.8,119.4,421.8
	C119.5,421.8,119.4,421.8,119.4,421.8z M118.9,426.4h-0.8v-3.5c0.3-0.1,0.8-0.1,1.3-0.1c0.7,0,1,0.1,1.2,0.3
	c0.2,0.1,0.3,0.4,0.3,0.7c0,0.4-0.3,0.7-0.7,0.8l0,0c0.3,0.1,0.5,0.4,0.6,0.9s0.2,0.7,0.3,0.9h-0.9c-0.1-0.1-0.2-0.4-0.3-0.8
	c-0.1-0.4-0.3-0.6-0.7-0.6h-0.4L118.9,426.4L118.9,426.4z M118.9,424.4h0.4c0.4,0,0.8-0.1,0.8-0.5c0-0.3-0.2-0.5-0.7-0.5
	c-0.2,0-0.4,0-0.4,0v1H118.9z"/>
        </mask>
      </defs>

      <rect id="base" x="0" y="0" width="100%" height="100%"/>
    </svg>

Answer 1

最初，svg中的<path>元素与<text>的位置不同为了更容易对齐，添加<g>组标记并将其放置在transform属性中。像这样：

<mask id="mask" x="0" y="0" width="100%" height="100%">
  <rect id="alpha" x="0" y="0" width="100%" height="100%" />
    <g transform="translate(400,-300)"> 
       //your <path> inside
    </g>
</mask>

这是一个固定的fiddle

SVG屏蔽元素

1 个答案: