마스크가 안돼요..
431
1 asked
ㅠㅠ 지금 마스크 이용한 스토록 애니메이션 강의 보고 공부하고 있는데요,
마스크 작업을 하면 아무것도 안보이게 돼요. 마스크 색상도 흰색이고 위치도 겹쳐있는데 왜 안되는걸까요?
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>클래스는 그냥 구분용이고 스타일 따로 없습니다!
Answer 2
1
마스크를 적용하는 부분과 관련해서 코드가 잘못된 것은 안보이는데요, 개발자도구에서 조사해보면 .over 클래스가 붙은 패스의 width가 0으로 나오는데.. 패스 자체가 잘못 설정된게 아닌가 싶습니다. 다른 SVG 소스로 한번 해보시겠어요?
0
with가 0이라고 하신 거 보고 Horizontal 좌표 이용해서 너비를 만드니까, 너비가 넓어질수록 마스크 된 부분이 조금씩 보이네요!
벡터 파일을 다시 만들어 봐도 마스크에 넣을 선이 Vertical로 한 방향의 선만 있으면 width가 0으로 나오면서 적용이 안되네요
원인을 모르니까 되게 아리송하긴 한데.. 어쨋든 답변 감사합니다.
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1426
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
강의 노션
0
404
1
강의 노션
0
342
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
238
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
281
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
335
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1
질문드립니다.
0
250
1