Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 SVG 요소의 텍스트 값을 변수에 추출하는 방법

SVG의 <text> 요소에 담긴 텍스트 값을 JavaScript 변수로 추출하려면 textContent 속성을 사용하면 됩니다.

먼저 getElementById() 메서드로 해당 요소를 선택한 뒤, 다음과 같이 textContent 속성으로 내부 텍스트를 가져올 수 있습니다.

document.getElementById("yourTextIdValue").textContent

전체 예제 코드

아래는 완성된 HTML 예제입니다. SVG <text> 요소의 값을 자바스크립트 변수에 담아 콘솔에 출력하는 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<svg>
<text id="myText" x="100" y="100">This is the JavaScript....
</text>
</svg>
<script>
    var originalText = document.getElementById("myText").textContent;
    console.log(originalText);
</script>
</body>
</html>

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 index.html(anyName.html)로 저장하세요. 그다음 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 브라우저 화면에는 SVG 텍스트가 표시되고, 개발자 도구(F12)의 콘솔 탭에서 다음과 같은 출력 결과를 확인할 수 있습니다.

This is the JavaScript....

이처럼 textContent 속성 하나만으로도 SVG <text> 요소의 문자열 값을 간단하게 변수로 추출할 수 있습니다. HTML 태그 없이 순수한 텍스트만 필요할 때 가장 적합한 방법입니다.