-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
circle dasharray / dashoffset 사용시 궁금점
20.11.23 11:31 작성 조회수 315
1
circle 애니메이션 에서 기본값이 3시 방향이던데 12시 방향을 기본값으로 하려면 어떻게 해야 하나요?
답변을 작성해보세요.
1
1분코딩
지식공유자2020.11.30
각도 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>
답변 1