[Javascript/Html] SVG 요소에 입력은 됐으나 화면에 출력되지 않을 때 ( createElement / createElementNS )

Javascript를 이용하여 html에 svg 요소를 추가하였다.

F12를 이용하여 요소를 확인했을 때, 요소에는 원하는 대로 추가되었지만 화면에 나타나지 않는 현상이 발생했다.

 

createElement를 이용해서 요소를 추가했는데, createElementNS로 바꾼 후 해결되었다.

 

createElementNS는 지정된 네임스페이스 URL과 적합한 이름으로 element를 만든다.

SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement를 사용하면 안되고 createElementNS를 사용해야 한다.

 

네임스페이스 URL를 지정하지 않고 element를 만들 때는 createElement 메소드를 사용한다.

createElement를 이용해서 동적 삽입할 경우, 개발자 도구의 태그에는 추가된 것으로 보이지만 실제로 화면에 그려지지는 않는다.

---

기존 코드

let url = "http://127.0.0.1:20220/layer1";

var httpRequest;
httpRequest = new XMLHttpRequest();

httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                var svg_receive = httpRequest.responseText;
                const div = document.getElementById("map");
                div.innerHTML = svg_receive;
                const svg = div.querySelector("#map svg");
                svg.setAttribute("id", "svg");

                const defs = document.createElement(`defs`)
                svg.appendChild(defs)

                const imageTwoWheeler = document.createElement(`image`)
                defs.appendChild(imageTwoWheeler)
                settingAttribute(imageTwoWheeler, "TwoWheeler")

                const imagePedestrian = document.createElement(`image`)
                defs.appendChild(imagePedestrian)
                settingAttribute(imagePedestrian, "Pedestrian")

                const imageVehicle = document.createElement(`image`)
                defs.appendChild(imageVehicle)
                settingAttribute(imageVehicle, "Vehicle")

                const marker = document.createElement(`g`)
                svg.appendChild(marker)
                marker.setAttribute('id', "markers")


                let [x, y, width, height] = svg.getAttribute('viewBox').split(' ').map(Number);
                const test_circle = document.createElement('circle')
                svg.appendChild(test_circle)
                test_circle.setAttribute('cx', x)
                test_circle.setAttribute('cy', y)
                test_circle.setAttribute('r', 0.001)
                test_circle.setAttribute("visibility", "visible");



                window.addEventListener("DOMContentLoaded", zoom(svg))
                window.addEventListener("DOMContentLoaded", drag(svg))
            } else {
                alert("Layer 1 Request Error!");
            }
    }
};

 

수정된 코드

let url = "http://127.0.0.1:20220/layer1";

var httpRequest;
httpRequest = new XMLHttpRequest();

httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                var svg_receive = httpRequest.responseText;
                const div = document.getElementById("map");
                div.innerHTML = svg_receive;
                const svg = div.querySelector("#map svg");
                svg.setAttribute("id", "svg");

                const transform = svg.querySelector("g").getAttribute('transform')

                const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
                svg.appendChild(defs);

                const imageTwoWheeler = document.createElement(`image`);
                defs.appendChild(imageTwoWheeler);
                settingAttribute(imageTwoWheeler, "TwoWheeler", transform);

                const imagePedestrian = document.createElement(`image`);
                defs.appendChild(imagePedestrian);
                settingAttribute(imagePedestrian, "Pedestrian", transform);


                const imageVehicle = document.createElement(`image`);
                defs.appendChild(imageVehicle);
                settingAttribute(imageVehicle, "Vehicle", transform);


                const marker = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                svg.appendChild(marker);
                marker.setAttribute('id', "markers");


                let [x, y, width, height] = svg.getAttribute('viewBox').split(' ').map(Number);
                const test_circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                svg.appendChild(test_circle);
                test_circle.setAttribute('cx', x);
                test_circle.setAttribute('cy', y);
                test_circle.setAttribute('r', 0.001);



                window.addEventListener("DOMContentLoaded", zoom(svg));
                window.addEventListener("DOMContentLoaded", drag(svg));
            } else {
                alert("Layer 1 Request Error!");
            }
    }
};

 

---

ChatGPT

https://velog.io/@wheezy_han/JS-Document.createElementNS-%EB%9E%80