• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

svg path 애니메이션 질문입니다.

20.06.09 23:25 작성 조회수 261

0

안녕하세요~ 요즘 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를 이용해 다시 그려주시는 방법이 있겠네요^^;