JS의 SVG - 요소의 innerHTML 가져 오기

SVG 파일에서 일부 데이터를 추출하고 싶습니다. 나는 SVG가 XML이라는 것을 알고 있으므로, JS로 데이터를 감추는 것이 꽤 쉬울 것이라고 생각했다.JS의 SVG - 요소의 innerHTML 가져 오기

그래서 저는 SVG에서 추출한 많은 텍스트를 얻고 싶습니다. 그래서 크롬의 JS 콘솔을 가동하고 몇 가지 작업을 시도했습니다. 배열에있는 모든 tspan 요소를 가져와 텍스트를 추출하고 분류해야했습니다.

지금은 http://upload.wikimedia.org/wikipedia/commons/e/eb/Light_spectrum.svg을 말하고 있습니다.

따라서 a = document.getElementsByTagName('tspan')을 사용합니다. 자, a[20].innerHTML을 시도하고 undefined을 얻습니다. 합리적인; 그것은 HTML이 아니며 iirc innerHTML은 어쨌든 비표준입니다.

그런 다음 a[20].childNodes[0]을 시도하고 "ELF"을 얻으십시오. 좋아, 그게 내가 원하는거야. 그러나 어떤 이유로이 객체는 문자열처럼 취급되지만 하나의 객체로 변환 할 수는 없습니다. 변환하려고하면 (matches() 및 indexOf()과 같은 항목을 사용할 수 있음) "[object Text]"이 표시됩니다. Text.prototype으로 검색하면 도움이되지 않습니다. 문자열로 변환하는 함수를 찾을 수 없습니다.

그렇다면 JS를 통해 SVG 객체의 innerHTML을 어떻게 얻을 수 있습니까?

출처

2012-03-07 Manishearth

또한 프로토 타입은 일반적으로 HTML에서 볼 수있는 다른 내장 함수 (실제로 필자가 필요로하는 것)가 모두 없음을 보여줍니다. 위대한 - 이제 W3C는 나에 대해 음모를 꾸미고 있습니다 ... – Manishearth

당신이 같은 요소를 선택하지만, 다음을 사용하여 해당 텍스트에 액세스 할 :이 SVG 내부 innerHTML에 대한 대체가 없습니다

을

var content = a[20].textContent;

하지만만큼 당신이 텍스트 만 추출 할로 작동없이 마크 업.

출처

2012-03-07 13:53:58 Sirko

그런데 의미는 인덱스 20입니까? 이 인덱스 값은 내가 가정 한 다른 모든 숫자가 아닌가? –

@NateNeuhaus 20은 주어진 OP 코드를 나타냅니다. 여기서는 20 번째 ''요소를 선택해야합니다. 다른 사람이 될 수 있습니다. 주요 aspect는 이후에 사용할 속성 ('textContent')입니다. – Sirko

Text node은 콘솔에서 검사 할 때 문자열처럼 보이지만 문자열이 아닙니다. 문자열의 경우 nodeValue이 필요합니다. 시도 :

document.querySelectorAll('tspan')[20].childNodes[0].nodeValue

출처

2012-03-07 19:21:41 Phrogz

JS의 SVG - 요소의 innerHTML 가져 오기

답변

관련 문제