Lấy hộp xem SVG gốc qua javascript

Question

Hệ thống của chúng tôi tải các tệp SVG theo chương trình vào HTML qua AJAX. Một tập tin SVG thông thường bắt đầu với:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm' width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink 

Nhưng kỳ lạ trong JavaScript có vẻ là không có cách nào nhận được này 'viewBox' trở lại từ SVG DOM - hoặc như là một chuỗi, hoặc như là một tập hợp các giá trị. Theo Mozilla, ví dụ, firebug báo cáo rằng nút svg có 5 trong số 6 thuộc tính chúng tôi chỉ định - cụ thể là: xmlns, xml: space, height, width và xmlns: xlink. Nhưng ViewBox bị thiếu rõ ràng trong danh sách này.

Có cách nào để truy lục giá trị này theo cách lập trình không? - nó ở đâu trong SVG DOM? (Chúng tôi không thể giới thiệu thư viện của bên thứ ba).

Answer 1

Bạn sẽ muốn xem giao diện SVGFitToViewBox, trong đó chỉ định thuộc tính viewBox. Giao diện cho các phần tử svg, SVGSVGElement, mở rộng giao diện đó, do đó có thể là thuộc tính bạn đang tìm kiếm.

Answer 2

1. Đến http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. Mở trình duyệt web của bạn giao diện điều khiển

3. Loại mã:

   var svg = document.querySelector('svg'); 
   var box = svg.getAttribute('viewBox'); 
   box.split(/\s+|,/); 
   

4. Quan sát các phản ứng rực rỡ:

   ["-350", "-250", "700", "500"] 
   

5. Ngoài ra, gõ mã:

   var box = svg.viewBox.baseVal; 
   [ box.x, box.y, box.width, box.height ] 
   

6. Quan sát các phản ứng rực rỡ:

   [ -350, -250, 700, 500 ] 
   

Nói cách khác: yes, bạn có thể lấy viewBox từ DOM, cả hai như là một standard DOM 2 attribute cũng như một explicit ECMASCript binding.