인프런 커뮤니티 질문&답변
작성한 질문수
질문드립니다.
작성
·
244
답변 1
0
1분코딩
지식공유자
<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>
이렇게요^^