선따라 움직이는 도형을 만들고 싶습니다
599
작성한 질문수 2
선따라 움직이는 도형을 만들고 싶습니다.
선이 조금씩 나타나는건 dashoffset 값을 조정하면 되는데
그려진 도형을 참고하여 움직이는 걸 만들고 싶은데 잘 안되네요 ㅠ
script로 x,y 좌표를 움직여야하는건지 잘 모르겠습니다.
답변 1
1
이렇게 한번 해보세요~
<!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>
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1425
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
341
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
238
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
280
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
334
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1