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

Question

假设我有一个 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、宽度和高度的适当浮点值来实现地图中的放大和缩小功能。

Answer 1

attr() 方法 returns 一个对象而不是一个标量，而 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);

Answer 2

您总是可以直接从 DOM

中阅读它

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

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

Answer 3

谢谢@Robert Longson

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

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

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

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

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

How to parse SVG element's viewBox x, y, width and height values?

svg

snap.svg