SVG mask clipping не работает в Firefox

Question

Я пытался добиться этого эффекта прокрутки с помощью SVG-масок. Он отлично работает в 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

Маска должна иметь набор цветов заливки, например.

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

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

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

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

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

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

<div id="wrapper"> 
 
\t <div class="container"> 
 
\t \t <div class="inner1"></div> 
 
\t \t <div class="inner2"></div> 
 
\t \t <div class="inner3"></div> 
 
\t </div> 
 
</div> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t l7.02-248.315C219.1,119.498,220.114,90.065,215.546,73.573z"/> 
 
    </mask> 
 
</svg>