通过javascript获取原始的SVG viewBox

Question

通过javascript获取原始的SVG viewBox

25

我们的系统通过 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中的哪里？（我们无法引入第三方库）。

- Tony Eastwood

我有这个问题，答案对我非常有用。了解为什么它被关闭会很好。 - Andy Swift

同意...投票重新开放。 - Jason S

问题被关闭，因为 OP 发现他们在 viewBox 上调用了 removeAttribute。他们写了一个答案来说明这一点，但被管理员删除了。 - Robert Longson

4个回答

16

你需要查看 SVGFitToViewBox 接口，该接口指定了 viewBox 属性。对于 svg 元素的接口 SVGSVGElement，扩展了该接口，因此该属性在元素对象上可用：

const svgElement = document.getElementById("example-svg");
const {x, y, width, height} = svgElement.viewBox.baseVal;

- Brian

4

没有解决方案？只有链接？ - earl3s

3

要获取宽度，请使用svg.viewBox.baseVal.width。对于 x、y 和 height 同理。 - Gerben

1

更简单的方法是，在您的SVG中放置一个ID，然后：

document.getElementById("your_id").getAttribute("viewBox");

- georgesjeandenis

-1

上述配方对于x、y、width和height viewBox属性都给了我零值——除非其中至少一个是通过编程进行更改的。

最终我成功了

var width = document.getElementById("mysvg").getAttribute("width");

- patmin

如果同时指定了width属性和viewBox，则它们之间没有关联。 - MXDVL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

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 ]
```

换句话说：是的，您可以从DOM中获取viewBox，既可以作为标准DOM 2属性，也可以作为显式ECMAScript绑定。