IE에서 svg 태그 결과 innerHTML이 정의되지 않았습니다.

Question

Internet Explorer에서 javascript를 사용하여 svg 태그의 html 콘텐츠를 가져 오는 데 문제가 있습니다.

내 자바 스크립트 코드는 다음과 같다 :

console.log($('.icon')[0].innerHTML); 

내 HTML 문서 내 태그 :

<svg class="icon"><use>testing</use></svg> 

이는 크롬, 파이어 폭스와 무엇을 우리가 잘 작동하지만, 인터넷 익스플로러 I에서 정의되지 않은 오류가 발생했습니다. Javascript와 jQuery를 혼합 한 것입니까?

어떻게 내 svg 태그의 내용을 가져올 수 없습니까? 나는 다른 것들을 시도하고 종종 "SCRIPT5007 : 정의되지 않은 또는 null 참조의 'innerHTML'속성을 설정할 수 없습니다.

도와주세요 :) 감사합니다.

Answer 1

결국 나는 이것에 대한 해결책을 찾았습니다. 아마 해커 야? 그러나 적어도 나를 위해 일합니다.

IE에서 사용할 수없는 원시 innerhtml을 가져 오는 대신. 나는 그렇게함으로써 내 SVG 태그 내부의 각 요소 노드를 얻으려고 :

var element = document.getElementsByTagName('svg')[0].childNodes; 
for (i = 0; i < element.length; i++) { 
    if (element[i].nodeName != '#text') { 
     console.log(element[i]); 
    } 
} 

Answer 2

console.log($('.icon')[0].html()); jQuery는 브라우저 간의 차이를 부드럽게합니다.

Answer 3

Internet Explorer는 현재 SVG 요소에서 innerHTML 메서드를 지원하지 않습니다. 그러나이 기능에 대한 고려 사항을 추적하기 위해 내부적으로 열어 놓은 문제가 있습니다. 그동안 나는 Internet Explorer 9 이상에서 작동하는 InnerSVG polyfill과 같은 대체 솔루션을 살펴볼 것입니다.

Answer 4

어떻게 XMLSerializer을 사용하는 방법에 대해. 어떻게 든 요소를 ​​얻고 다음을 수행하십시오.

console.log(new XMLSerializer().serializeToString(element)); 

Answer 5

console.log($('.icon').parent().html());은 IE11에서 저에게 잘 작동합니다.

전달 된 문자열은 svg 노드의 부모로 처리되는 것으로 보이는 XML 선언 <?xml version="1.0" encoding="iso-8859-1" ?> 으로 시작합니다.

Answer 6

다음 코드는 콘텐츠를 주어진 SVG의 문자열로 제공합니다. great answer of Robert Longson을 기반으로합니다.

const svgNode = document.getElementsByTagName('svg')[0]; 
const serializer = new XMLSerializer(); 

const svgContent = Array.prototype.map.call(
    svgNode.childNodes, 
    (child) => serializer.serializeToString(child) 
).join('');