질문드립니다.
247
작성한 질문수 18
안녕하세요 강사님 강의재밌게 잘 듣고 있습니다.
질문이 있는데요, 자바스크립트(애니매이션)를 html head부분에 넣을때 오류가 나는데
다음과 같습니다.
답변주시면 감사하겠습니다.
좋은 하루 되세요.
답변 1
0
<script>가 삽입된 위치가 <svg>의 위치보다 윗줄에 있기 때문에 발생하는 에러입니다.
html 문서는 위부터 아래로 순차적으로 읽어들이기 때문에 스크립트로 svg 엘리먼트에 접근하려는 시점에는 문서가 아직 svg 객체를 로드하지 못했기 때문에, null 값이 나오는 거랍니다.
<script>를 <head>에서 사용하시려면
window.addEventListener('load', () => {
// 여기에 svg 접근 코드 작성
});
또는
window.addEventListener('DOMContentLoaded', () => {
// 여기에 svg 접근 코드 작성
});
이런 식으로 문서의 로딩이 완료된 후 접근하거나,
<script> 위치를 <svg> 이후에 넣어주시면 됩니다.
<body>
<svg>...</svg>
<p>dd</p>
.......
<script></script>
</body>
이렇게요^^
svg 직접 그리기
0
58
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
584
1
atom 서비스 종료, emmet 설치안됨
0
1425
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1564
1
마스크가 안돼요..
0
431
2
강의 노션
0
403
1
강의 노션
0
341
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
237
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
333
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
263
1
path로 그린 svg 화면 꽉채우기
0
880
1
svg 파일 불러오기
0
366
1
svg 태그 질문!
0
232
1