• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

circle dasharray / dashoffset 사용시 궁금점

20.11.23 11:31 작성 조회수 315

1

circle 애니메이션 에서 기본값이 3시 방향이던데 12시 방향을 기본값으로 하려면 어떻게 해야 하나요?

답변 1

답변을 작성해보세요.

1

각도 0의 시작이 3시 방향이라서 그런건데요,
stroke-dashoffset의 수치를 원하는 값으로 조정해도 되는데
transform: rotate(-90deg)으로 circle 자체를 회전시켜주면 더 간단합니다.
아래 코드처럼 해보세요~

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		@keyframes loading-circle-ani {
			0% { stroke-dashoffset: 157; }
			75% { stroke-dashoffset: 0; }
		}
		.loading-circle {
			width: 54px;
			height: 54px;
		}
		.loading-circle circle {
			stroke: black;
			stroke-width: 4;
			stroke-dasharray: 157;
			stroke-dashoffset: 0;
			fill: transparent;
			animation: loading-circle-ani 5s infinite;
			transform: rotate(-90deg);
			transform-origin: 50% 50%;
		}
	</style>
</head>
<body>
	<svg class="loading-circle"><circle cx="50%" cy="50%" r="25"></circle></svg>
</body>
</html>