인프런 커뮤니티 질문&답변
작성한 질문수
마스크 2 에서 질문있습니다.
작성
·
196
0
몇가지궁금한 사항이 있습니다.
1. 패턴으로 그냥 반복되지 않고 그냥 일반 이미지를 삽입할수 있나요?
패턴 태그안에 <image> 태그를 사용해봤는데 제가 생각한대로는 안되어서요.
2. 혹시 돋보기로 보면서 클릭을 했을때 마스킹 되어서 보여지는 #pattern-bg의 각각의 값에
고유한 링크를 걸어서 다른 페이지로 이동할수 있게끔 구현이 가능한지 여쭤보고 싶습니다.
고유의 정보를 보여지게끔 만드는 구현이 가능한지
어떻게 하는건지 조금만 가르쳐주세요~
3. rect(.bg) 돋보기 바깥영역의 색깔은 지정이 가능한가요?
현재 저희는 #pattern-bg를 fill값으로 쓰고 있어서 어떻게 처리해야 백그라운드 색깔을 바꿀수 있는지 궁금합니다.
답변 1
0
1분코딩
지식공유자
1. 패턴 안에 넣는 것이 아닌, 그냥 마스크 씌울 영역에 원하는 이미지를 넣으시면 됩니다.
<g mask="url(#mask-glass)">
<image href="images/BG-City.jpg" x="0" y="0" />
</g>2. 돋보기 예제에서 스크립트 부분에서 사용한 e.clientX, e.clientY를 이용해 클릭된 위치의 좌표값을 활용해보시면 될 것 같습니다.
3. 상단 CSS 설정에서 .the-svg 자체에 background: #ddd가 설정되어 있는데, 이 값을 바꾸어 주시면 SVG 자체의 배경색이 바뀌므로 원하시는 효과를 얻을 수 있는 제일 간단한 방법입니다.