• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

21.03.05 04:22 작성 조회수 153

0

몇가지궁금한 사항이 있습니다.

1. 패턴으로 그냥 반복되지 않고 그냥 일반 이미지를 삽입할수 있나요?

패턴 태그안에 <image> 태그를 사용해봤는데 제가 생각한대로는 안되어서요.

2. 혹시 돋보기로 보면서 클릭을 했을때 마스킹 되어서 보여지는 #pattern-bg의 각각의 값에

고유한 링크를 걸어서 다른 페이지로 이동할수 있게끔 구현이 가능한지 여쭤보고 싶습니다. 

고유의 정보를 보여지게끔  만드는 구현이 가능한지

어떻게 하는건지 조금만 가르쳐주세요~

3. rect(.bg) 돋보기 바깥영역의 색깔은 지정이 가능한가요?

현재 저희는 #pattern-bg를 fill값으로 쓰고 있어서 어떻게 처리해야 백그라운드 색깔을 바꿀수 있는지 궁금합니다. 

답변 1

답변을 작성해보세요.

0

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 자체의 배경색이 바뀌므로 원하시는 효과를 얻을 수 있는 제일 간단한 방법입니다.