オリジナルのSVG viewBoxをjavascript経由で取得

Question

私たちのシステムは、SVGファイルをAJAX経由でHTMLにプログラムで読み込みます。典型的なSVGファイルはで始まる：

<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 

しかし、不思議なJavaScriptでSVG DOMからこの「ビューボックス」背中を取得する手立てがないように思える - のいずれかの文字列として、または値のセットとして。たとえば、Mozillaの下では、svgノードには、xmlns、xml：space、height、width、xmlns：xlinkの6つの属性のうちの5つがあります。しかしViewBoxはこのリストからはっきりと見当たりません。

この値をプログラムで取得する方法はありますか。 - SVG DOMのどこにありますか？ （私たちはサードパーティライブラリを紹介することはできません）。

Answer 1

SVGFitToViewBoxインターフェイスでは、viewBoxプロパティが指定されています。 svgの要素のインターフェイスであるSVGSVGElementは、そのインターフェイスを拡張しているため、探しているプロパティになる可能性があります。 http://phrogz.net/SVG/svg_in_xhtml5.xhtml

へ

Answer 2

1. ゴーオープンWebブラウザのコンソールコード

2. タイプ：

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

また

3. 、入力します。

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

4. は栄光の反応を観察コード：

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

5. 栄光の応答守ってください。つまり

   [ -350, -250, 700, 500 ] 
   

：はい、あなたはstandard DOM 2 attributeとしてだけでなく、explicit ECMASCript binding両方、DOMからビューボックスを取得することができます。