-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
마스크2 돋보기 질문
22.01.28 13:02 작성 조회수 261
0
안녕하세요? 돋보기 예제라고 해서 따라해 보았으나 마스크로 서클 이외의 부분은 안보이게 하고 돋보기가 지나가는곳만 보여지는데 이는 구멍 뚫린 부분만 보여지는 것이지 돋보기는 아닌것 같아서요~
아 물론 강의는 흥미롭게 잘 따라했습니다!
응용해서 마스크 안씌우고 패턴이 전체화면에 보이는 상태에서 돋보기가 지나가면 뚫린 부분의 패턴부분은 크게 보여지는걸 해보려고 하는데 마스크 영역을 통해서 보여지는 부분만 크게 보여지게 하는 방법이 있는지 아니면 패턴을 두번을 깔아서 마스크 부분에만 큰 패턴을 보여줄수 있는지 궁금합니다.
아 그리고 눈 움직이는 애니메이션은 마우스를 멈추면 계속 반복되지 않는데 이유가 뭘까요?
답변을 작성해보세요.
1
1분코딩
지식공유자2022.02.21
아- 그렇죠^^; 디자인이 돋보기이지 엄밀히 따지면 확대되어 보이는게 아니므로 ㅎㅎㅎ
돋보기처럼 구현하려면 말씀대로 패턴을 하나 더 만들어서 그 부분에 마스킹을 해주시면 됩니다.
간단히 추가해보았는데 아래 소스코드를 참고해 보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG</title>
<style>
.the-svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddd;
}
</style>
</head>
<body>
<svg class="the-svg">
<defs>
<pattern id="pattern-bg" x="0" y="0" width="0.1" height="0.1">
<path d="M138.61,133a29.89,29.89,0,1,1,21.14-8.75A29.72,29.72,0,0,1,138.61,133Zm0-55.38a25.49,25.49,0,1,0,18,7.46A25.32,25.32,0,0,0,138.61,77.63Z" transform="translate(-107 -64)"/>
<g>
<circle cx="19.31" cy="41.98" r="4.69"/>
<circle class="left-eye" cx="43.8" cy="41.98" r="4.69"/>
</g>
<path d="M138.61,124.88h-.05a21.76,21.76,0,0,1-16.19-7.24l2.47-2.21a18.44,18.44,0,0,0,13.72,6.14h.05a18.44,18.44,0,0,0,13.72-6.14l2.46,2.21A21.73,21.73,0,0,1,138.61,124.88Z" transform="translate(-107 -64)"/>
<path d="M154.28,72.27a17.56,17.56,0,0,0-3.94.44c-1.76-5-8.37-8.71-16.25-8.71-9.15,0-16.58,5-16.72,11.2C111.23,77.38,107,82,107,87.23c0,7.4,8.32,13.4,18.59,13.4,6.84,0,12.82-2.66,16-6.63a16.61,16.61,0,0,0,12.65,5.53C163,99.53,170,93.43,170,85.9S163,72.27,154.28,72.27Z" transform="translate(-107 -64)"/>
</pattern>
<mask id="mask-glass">
<circle cx="80.51" cy="80.51" r="60" fill="#fff"/>
</mask>
<style>
@keyframes eye-ani {
to { transform: scaleY(0.2); }
}
.left-eye {
transform-origin: 44px 42px;
animation: eye-ani 1s alternate infinite;
}
.bg {
transform: scale(1.5);
fill: url(#pattern-bg);
}
.bg2 {
fill: url(#pattern-bg);
}
.bg-gray {
fill: #ddd;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const magnifierElem = document.querySelector('.magnifier');
const maskElem = document.querySelector('#mask-glass circle');
window.addEventListener('mousemove', (e) => {
magnifierElem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
maskElem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
});
</script>
</defs>
<rect class="bg2" x="0" y="0" width="100%" height="100%"></rect>
<g mask="url(#mask-glass)">
<rect class="bg-gray" x="0" y="0" width="100%" height="100%"></rect>
<rect class="bg" x="0" y="0" width="100%" height="100%"></rect>
</g>
<path class="magnifier" d="M150.81 41.26a80.5 80.5 0 1 0-41.94 114.6l36.28 64.95a12 12 0 1 0 20.95-11.7l-36.29-64.95a80.51 80.51 0 0 0 21-102.9zm-41 91.63a60 60 0 1 1 23.12-81.64 60 60 0 0 1-23.12 81.64z" fill="#ce0000"/>
</svg>
</body>
</html>
답변 1