JavaScript를 사용하여 HTML textContent 특성에 줄 바꿈을 삽입하십시오. (IE 전용)

Question

JavaScript를 사용하여 동적 SVG 이미지를 생성 중입니다. 내 의도는 특정 지역에 대한 정보가 툴팁에 포함되도록하는 것입니다. 지금까지 크롬과 파이어 폭스에서 작동해야하지만 부분적으로 만

IE 11에서 내가 는 TextContent, "\r\n" IE에서 무시되고 <br /> 그대로 표시를 사용하는 경우 어떤 .

innerHTML을 이전에 비슷한 질문 질문에서 해답이 될 것으로 보인다 :
Question 9330671
Question 9980416

일반적으로이 문제를 해결 할 innerHTML을로 전환을하지만, IE는이 특정을 위해 에게 innerHTML을을 지원하지 않습니다 사용하므로 텍스트가 전혀 표시되지 않습니다.

innerHTML을 또는 는 TextContent 크롬이나 파이어 폭스 작품 중 하나를 사용하여, 그래서 다시, 이것은 단지 (IE 11에서 테스트) IE의 문제입니다. 제공된 코드를 테스트 할 때이 브라우저를 사용해야하는 모든 이에 게 사과드립니다.

대화식 코드는 http://jsfiddle.net/rnhy9pus/에 있습니다.

또는 전체 코드는 아래에 포함되어 있습니다 :

function createPathContent(svgID, popupText, pathDirections) 
 
{ 
 
    var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
 
    path.setAttribute("d",pathDirections); 
 
    var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
 
    popup.textContent = popupText; // <-- LINE TO FOCUS ON 
 
    path.appendChild(popup); 
 
    document.getElementById(svgID).appendChild(path); 
 
} 
 
function createPathHTML(svgID, popupText, pathDirections) 
 
{ 
 
    var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
 
    path.setAttribute("d",pathDirections); 
 
    var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
 
    popup.innerHTML = popupText; // <-- LINE TO FOCUS ON 
 
    path.appendChild(popup); 
 
    document.getElementById(svgID).appendChild(path); 
 
} 
 
function createExample(svgID) 
 
{ 
 
    document.getElementById(svgID).setAttribute("xmlns", "http://www.w3.org/2000/svg"); 
 
    document.getElementById(svgID).setAttribute("version", "1.1"); 
 
    document.getElementById(svgID).setAttribute("width", "300"); 
 
    document.getElementById(svgID).setAttribute("viewBox", "0 0 100 100"); 
 
    document.getElementById(svgID).setAttribute("preserveAspectRatio", "xMinYMin meet"); 
 

 
    var style = document.createElement("style"); 
 
    style.setAttribute("type","text/css"); 
 
    style.innerHTML = "path { fill: #ccc; } path:hover { fill: #ff0; }"; 
 
    document.getElementById(svgID).appendChild(style); 
 

 
    var NEW_LINE = "\r\n"; 
 
    //var NEW_LINE = "<br />"; // This displays literally in textContent and as a new line in innerHTML. 
 

 
    createPathContent(svgID, "Tooltip text using textContent:" + NEW_LINE + "New Line", "M 10 10 L 90 10 L 90 45 L 10 45 Z"); 
 
    // Works correctly in Chrome or Firefox. Displays in IE 11, but only on a single line. 
 

 
    createPathHTML(svgID, "Tooltip text using innerHTML:" + NEW_LINE + "New Line", "M 10 55 L 90 55 L 90 90 L 10 90 Z"); 
 
    // Works correctly in Chrome or Firefox. Does not display in IE 11. 
 
} 
 

 
createExample("exampleSVG");

<svg id="exampleSVG" xmlns="http://www.w3.org/2000/svg"></svg>