인프런 커뮤니티 질문&답변

김윤호님의 프로필 이미지
김윤호

작성한 질문수

SVG 마스터

마스크가 안돼요..

작성

·

296

0

ㅠㅠ 지금 마스크 이용한 스토록 애니메이션 강의 보고 공부하고 있는데요,

마스크 작업을 하면 아무것도 안보이게 돼요. 마스크 색상도 흰색이고 위치도 겹쳐있는데 왜 안되는걸까요?

3시간째 원인을 못찾고 헤매고 있어서 코드 올립니다.. 도와주세요 ㅠ

 

<svg width="650" height="650" viewBox="0 0 650 650" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="mask">
        <path class="item" d="M149.078 226.054L190.673 352.583L237.074 227.033C237.074 227.033 218.997 233.835 203.998 233.668C188.998 233.502 180.11 223.397 149.078 226.054Z" fill="#fff"/>
      </mask>
    </defs>
    <g mask="url(#mask)">
      <path class="over" d="M192 370.5V190.5" stroke="#B7E300" stroke-width="100"/> 
    </g>
</svg>

클래스는 그냥 구분용이고 스타일 따로 없습니다!

답변 2

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

마스크를 적용하는 부분과 관련해서 코드가 잘못된 것은 안보이는데요, 개발자도구에서 조사해보면 .over 클래스가 붙은 패스의 width가 0으로 나오는데.. 패스 자체가 잘못 설정된게 아닌가 싶습니다. 다른 SVG 소스로 한번 해보시겠어요?

0

김윤호님의 프로필 이미지
김윤호
질문자

with가 0이라고 하신 거 보고 Horizontal 좌표 이용해서 너비를 만드니까, 너비가 넓어질수록 마스크 된 부분이 조금씩 보이네요!

벡터 파일을 다시 만들어 봐도 마스크에 넣을 선이 Vertical로 한 방향의 선만 있으면 width가 0으로 나오면서 적용이 안되네요

원인을 모르니까 되게 아리송하긴 한데.. 어쨋든 답변 감사합니다.

김윤호님의 프로필 이미지
김윤호

작성한 질문수

질문하기