Question

试图让我的面具在Firefox中运行时感到困惑。然而，已经花费了大量时间进行研究，却没有成功。也许，我错过了一些明显的东西，如果有人看看并帮助我，我将非常感激。

想法来自这里：https://codepen.io/SahAssar/pen/YPWxWX（在CodePen中的FF中工作，但我试图直接实现相同的代码，并且它在FF中不起作用。）

我的实现如下（html）：

break

和css：

<html>
  <head>
    <link href="./styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="section">
      <svg class="svg" width="1920px" height="1080px">
        <defs>
          <mask id="mask" x="0" y="0" width="100%" height="100%" >
            <rect class="maskRect" x="0" y="0" width="100%" height="100%" />
            <text x="0" y="30%" textAnchor="middle" id="js-mask" class="titleText">
              <tspan x="0" dy="0px">knockedout</tspan>
              <tspan x="0" dy="120px">mask</tspan>
            </text>
          </mask>
        </defs>
        <rect class="svgRect" x="0" y="0" width="100%" height="100%" />
        <g class="content">
          <text x="0" y="60%" textAnchor="middle" id="js-below-mask">
            <tspan class="titleText highlight" x="0" dy="0px" textAnchor="middle">visible content</tspan>
          </text>
        </g>
      </svg>
      <video class="video" autoPlay="autoplay" muted="muted" preload="auto" loop="loop">
        <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4" />
        <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm" />
      </video>
    </div>
  <body>
</html>

因此它适用于除Firefox以外的所有浏览器。在FF掩码中，只是消失了，除了div顶部的SVG的可见部分之外我什么也看不到。

看到关于bugzilla的所有相关问题，但是所有这些问题都很老了，似乎已经解决了，所以一切都应该正常工作...... （585539,4333345,333698）

试图直接向svg添加fill =“white”，但遗憾的是它也没有效果。

抱歉，我对SVG和css masking非常陌生。非常感谢您的帮助。

提前谢谢。

UPD：使用代码示例 创建了一个存档，因此您可以直接运行它，而不是使用js-fiddles或codepens 等

http://www.filedropper.com/maskexample

UPD2： 此代码适用于在Firefox中打开的Js-fiddle和CodePen等在线编辑器，但它不能直接在浏览器中使用。

UPD3： 好吧，我已经弄清楚了我的代码和Js-fiddle之间的区别。但我仍然不知道这种行为的原因。因此，JS-fiddle将样式内联在页面上，如果我也将它们内联到我的代码中并直接在FF中打开它可以工作，但我真的想要将样式放在一个单独的文件中，这种行为令人毛骨悚然，因为我可以看到所有我的样式来自一个单独的样式表，在检查它时应用，但它不能正常工作（我可能会理解，如果我错误地链接css文件，但它实际上只是一个复制粘贴，我看到所有样式应用，除了蒙版）。

所以这个位应该是内联的才能工作：

    body {
  position relative
}

.section {
  position: relative;
  min-height: 750px;
  max-height: 1200px;
  height: 100vh;
  overflow: hidden;
}
.svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.maskRect {
  fill: white;
}

.svgRect {
  fill: black;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}

.titleText {
  font-size: 200px;
  font-weight: bold;
  font-size: rem(150px);
}

.highlight {
  fill: white;
}

Answer 1

因此，将屏蔽样式内联解决了我的问题。由于某些原因（对我来说仍然很好），当它们在css文件中分开时，它们会被应用到元素中，但在Firefox中没有视觉效果。

<rect
  style={{
   '-webkit-mask': 'url(#mask)',
    mask: 'url(#mask)',
    fill: 'url(#gradient)',
  }}
/>

或者将其保存在单独的文件中，这可以解决问题 SVG "fill: url(#....)" behaving strangely in Firefox - 完全是我的问题

mask: 'url(/#mask)'

那很有趣

CSS掩码中使用的SVG文本在Firefox中不起作用

1 个答案: