화면의 어디에 있든 상관없이 마우스 주변에만 오버레이 객체를 표시합니다.

Question

svg 파일 및 일부 processing.js 코드로 작업하여 홈페이지를 만듭니다. 애니메이션 및 정적 요소가 있지만 아이디어는 동일하지만 다른 색상으로되어 있습니다. 대체 홈페이지처럼. 마우스를 움직이면 "엿보기"를 할 수있는 대안이 필요합니다. 마우스 주변의 작은 영역.

누구나 어떻게 할 수 있습니까? 이미지 파일이 아니기 때문에 조금 까다 롭습니다.

processing.js의 이미지와 "drawing"요소를 사용하여 대체 홈페이지를 그릴 수 있다고 생각했지만 마우스가 움직이는 모든 곳에서 이미지를 반복하지만 원하는 것은 모든 것이 남아 있도록하는 것입니다. 동일한 위치는 그 지점에서 다른 색상 만 보여줍니다.

Answer 1

두 가지 버전의 사이트를 겹쳐 놓을 것을 고려해 볼 수 있습니다. "상단"이 "하단"을 완전히 덮고 있습니다 (모든 배경이 불투명해야합니다). 그런 다음 SVG 마스크를 상단 페이지에 적용하여 특정 영역에서 투명하게 만들고 하단 페이지가 빛나도록 할 수 있습니다. 마우스가 움직일 때 마스크를 수정할 수 있습니다.

다른 방법으로는 - 즉 상단 레이어를 클리핑하는 것 또한 고려할 수 있습니다.

이 접근법이 느리고 브라우저간에 일관성이 없어 질 위험이 있습니다. 시도해 봐야 할 것 같습니다. 상단 또는 하단 레이어의 클립/마스크 여부에 따라 속도가 다를 수 있습니다. MDN page on clipping and masking

페이지의 한 버전은 색상을 교환하여 다른로 변환 할 수있는 경우 MDN page on applying SVG effects to HTML content

W3C SVG Clipping, Masking and Compositing specs

• 는 SVG filters뿐만 아니라 옵션이 될 수 있습니다.