css - SVG 蒙版裁剪在 Firefox 中不起作用

Question

我一直在尝试通过使用 SVG mask 来实现这种滚动效果。它在 Chrome 中工作得很好，尽管它在 Firefox 中似乎不起作用。我创建了一个 dabblet 来显示我得到的行为:http://dabblet.com/gist/83bf9a8708193634892e

创建剪贴蒙版的正确方法因浏览器而异(更多信息请参见 here )。当然，对于 Chrome 和 Firefox，我都使用了两种指定的方法。

SVG 文件看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="138px" height="522.457px" viewBox="81 -111.228 138 522.457" enable-background="new 81 -111.228 138 522.457"
 xml:space="preserve">
  <path id="svgClip" d="M215.546,73.573c-4.565-16.493-28.671-31.462-35.774-40.851c-7.104-9.389-5.964-39.836-5.964-39.836v-52.268
c0,0-0.254-19.917-0.254-21.821c2.03,0,1.396-3.679,1.396-3.679s0-9.896,0-12.052c0-2.157-2.03-2.41-2.03-2.41v-7.823
c-0.509-4.061-5.242-4.061-5.242-4.061H150.93h-1.86h-16.747c0,0-4.735,0-5.243,4.061v7.823c0,0-2.03,0.254-2.03,2.41
s0,12.052,0,12.052s-0.634,3.679,1.395,3.679c0,1.903-0.253,21.821-0.253,21.821v52.268c0,0,1.142,30.447-5.962,39.836
c-7.104,9.388-31.208,24.357-35.775,40.851c-4.567,16.492-3.552,45.925-2.792,69.268l4.069,249.541c0,0-1.489,17.889,14.278,18.397
c14.653,0.798,39.683,0.339,49.664,0.108c8.501,0.23,30.053,0.689,44.705-0.108c18.605-1.015,16.94-19.623,16.94-19.623
l7.02-248.315C219.1,119.498,220.114,90.065,215.546,73.573z"/>
  <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
    <path d="M215.546,73.573c-4.565-16.493-28.671-31.462-35.774-40.851c-7.104-9.389-5.964-39.836-5.964-39.836v-52.268
c0,0-0.254-19.917-0.254-21.821c2.03,0,1.396-3.679,1.396-3.679s0-9.896,0-12.052c0-2.157-2.03-2.41-2.03-2.41v-7.823
c-0.509-4.061-5.242-4.061-5.242-4.061H150.93h-1.86h-16.747c0,0-4.735,0-5.243,4.061v7.823c0,0-2.03,0.254-2.03,2.41
s0,12.052,0,12.052s-0.634,3.679,1.395,3.679c0,1.903-0.253,21.821-0.253,21.821v52.268c0,0,1.142,30.447-5.962,39.836
c-7.104,9.388-31.208,24.357-35.775,40.851c-4.567,16.492-3.552,45.925-2.792,69.268l4.069,249.541c0,0-1.489,17.889,14.278,18.397
c14.653,0.798,39.683,0.339,49.664,0.108c8.501,0.23,30.053,0.689,44.705-0.108c18.605-1.015,16.94-19.623,16.94-19.623
l7.02-248.315C219.1,119.498,220.114,90.065,215.546,73.573z"/>
  </mask>
</svg>

尝试在 Firefox 上实现它时我做错了什么？ 与往常一样，我们将不胜感激任何类型的提示或帮助!

Answer 1

mask 需要设置填充颜色，例如

#wrapper {
	width: 600px;
	height: 600px;
	background: black;
}

#wrapper .container {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
            mask: url(#mask);
}

#wrapper .container .inner1,
#wrapper .container .inner2,
#wrapper .container .inner3 {
	width: 100%;
	height: 100%;
}

#wrapper .container .inner1 {
	background: red;
}

#wrapper .container .inner2 {
	background: green;
}

#wrapper .container .inner3 {
	background: blue;
}

<div id="wrapper">
	<div class="container">
		<div class="inner1"></div>
		<div class="inner2"></div>
		<div class="inner3"></div>
	</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="0" height="0" viewBox="81 -111.228 138 522.457">
  <mask id="mask" maskContentUnits="userSpaceOnUse">
    <path fill="white" d="M215.546,73.573c-4.565-16.493-28.671-31.462-35.774-40.851c-7.104-9.389-5.964-39.836-5.964-39.836v-52.268
	c0,0-0.254-19.917-0.254-21.821c2.03,0,1.396-3.679,1.396-3.679s0-9.896,0-12.052c0-2.157-2.03-2.41-2.03-2.41v-7.823
	c-0.509-4.061-5.242-4.061-5.242-4.061H150.93h-1.86h-16.747c0,0-4.735,0-5.243,4.061v7.823c0,0-2.03,0.254-2.03,2.41
	s0,12.052,0,12.052s-0.634,3.679,1.395,3.679c0,1.903-0.253,21.821-0.253,21.821v52.268c0,0,1.142,30.447-5.962,39.836
	c-7.104,9.388-31.208,24.357-35.775,40.851c-4.567,16.492-3.552,45.925-2.792,69.268l4.069,249.541c0,0-1.489,17.889,14.278,18.397
	c14.653,0.798,39.683,0.339,49.664,0.108c8.501,0.23,30.053,0.689,44.705-0.108c18.605-1.015,16.94-19.623,16.94-19.623
	l7.02-248.315C219.1,119.498,220.114,90.065,215.546,73.573z"/>
  </mask>
</svg>