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

Question

假设我有一个 SVG 元素：

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

我如何获得 myMap 的 viewBox 的特定值？举一个简单的例子：如何获取 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

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

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

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