마스크 2 에서 질문있습니다.

Question

몇가지궁금한 사항이 있습니다. 1. 패턴으로 그냥 반복되지 않고 그냥 일반 이미지를 삽입할수 있나요? 패턴 태그안에 <image> 태그를 사용해봤는데 제가 생각한대로는 안되어서요. 2. 혹시 돋보기로 보면서 클릭을 했을때 마스킹 되어서 보여지는 #pattern-bg의 각각의 값에 고유한 링크를 걸어서 다른 페이지로 이동할수 있게끔 구현이 가능한지 여쭤보고 싶습니다.  고유의 정보를 보여지게끔  만드는 구현이 가능한지 어떻게 하는건지 조금만 가르쳐주세요~ 3. rect(.bg) 돋보기 바깥영역의 색깔은 지정이 가능한가요? 현재 저희는 #pattern-bg를 fill값으로 쓰고 있어서 어떻게 처리해야 백그라운드 색깔을 바꿀수 있는지 궁금합니다.

studiomeal · Answer

1. 패턴 안에 넣는 것이 아닌, 그냥 마스크 씌울 영역에 원하는 이미지를 넣으시면 됩니다. 2. 돋보기 예제에서 스크립트 부분에서 사용한 e.clientX, e.clientY를 이용해 클릭된 위치의 좌표값을 활용해보시면 될 것 같습니다. 3. 상단 CSS 설정에서 .the-svg 자체에 background: #ddd가 설정되어 있는데, 이 값을 바꾸어 주시면 SVG 자체의 배경색이 바뀌므로 원하시는 효과를 얻을 수 있는 제일 간단한 방법입니다.