다른 GIF와 함께 GIF를 마스킹합니다

Cassie Evans는 최근 SVG 마스크를 사용하여 다른 gif가 다른 gif를 오버레이하기 위해, 특히 컬러 GIF가 흑백 GIF에 겹쳐져있는 경우를 공유했습니다.

전에 SVG 마스크를 사용한 적이 없기 때문에 Cassie의 코드를 해석하려고했는데 그 원칙이 놀랍게도 간단하다는 것을 알았습니다.

먼저 SVG 마스크로 사용되는 GIF를 선택하십시오. 예를 들어 Giphy 웹 사이트에서 가져 오십시오.

그런 다음 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 코드가 더 복잡 할 수 있으므로 두 부분으로 분류하는 것이 좋습니다.

마스크 정의 :

<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 마스크로 두 개의 GIF를 사용하는 영리한 방법입니다.

Cassie는 또한 또 다른 예를 들었습니다. 이번에는 점프 우주 괴물입니다.

위 내용은 다른 GIF와 함께 GIF를 마스킹합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!