SVG로 원을 애니메이션하고 싶을 때의 MEMO

빙빙 도는 원의 애니메이션을 만들고 싶다.

ht tp // 코데펜. 이오 / 메 15 / 펜 / yJm ょ J

결론, 아래와 같이 쓰면 좋다.

<svg width="124" height="124">
    <circle cx="62" cy="62" r="60" />
</svg>

svg {
    transform: rotate(-90deg);
}

circle {
    fill: transparent;
    stroke: #4fa8df;
    stroke-width: 4;
    animation: circle 1s infinite;
}

@keyframes circle {
  0% { stroke-dasharray: 0 377; }
  99.9%,to { stroke-dasharray: 377 377; }
}

인라인 SVG이므로, 모던 브라우저는 대응하고 있어,
IE8 이하, Android2계 이하 근처는 사용할 수 없을 것 같다.
h tp // 게으세요. 코 m/#후아아 t=svghtml5

반경 60px의 원을 만들고 싶다면,<svg>, width 및 height, 60px x 2 = 120px여기에, 이후 설정하는 원의 외측의 선폭(stroke-width)의 4px를 더해, 124px를 설정한다.<circle>의 cx와 cy에는 124px의 절반 값을 설정하고 원을 <svg>의 중앙에 배치합니다.r는 원의 반경으로 60px를 설정하지만,이 값에 따라 나중에 애니메이션 할 때의 값이 바뀝니다.

CSS에서는<circle>에서 fill를 transparent로 설정하고 채우지 않고 설정합니다.stroke 및 stroke-width를 지정하여 원 바깥쪽에 선을 표시합니다.
이것을 animation (을)를 사용해, 빙빙 돌리는 애니메이션으로 한다.

애니메이션에서는 파선을 설정한다stroke-dasharray 를 사용한다.stroke-dasharray: 破線の長さ 破線の間隔;이 파선의 길이를 애니메이션 시키는 것으로, 빙글빙글 돌리는 애니메이션이 된다.

이 때, 파선의 간격의 값은, 원주의 길이를 설정할 필요가 있어, 계산에 의해 유도된다.
원주의 길이는 直径 x 3.14로 계산한다.
이번에는 120 x 3.14 = 376.8이므로 소수점을 반올림 377했다.
그리고는, 파선의 길이를 0부터 377까지 애니메이션 시키면, 빙빙 1주하는 애니메이션이 된다.

@-webkit-keyframes circle {
  0% { stroke-dasharray: 0 377; }
  99.9%,to { stroke-dasharray: 377 377; }
}

만약, 1주가 아니고 반의 곳에서 멈추고 싶은 경우는, 377 / 2 = 188.5 등을 설정하면 된다.

마지막으로, 그대로라면 애니메이션의 시작점이 90도 어긋나 버리므로,<svg>에 transform: rotate(-90deg);를 설정하여 위에서 빙글빙글 돌리는 애니메이션으로 만듭니다.

비슷한 애니메이션 데모도 CodePen에 있었기 때문에 메모.
htps : // 코데펜. 이오 / ky dws / pen / G ょ lt /