svg mask rect 在 Firefox 中没有尺寸答案

【问题标题】：svg mask rect has no dimension in firefoxsvg mask rect 在 Firefox 中没有尺寸
【发布时间】：2015-11-21 14:45:16
【问题描述】：

我将悬停在蒙版 SVG 的不透明度上设置动画，以在图像上放置一个半透明层。它工作得很好，除了 Firefox，没有显示掩码并且图像全白。蒙版通过 CSS 应用于图像

        <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 中没有显示掩码？

非常感谢您的帮助！

【问题讨论】：

这可能与您的 svg 文档没有被引用有关，您应该尝试将其直接添加到元素中，这要归功于其 mask 属性或将其设置为内联样式。此外，id 属性在整个文档中应该是唯一的，这里有 3*6 个不同的 #svg-fade 和 #mask2。最后，FF 不喜欢 svg 的 id 属性中的 - 字符，你应该避免它。也就是说，我想知道其他浏览器如何运作良好:)
objectBoundingBox 单位需要在 0 到 1 的范围内。宽度 200 是被遮罩对象大小的 200 倍。也许您打算使用 userSpaceOnUse。
@RobertLongson，这些属性没有在“实时代码”中设置
谢谢凯多。这是面具的重复 ID，很容易修复。 @RobertLongson：我删除了这个探针。我有 3 个视口，首先通过 css 媒体查询设置了宽度和高度，这在 chrome 中运行良好，但在 Firefox 中运行良好。所以我不得不放入所有 3 个 svg 并使用引导辅助类。您知道实现这一目标的更好方法吗？

标签： html css firefox svg mask

【解决方案1】：

对于任何将来的参考：我发现掩码的 id 在整个文档中必须是唯一的，即使掩码是在同一个 SVG 中定义的，并且您也不能使用类来代替。

【讨论】：