html - svg mask rect 在 firefox 中没有维度

Question

我将鼠标悬停在蒙版 SVG 的不透明度上以在图像上放置一个半透明层来制作动画。除了 Firefox 之外，它工作正常，其中不显示掩码并且图像全白。通过 CSS 将 mask 应用于图像

        <svg id="svg-fade" class="visible-sm-block img-circle" width="200" height="200">
          <defs>
            <mask id="mask2" width="200" height="200" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
              <rect x="0" y="0" width="200" height="200" style="stroke:none; fill: #bbbbbb"></rect>
              <rect x="95" y="50" width="10" height="100" style="stroke:none; fill: #000000"></rect>
              <rect x="50" y="95" width="100" height="10" style="stroke:none; fill: #000000"></rect>
            </mask>
          </defs>
          <rect class="target" width="200" height="200" style="stroke:none; fill: rgba(255,255,255,1)"></rect>
        </svg>

直播代码可以查看here .

是否缺少某个属性或者为什么掩码没有显示在 Firefox 中？

非常感谢您的帮助!

Answer 1

对于任何 future 的引用:我发现 mask 的 id 在整个文档中必须是唯一的，即使 mask 是在完全相同的 SVG 中定义的，并且您也不能使用类来代替。