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()メソッドもありましたが、現在は推奨されておらず、有用な値が返されない可能性があります。