javascript üzerinden özgün bir SVG viewBox edinme

Question

Sistemimiz, AJAX yoluyla programlı olarak HTML'ye SVG dosyalarını yükler. bir dize olarak veya bir değerler bütünü olarak ya -

<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 

Ama garip JavaScript geri SVG DOM bu 'Viewbox' almanın bir yolu var gibi görünüyor: Tipik bir SVG dosyası ile başlar. Mozilla altında, örneğin, firebug, svg düğümünün belirttiğimiz 6 öznitelikten 5 tanesine sahip olduğunu bildirir: xmlns, xml: boşluk, yükseklik, genişlik ve xmlns: xlink. Ancak bu listeden ViewBox eksiktir.

Bu değeri programsal olarak almak için zaten var mı? - SVG DOM'de nerede? (3. parti kütüphaneleri sunamıyoruz).

Answer 1

viewBox özelliğini belirten SVGFitToViewBox arabirimine bir göz atmak istersiniz. svg öğeleri, SVGSVGElement için arabirim, arabirimi genişletir, böylece aradığınız özellik olabilir. http://phrogz.net/SVG/svg_in_xhtml5.xhtml

için

Answer 2

1. Git Açık web tarayıcısı konsol kodu

2. Tür:

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

Alternatif

3. , yazın:

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

4. şanlı tepkisini gözlemleyin Kod:

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

5. şanlı tepkisini gözlemleyin:

   [ -350, -250, 700, 500 ] 
   

Başka bir deyişle: evet, bir explicit ECMASCript binding yanı sıra standard DOM 2 attribute olarak DOM Viewbox, hem alabilirsiniz.