선따라 움직이는 도형을 만들고 싶습니다

미해결질문
고만석 프로필

선따라 움직이는 도형을 만들고 싶습니다.

선이 조금씩 나타나는건 dashoffset 값을 조정하면 되는데

그려진 도형을 참고하여 움직이는 걸 만들고 싶은데 잘 안되네요 ㅠ

script로 x,y 좌표를 움직여야하는건지 잘 모르겠습니다.

1분코딩 프로필
1분코딩 2달 전

이렇게 한번 해보세요~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
        path {
            stroke: lightgray;
            stroke-width: 20;
            fill: none;
        }
        circle {
            fill: black;
        }
    </style>
</head>
<body>
    <svg width="360" height="120" viewBox="-10 10 360 55">
        <path d="M-1,1.499h83c0,0,10.5,1,10.5,11.25s-10.25,12.25-10.25,12.25h-43.5c0,0-10.75,0.75-11.75,11.5s9.75,12.25,9.75,12.25H343.5" id="road"></path>
        <circle r="10">
            <animateMotion dur="1.6s" repeatCount="indefinite">
                <mpath xlink:href="#road"></mpath>
            </animateMotion>
        </circle>
    </svg>
</body>
</html>
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스