通过javascript获取原始SVG viewBox

Question

我们的系统通过AJAX以编程方式将SVG文件加载到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中获取此"viewBox" - 无论是作为字符串还是作为一组值.例如,在Mozilla下,firebug报告svg节点有我们指定的6个属性中的5个 - 即:xmlns,xml:space,height,width和xmlns:xlink.但ViewBox在此列表中显然不见了.

无论如何以编程方式检索此值？ - 它在SVG DOM中的位置？(我们不能介绍第三方图书馆).

Answer 1

1. 转到http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. 打开Web浏览器控制台

3. 输入代码:

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

4. 观察光荣的回应:

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

5. 或者,键入代码:

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

6. 观察光荣的回应:

   [ -350, -250, 700, 500 ]
   

换句话说:是的,您可以从DOM获取viewBox,既可以作为标准DOM 2属性,也可以作为显式ECMASCript绑定.

Answer 2

您需要查看SVGFitToViewBox指定viewBox属性的接口.svg元素的接口SVGSVGElement扩展了该接口,因此可能是您正在寻找的属性.