JavaScript로 SVG 인라인을 그립니다. 대부분 경로지만, 폴리곤도 시도해 봤습니다. 나는 <svg> 태그를 올바른 SVG 인 경로 (이 단순화 된 예제에서 하나)로 채 웁니다.자바 스크립트 인라인 SVG 렌더링 안 함

SVG 태그의 내용이 파일로 복사 및 잉크 스케이프에서 열립니다

이 결과 사진이 예상대로 :이 때문에 알고있다.
</path> 종료 태그를 제거하는 것과 같이 Firefox의 검사기에서 <path>을 변경하면 (Firefox가 원래의 방식으로 코드를 복구하게 됨) 특정 경로가 표시되지만 나머지는 여전히 승리합니다 '티.
javascript가 실행 된 후 페이지의 모든 HTML을 복사하여 새 html 파일에 넣으면 svg가 올바르게 표시됩니다.

원래 Firefox에서이 문제가 발생했지만 svg 만들기가 Edge에서도 작동하지 않는지 확인했습니다.

그렇다면 인라인 svg를 만든 직후에 어떻게 렌더링합니까?

편집 : JavaScript and SVG: Error on createElement()과 같지 않습니다. 이 질문은 HTML이 아닌 SVG 문서와 관련이 있습니다. 또한 오류 메시지가 전혀 표시되지 않습니다.

<html> 
 

 
<head></head> 
 

 
<body> 
 

 
    <svg id="drawing"></svg> 
 

 
    <script> 
 
    function creel(tagname, id, cla, attrs) { 
 
     var n = document.createElement(tagname); 
 
     if (id) { 
 
     n.id = id; 
 
     } 
 
     if (cla) { 
 
     n.className = cla; 
 
     } 
 
     if (attrs) { 
 
     for (var i = 0; i < attrs.length; i = i + 2) { 
 
      n.setAttribute(attrs[i], attrs[i + 1]); 
 
     } 
 
     } 
 
     return n; 
 
    } 
 

 
    function drawline(c, ax, ay, bx, by, style) { 
 
     // Method for svg 
 
     var d = "M" + ax + "," + ay + " L" + bx + "," + by; 
 
     var p = creel("path", "", "", ["d", d]); 
 
     if (style) { 
 
     p.setAttribute("style", style); 
 
     } else { 
 
     p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;"); 
 
     } 
 
     c.appendChild(p); 
 
    } 
 

 
    function drawit() { 
 
     var c = document.getElementById("drawing"); 
 
     c.setAttribute("width", 500); 
 
     c.setAttribute("height", 500); 
 
     c.setAttribute("viewBox", "0 0 500 500"); 
 
     c.setAttribute("xmlns", "http://www.w3.org/2000/svg"); 
 
     c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;"); 
 

 
     var thinstyle = "stroke:#555555;stroke-width:2; fill:none;"; 
 

 
     drawline(c, 10, 10, 400, 400, thinstyle); 
 
    } 
 

 

 

 
    window.onload = function() { 
 
     drawit(); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

출처

2017-09-27 Lauri Niskanen

SVG 문서로 작업하든 HTML 문서로 작업하든 상관없이 createElement를 사용하여 SVG 요소를 만들 수 없습니다. createElement를 사용하면 구문 오류가 아니므로 오류 메시지가 표시되지 않습니다. –

함께 SVG 요소를 작성 `Document.createElementNS`

자바 스크립트에서 바로 생성 할 때, 당신은 Document.createElementNS와 SVG 요소를 만들어야합니다

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

귀하의 예 경로를 렌더링 :

function creel(tagname, id, cla, attrs) { 
 
    // USE createElementNS HERE 
 
    var n = document.createElementNS('http://www.w3.org/2000/svg', tagname); 
 
    if (id) { 
 
    n.id = id; 
 
    } 
 
    if (cla) { 
 
    n.className = cla; 
 
    } 
 
    if (attrs) { 
 
    for (var i = 0; i < attrs.length; i = i + 2) { 
 
     n.setAttribute(attrs[i], attrs[i + 1]); 
 
    } 
 
    } 
 
    return n; 
 
} 
 

 
function drawline(c, ax, ay, bx, by, style) { 
 
    // Method for svg 
 
    var d = "M" + ax + "," + ay + " L" + bx + "," + by; 
 
    var p = creel("path", "", "", ["d", d]); 
 
    if (style) { 
 
    p.setAttribute("style", style); 
 
    } else { 
 
    p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;"); 
 
    } 
 
    c.appendChild(p); 
 
} 
 

 
function drawit() { 
 
    var c = document.getElementById("drawing"); 
 
    c.setAttribute("width", 500); 
 
    c.setAttribute("height", 500); 
 
    c.setAttribute("viewBox", "0 0 500 500"); 
 
    c.setAttribute("xmlns", "http://www.w3.org/2000/svg"); 
 
    c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;"); 
 

 
    var thinstyle = "stroke:#555555;stroke-width:2; fill:none;"; 
 

 
    drawline(c, 10, 10, 400, 400, thinstyle); 
 
} 
 

 
window.onload = function() { 
 
    drawit(); 
 
}

<svg id="drawing"></svg>

또한, SVG 요소에 대한 몇 가지 속성이 setAttributeNS 방법/필요 설정해야한다는 것을 명심하십시오. setAttributeNS으로 설정해야하는 속성 중 하나는 xmlns입니다.

출처

2017-09-27 19:44:54 KevBot

감사! 그것은 실제 웹 사이트뿐만 아니라이 단순화 된 예제에서도 효과가있었습니다. 나는 그것이 네임 스페이스와 관련이있을 것이라고 추측했지만, 전혀 이해하지 못했습니다. –

자바 스크립트 인라인 SVG 렌더링 안 함

답변

함께 SVG 요소를 작성 Document.createElementNS

관련 문제

함께 SVG 요소를 작성 `Document.createElementNS`