• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

20.07.08 22:34 작성 조회수 340

0

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

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

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

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

course-thumbnail

SVG 마스터

답변 1

답변을 작성해보세요.

1

1분코딩님의 프로필

1분코딩

지식공유자

2020.07.09

이렇게 한번 해보세요~

<!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>

이 글과 비슷한 Q&A