JavaScript로 SVG 확장

저는 최근에 SVG 라인 또는 경로 요소를 사용하여 그래프를 그릴 수 있도록 하는 모드를 제가 작업하고 있는 그래프 모듈에 추가하기로 결정했습니다. 그래프는 컨테이너에 맞게 자동으로 크기가 조정되고 컨테이너의 너비와 높이에 따라 각 선이 적절하게 렌더링됩니다. 지금까지는 캔버스로 이 문제를 해결했지만 SVG를 사용하여 그래프를 렌더링하는 옵션을 추가하고 싶었습니다. 일반적으로 더 깔끔해 보이기 때문입니다.

나는 이 시점까지 SVG로 최소한의 작업을 해왔고, 일이 내가 처음 예상했던 것만큼 쉽게 작동하지 않을 것이라는 것을 빨리 깨달았습니다. SVG는 XML 기반 마크업입니다. 즉, SVG 요소는 HTML 요소와 같은 방식으로 생성/조작되지 않습니다. 운 좋게도 JavaScript에서 XML 요소의 속성을 만들고 설정할 수 있는 몇 가지 유용한 방법이 있습니다.
document.createElement 를 사용하여 JavaScript에서 HTML 요소를 만들 수 있지만 document.createElementNS 를 사용하여 XML 요소를 만들 수도 있습니다. document.createElementNS 를 사용할 때 메서드에 두 개의 인수를 전달해야 합니다. 첫 번째는 네임스페이스의 위치를 ​​가리키는 문자열이고, 두 번째는 우리가 만들고자 하는 요소의 유형을 식별하는 문자열입니다. 따라서 JavaScript를 사용하여 SVG 요소를 생성하려면 document.createElementNS("http://www.w3.org/2000/svg", "svg"); 를 사용합니다.

다른 HTML 요소와 마찬가지로 container.append 를 사용하여 요소를 컨테이너에 추가할 수 있지만 SVG 요소의 속성을 조정하려면 어떻게 해야 할까요? 다른 유용한 방법을 사용해야 합니다 - setAttribute ; setAttribute는 두 개의 인수를 취합니다. 첫 번째는 설정하려는 속성을 식별하는 문자열이고 두 번째는 값입니다.

다음 코드는 SVG 요소를 만들고 100%로 확장한 다음 컨테이너에 추가합니다.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("fill", "#fff0");

svg.append(rect);
document.querySelector(".container").append(svg);

...

또한 이 시점에서 SVG 요소에 직사각형을 추가하여 나중에 그 위에 무언가를 그릴 수 있습니다.

이제 svg 요소의 크기를 기준으로 무언가를 그릴 수 있기를 원하므로 크기가 조정된 후 요소의 너비와 높이를 얻을 수 있어야 합니다. SVG 요소의 속성을 설정하는 것과 유사하게 속성 값을 얻으려면 다른 방법을 배워야 합니다. 필요한 메서드는 getBBox 입니다. getBBox는 요소의 경계 상자를 반환하고 그에 따라 그림의 크기를 조정하는 데 필요한 값을 추출할 수 있습니다.

SVG 요소가 컨테이너에 추가되면 getBBox를 사용하여 SVG 요소의 크기를 채우는 빨간색 X를 그립니다.

...

const svgBBox = svg.getBBox();
const width = svgBBox.width;
const height = svgBBox.height;

const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");

line1.setAttribute("x1", 0);
line1.setAttribute("y1", 0);
line1.setAttribute("x2", width);
line1.setAttribute("y2", height);
line1.setAttribute("fill", "red");

line2.setAttribute("x1", 0);
line2.setAttribute("y1", height);
line2.setAttribute("x2", width);
line2.setAttribute("y2", 0);
line2.setAttribute("fill", "red");

svg.append(line1);
svg.append(line2);

그리고 그게 전부입니다!

아래는 일련의 버튼을 컨테이너로 사용하는 유사한 예이며, 그래프 모듈에 관심이 있는 경우 저장소here를 찾을 수 있습니다. 현재 진행 중인 작업이며 현재 리팩토링하는 데 시간을 할애하고 있습니다.