• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

마스크가 안돼요..

22.10.30 18:47 작성 조회수 202

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

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

0

김윤호님의 프로필

김윤호

질문자

2022.11.02

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

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

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