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

Question

我一直用svg创建一个图像滑块。我使用蒙版为过渡设置动画。我遇到了动画不能在移动设备上工作的问题。所以我开始研究掩码属性的浏览器支持，因为我希望这是问题的原因。大多数网站都显示浏览器支持桌面浏览器，但不支持移动浏览器。

• 在什么（移动）浏览器中支持svg掩码不？
• 有没有办法改善svg掩码的跨浏览器支持？
• 是否可以检测浏览器是否支持使用javascript的掩码（因此我可以为这些浏览器创建没有动画的后备）？

Answer 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()方法，但它现已弃用，可能不会返回有用的值。