마스크2 돋보기 질문
391
投稿した質問数 1
回答 1
1
아- 그렇죠^^; 디자인이 돋보기이지 엄밀히 따지면 확대되어 보이는게 아니므로 ㅎㅎㅎ
돋보기처럼 구현하려면 말씀대로 패턴을 하나 더 만들어서 그 부분에 마스킹을 해주시면 됩니다.
간단히 추가해보았는데 아래 소스코드를 참고해 보세요!
<!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>
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1426
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
342
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
238
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
압축에 관하여
0
281
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
335
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1
질문드립니다.
0
250
1