GIFを他のGIFとマスキングします

Cassie Evansは最近、巧妙なトリックを共有しました。特に色付きのGIFがモノクロGIFに重ねられている場合、SVGマスクを使用して1つのGIFを別のGIFの上にオーバーレイします。

SVGマスクを使用したことがないので、Cassieのコードを解釈しようとしましたが、その原則は驚くほど簡単であることがわかりました。

まず、SVGマスクとして使用されるGIFを選択します。たとえば、Giphy Webサイトから取得します。

次に、htmlでSVGコードを直接書き込みます。最初に追加します<defs></defs>タグは、SVGの他の部分で後で参照されるリソースを保存するために使用されます。

<svg viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs></svg>

知らせ<mask></mask>要素に追加されたid="MASK"属性は、この属性を介して後でマスクを参照します。

次に、基礎となる画像として別のGIFを選択します（たとえば、スペースシーンのGIF）。

このgifを追加します<g></g>要素に、マスク属性を適用します。

<svg viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs><g mask="url(#MASK)"><image height="100%" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" width="100%" x="0" y="0%"></image></g></svg>

最初はSVGコードがより複雑になる可能性があるため、2つの部分に分解することをお勧めします。

マスクを定義する：

<defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs>

マスクを使用してください：

<g mask="url(#MASK)"><image height="100%" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" width="100%" x="0" y="0%"></image></g>

このようにして、コードははるかに明確で理解しやすくなります。これは、2つのGIFをSVGマスクとして使用する賢い方法です。

また、キャシーは別の例を挙げました。今回はジャンプスペースモンスターです。

以上がGIFを他のGIFとマスキングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。