svg path 애니메이션 질문입니다.
413
작성한 질문수 1
안녕하세요~ 요즘 svg에 관심이많고, 회사에서도 svg문의가 많아
얼마전부터 강의 신청해서 너무 잘 듣고있습니다. 좋은강의 올려주셔서 감사합니다.
강의를 보면서 다른svg파일로 svg path의 storke-dasharray를 이용하여 애니메이션을 테스트를 해보았는데요
안되는 부분들이 많아 질문남깁니다ㅠ
회사에서는 클립아트 아이콘을 많이 이용하는데, 애니메이션이 되는 아이콘이 있고 안되는 아이콘이 있어요.
예를들면 아래작성한 svg에 stroke animation을 주고싶은데 css애니메이션으로는 되질않네요ㅠ
무조건 path라고 다 애니메이션을 줄수있는건 아닌가요?
혹시 다른 방법이 있을까요?
너무궁금하네요.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 600 600">
<path d="M241.9 43.3c-.9.7-5.3 8.5-9.8 17.5L224 77H16.9l-2.4 2.5C12 81.9 12 82 12 102.5v20.7l2.9 2.9 2.9 2.9h545.4l2.9-2.9 2.9-2.9v-20.7c0-20.5 0-20.6-2.5-23l-2.4-2.5H357l-8.4-16.9c-4.7-9.2-9.2-17.1-10.1-17.5-.9-.3-22.7-.6-48.3-.6-35.6.1-47.1.4-48.3 1.3zm94.9 32.2c6.4 13 8.8 16.8 10.8 17.5 1.6.6 40.6 1 103.5 1H552v17H29V94h101.8c85.5 0 102.1-.2 103.7-1.4 1.1-.8 5.6-8.6 10-17.5l8-16.1h76l8.3 16.5z"/>
<path d="M264 85.5V94h53V77h-53v8.5zM47 274.4v128.5l2.4 2.8 2.4 2.8 69.7.3c65.6.2 69.7.3 69 2-.5 1.5-46.9 133.6-48 136.9-.3 1-14.3 1.3-65.5 1.3H12v17h557v-17h-65c-51.2 0-65.1-.3-65.5-1.3-.2-.6-11.2-32-24.3-69.7l-24-68.5 69.5-.5 69.5-.5 2.4-2.8 2.4-2.8V146h-17v245H64V146H47v128.4zM282 479v70h-60.5c-33.3 0-60.5-.3-60.5-.8 0-.4 10.9-31.9 24.2-69.9l24.3-69.3H282v70zm113.3-2.3c13.1 37.3 24 68.8 24.4 70l.5 2.3H299V409h72.5l23.8 67.7z"/>
<path d="M82 155v9h17v-18H82v9zM231.4 147c-20.4 3-37.1 17.4-43.5 37.5-.8 2.8-1.4 15.2-1.8 40l-.6 36-2.8 5.7c-3.6 7.3-11.9 15-19.2 17.7-5.2 2-7.7 2.1-35 2.1H99v18h28.3c20.3 0 30-.4 34.8-1.4 18-3.8 33.3-17.8 39.1-35.5 1.9-6.1 2.2-9.5 2.7-42.6l.6-36 2.7-5c3.5-6.8 9.7-12.8 16.6-16.2 5-2.4 6.9-2.8 14.7-2.8 7.9 0 9.7.3 14.5 2.8 7.2 3.7 13.1 9.6 16.6 16.5 2.6 5.2 2.9 6.8 3.2 18.9l.4 13.3h18.1l-.6-13.5c-.5-10.5-1.1-15-3-20.3-4.2-12.1-12.7-22.6-23.2-28.7-9.2-5.4-22.8-8-33.1-6.5zM482 155v9h17v-18h-17v9z"/>
<path d="M234.1 182c-7.2 1.7-13.1 9.2-13.1 16.5 0 5.4 3.1 11.7 7 14.5 3.4 2.4 11 3.7 15.4 2.6 4-1 9.3-6.3 11.2-11.1 4.8-12.6-7.1-25.7-20.5-22.5zM447.2 190.3l-6.2 6.2 9.5 9.5 9.5 9.5-28.2.6c-30.8.6-33.6 1.1-45 7.1-10.5 5.5-20.8 18.6-24.8 31.3-.9 2.8-1.5 15.2-1.9 40l-.6 36-2.8 5.7c-3.6 7.4-11.9 15-19.5 17.8-8 3.1-19.5 2.5-27-1.4-6.7-3.4-12.4-9.1-15.9-15.8-2.5-4.9-2.8-6.4-3.1-19.1l-.4-13.7H273v10.7c0 20.2 4.9 33 16.5 44.2 27.9 26.8 73.6 15.1 85.7-21.8 2-6.1 2.2-9.4 2.7-42.6l.6-36 2.7-5c3.5-6.8 9.7-12.8 16.6-16.2l5.7-2.8 28.5-.3 28.5-.3-9.8 9.8-9.7 9.8 6.3 6.3 6.2 6.2 18.2-18.3c11-11 18.4-19.2 18.8-20.8.4-1.6.1-3.8-.9-5.5-.8-1.6-9.3-10.7-18.8-20.2L453.5 184l-6.3 6.3zM273 242.5v8.5h18v-17h-18v8.5zM273 277.5v8.5h18v-17h-18v8.5z"/>
<path d="M316.3 306.5c-4.9 3-8.3 9.2-8.3 15.1 0 4.9 3.5 11.1 7.9 14.1 15.4 10.4 34.3-8.4 23.8-23.7-3.6-5.4-7-7.3-13.4-7.7-4.9-.3-6.5 0-10 2.2zM82 365v9h17v-18H82v9zM482 365v9h17v-18h-17v9z"/>
</svg>
답변 1
0
stroke-dasharray를 이용한 애니메이션은 속성 이름 그대로 "stroke"로 그려진 요소에 적용할 수 있는데요,
예로 들어주신 svg 이미지는 stroke가 아니라 fill로 그려져 있습니다.
즉 보기엔 stroke같지만 사실은 선처럼 좁은 모양의 면인거죠~
path:nth-child(1) {
fill: red;
}
이런 식으로 fill에 색상을 적용해보시면, 빨간색이 채워지는걸 확인해보실 수 있을 거에요~
해결 방법은 좀 노가다이긴 하지만,
그냥 똑같은 모양으로 stroke를 이용해 다시 그려주시는 방법이 있겠네요^^;
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
431
2
강의 노션
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





