什么是 svg 掩码的浏览器支持以及如何获得最大的浏览器支持答案

【问题标题】：What is the browser support of an svg mask and how to get maximal browser support什么是 svg 掩码的浏览器支持以及如何获得最大的浏览器支持
【发布时间】：2017-10-25 01:27:09
【问题描述】：

我一直在用 svg 制作图像滑块。我使用蒙版为过渡设置动画。我遇到了动画无法在移动设备上运行的问题。所以我开始研究浏览器对 mask 属性的支持，因为我认为这是问题的原因。大多数网站显示浏览器支持桌面浏览器，但不支持移动浏览器。

在哪些（移动）浏览器中不支持 svg 掩码？
有什么方法可以提高对 svg 掩码的跨浏览器支持？
是否可以检测浏览器是否支持带有 javascript 的掩码（这样我就可以为这些浏览器创建不带动画的回退）？

【问题讨论】：

标签： svg cross-browser

【解决方案1】：

您可以使用 <switch> 元素测试 SVG 标记中的功能支持。如果 UA 支持遮罩，则只渲染第一组，如果不支持，则只渲染第二组。

<switch>
    <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Mask">
        <!-- content that needs mask capability -->
    </g>
    <g>
        <!-- fallback content here -->
    </g>
</switch>

重要提示：您需要用开关包围的是实际要渲染的元素。由于<mask> 元素没有被渲染而只是被引用，所以这个开关不会有任何效果。而是包含获得 mask 属性/样式属性的渲染元素。

虽然还有一个 DOMImplementation.hasFeature() 方法，但它现在已被弃用，可能不会返回有用的值。

【讨论】：

几乎所有 UA 都将所有功能都报告为受支持，甚至是未知功能。
@ccprog 感谢您花时间回复。 DOMImplementation.hasFeature() 似乎正是我想要的。非常不幸的是它被贬低了。添加一个 switch 元素会给我的 svg 生成 javascript 增加一些复杂性，我宁愿避免这种情况。是否有任何 javascript 替代 DOMImplementation.hasFeature()？知道为什么要贬低此功能吗？
它已被贬低，因为它没用。浏览器制造商不知道何时启用这些开关。如果您支持掩码的几乎所有方面，除了一个，您应该将开关设置为 true 还是 false。如果您知道掩码中的错误怎么办，开关是真还是假？等等等等开关在内部使用hasFeature，你会发现他们不再做功能测试了。