Thao tác hộp xem SVG với JavaScript (không có thư viện)

Question

Tôi đang cố gắng thay đổi khung nhìn phần tử SVG trong JavaScript. Về cơ bản, tôi vẽ một cây tìm kiếm nhị phân và khi nó quá rộng, tôi muốn thay đổi hộp xem để thu nhỏ sao cho cây phù hợp trong cửa sổ. Tôi hiện đang sử dụng:

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

HTML là:

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

Tôi cũng đã cố gắng sử dụng setAttributeNS ('null', ...) nhưng điều đó dường như không làm việc một trong hai. Một điều kỳ lạ tôi nhận thấy là khi tôi cảnh báo (a) nó cho [đối tượng SVGSVGElement] có vẻ lạ. Bất kỳ trợ giúp được đánh giá cao.

Answer 1

Nó sẽ là tốt để xem bối cảnh của svg, nhưng sau đây làm việc cho tôi với một tài liệu SVG tinh khiết:

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

Có lẽ đó là vì viewBox là trường hợp nhạy cảm?

Answer 2

Bạn gặp lỗi trong mã: "viewbox" khác với "viewBox" ... B là chữ hoa. Thay đổi mã thành:

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