javascript 通过javascript获取原始SVG viewBox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7676006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Obtaining an original SVG viewBox via javascript
提问by Tony Eastwood
Our system loads SVG files programmatically into HTML via AJAX. A typical SVG file begins with:
我们的系统通过 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
But strangely in JavaScript there seems to be no way of getting this 'viewBox' back from the SVG DOM - either as a string, or as a set of values. Under Mozilla, for example, firebug reports that the svg node has 5 of the 6 attributes we specifiy - namely: xmlns, xml:space, height, width and xmlns:xlink. But ViewBoxis conspicuously missing from this list.
但奇怪的是，在 JavaScript 中似乎没有办法从 SVG DOM 中取回这个“viewBox”——无论是作为一个字符串，还是作为一组值。例如，在 Mozilla 下，firebug 报告 svg 节点具有我们指定的 6 个属性中的 5 个 - 即：xmlns、xml:space、height、width 和 xmlns:xlink。但是此列表中明显缺少ViewBox。
Is there anyway to programmatically retrieve this value? - where is it in the SVG DOM? (We cannot introduce 3rd party libraries).
无论如何以编程方式检索此值？- 它在 SVG DOM 中的什么位置？（我们不能引入第 3 方库）。
采纳答案by Brian
You'll want to take a look at the SVGFitToViewBoxinterface, which specifies the viewBoxproperty. The interface for svgelements, SVGSVGElement, extends that interface, so that might be the property you're looking for.
您将需要查看SVGFitToViewBox指定viewBox属性的接口。svg元素的接口SVGSVGElement，扩展了该接口，因此这可能是您正在寻找的属性。
回答by Phrogz
- Go to http://phrogz.net/SVG/svg_in_xhtml5.xhtml
- Open your web browser console
Type the code:
var svg = document.querySelector('svg'); var box = svg.getAttribute('viewBox'); box.split(/\s+|,/);Observe the glorious response:
["-350", "-250", "700", "500"]Alternatively, type the code:
var box = svg.viewBox.baseVal; [ box.x, box.y, box.width, box.height ]Observe the glorious response:
[ -350, -250, 700, 500 ]
- 转到http://phrogz.net/SVG/svg_in_xhtml5.xhtml
- 打开您的网络浏览器控制台
输入代码：
var svg = document.querySelector('svg'); var box = svg.getAttribute('viewBox'); box.split(/\s+|,/);观察光荣的回应：
["-350", "-250", "700", "500"]或者，键入代码：
var box = svg.viewBox.baseVal; [ box.x, box.y, box.width, box.height ]观察光荣的回应：
[ -350, -250, 700, 500 ]
In other words: yes, you can get the viewBox from the DOM, both as a standard DOM 2 attribute as well as an explicit ECMASCript binding.
换句话说：是的，您可以从 DOM 中获取 viewBox，既可以作为标准的 DOM 2 属性，也可以作为显式的 ECMASCript 绑定。
回答by georgesjeandenis
Even easier, put an id in your svg then :
更简单的是，在你的 svg 中输入一个 id 然后：
document.getElementById("your_id").getAttribute("viewBox");
回答by patmin
Above receipes gave me all zeros for the x, y, width and height viewBox attributes -- unless at least one of them was changed programmatically.
上面的收据给了我 x、y、宽度和高度 viewBox 属性的所有零——除非至少其中一个以编程方式更改。
I finally succeded with
我终于成功了
var width = document.getElementById("mysvg").getAttribute("width");
