如何解析 SVG 元素的 viewBox x、y、宽度和高度值？答案

【问题标题】：How to parse SVG element's viewBox x, y, width and height values?如何解析 SVG 元素的 viewBox x、y、宽度和高度值？
【发布时间】：2016-11-20 13:45:08
【问题描述】：

假设我有一个 SVG 元素：

<svg id="myMap" viewBox="0 0 200 200"></svg>

如何获得特定值 myMap 的视图框？举个简单的例子：如何获取 myMap 的 viewBox 属性的“x”值？（对于上面的例子，x 值是第一个零 (0)）。

以下是我尝试过的一些语法变体：

<script>
  var myMap = Snap("#myMap");
  alert(myMap.attr("viewBox"));//dislays [object Object]
  alert(myMap.attr("viewBox.vbx"));//also dislays [object Object]
  alert(myMap.attr("viewBox.x"));//also dislays [object Object]
</script>

以上所有示例都在警告框上显示 [object Object]。
我需要视口的 x、y、宽度和高度的正确浮点值来实现地图中的放大和缩小功能。

【问题讨论】：

其中一个答案有帮助吗？然后，您应该决定将其标记为已接受。或者告诉我们，缺少什么。
抱歉回复晚了，我选择了@Robert 的答案，因为我需要在数学计算中使用这些值。对于 Joachim，因为 var testXvar=console.log(attr.x);警报（testXvar）；什么都不显示，我不能使用那个解决方案。
我真正追求的是 SVG 元素的 viewBox 对象的成员变量名称。如果我们知道他们的名字，我们可以简单地询问 viewBox 对象，例如 var vbx = myMap.attr({"viewBox"}).x; .但由于似乎没有人知道这个 viewBox 对象的变量名，我认为@Robert 的回答就足够了。

标签： svg snap.svg

【解决方案1】：

您总是可以直接从 DOM 中读取它

alert(document.getElementById("myMap").viewBox.baseVal.width);

&lt;svg id="myMap" viewBox="0 0 200 200"&gt;&lt;/svg&gt;

【讨论】：

【解决方案2】：

attr() 方法返回一个对象而不是一个标量，而alert() 需要一个标量。如果您使用 console.log() 而不是 alert()，您可以在 JavaScript 控制台中看到对象的内容。

要获取您的svg 使用的x、y、宽度和高度

var myMap = Snap("#myMap");
var attrs = myMap.attr("viewBox");

console.log(attr.x);
console.log(attr.y);
console.log(attr.width);
console.log(attr.height);

【讨论】：

【解决方案3】：

谢谢你，@罗伯特·朗森

alert(document.getElementById("myMap").viewBox.baseVal.width);

&lt;svg id="myMap" viewBox="0 0 200 200"&gt;&lt;/svg&gt;

alert(document.getElementById("myMap").viewBox.baseVal.width);

&lt;svg id="myMap" viewBox="0 0 200 200"&gt;&lt;/svg&gt;

【讨论】：