자바 스크립트 (라이브러리 없음)로 SVG 뷰 박스 조작

자바 스크립트에서 SVG 요소 뷰 박스를 변경하려고합니다. 기본적으로, 나는 이진 탐색 트리를 그려야하는데, 너무 넓어지면 트리가 창에 맞도록 축소되도록 뷰 박스를 변경하고 싶다.자바 스크립트 (라이브러리 없음)로 SVG 뷰 박스 조작

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

가 나는 또한 setAttributeNS를 사용하려고했습니다 ('널 (null)', ...)하지만 그 중 하나가 작동하지 않았다

if(SVGWidth>=1000){ 
    var a = document.getElementById('svgArea'); 
    a.setAttribute("viewbox","0 0 " + SVGWidth + " 300"); 
}

html로는 : 내가 현재 사용하고 있습니다. 내가 알아챈 한가지 이상한 점은 (a) 이상하게 보이는 [SVGSVGElement 객체]를 제공한다는 것입니다. 어떤 도움을 주셔서 감사합니다.

왜 내가 라이브러리를 사용하지 않는지 알 수 있습니까? –

SVGWidth는 아마도 나쁜 변수 이름이고, treeWidth 여야합니다. 또한 SVG의 html은 입니다.

JavaScript를 배우기 때문에 라이브러리를 사용하지 않습니다. 라이브러리에 추가 할 다음 프로젝트는 있지만 기본 JavaScript로 시작하는 것이 가장 좋습니다. –

SVG의 컨텍스트를 볼 좋은 것입니다,하지만 순수한 SVG 문서와 나를 위해 일한 다음 : viewBox는 대소 문자를 구분하기 때문에

shape = document.getElementsByTagName("svg")[0]; 
shape.setAttribute("viewBox", "-250 -250 500 750");

어쩌면 그것은인가?

2012-04-10 08:05:17 Anthony

+15

대소 문자를 구분했습니다. 한숨 .... –

이런 식으로 봐라, 그렇게 쉬운 일이 없다면 더 어려울 것이다. 그리고 지금까지 실제 svg 요소 속성을 망칠 려본 적이 없었습니다. 그래서 우리 둘 다 뭔가를 알아 냈습니다. – Anthony

나는 똑같은 실수를했다. –

코드에 오류가 있습니다. "viewbox"는 "viewBox"와 다릅니다. B는 대문자입니다. 코드를 다음으로 변경하십시오.

a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");

2014-10-17 18:05:47 LUISAO

글쎄, 이제 대답은 질문에 답하는 것 같아요. 'b'는 효과가 없었던 이유입니다. 그러나, user3434597 @ Anthony의 이전 답변을 먼저 읽었어야합니다. 어쩌면 그는 이것을 제거 할 것입니다. – akauppi

답변