Uzyskiwanie oryginalnego okna podglądu SVG za pośrednictwem javascript

Question

Nasz system ładuje pliki SVG programowo do HTML za pośrednictwem AJAX. Typowy plik SVG zaczyna:

<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 

Ale dziwnie w JavaScript wydaje się być sposobem na uzyskanie tego „viewBox” z powrotem SVG DOM - albo jako ciąg znaków, lub jako zestaw wartości. Na przykład pod Mozillą firebug zgłasza, że ​​węzeł svg ma 5 z 6 atrybutów, które określamy - mianowicie: xmlns, xml: space, height, width i xmlns: xlink. Jednak z tej listy wyraźnie brakuje numeru ViewBox.

Czy istnieje możliwość programistycznego pobrania tej wartości? - gdzie jest w SVG DOM? (Nie możemy wprowadzić bibliotek zewnętrznych).

Answer 1

Będziesz chciał rzucić okiem na interfejs SVGFitToViewBox, który określa właściwość viewBox. Interfejs dla elementów svg, SVGSVGElement, rozszerza ten interfejs, więc może to być właściwość, której szukasz.

Answer 2

1. idź do http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. otwórz witrynę sieci Web konsola przeglądarka

3. Wpisz kod:

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

4. Obserwować reakcję chwalebne:

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

5. Alternatywnie, wpisz kod:

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

6. Przestrzegać wspaniałą odpowiedź:

   [ -350, -250, 700, 500 ] 
   

Innymi słowy: tak, można uzyskać viewBox z DOM, zarówno jako standard DOM 2 attribute jak również explicit ECMASCript binding.