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

2023-12-02

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


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

alert(document.getElementById("myMap").viewBox.baseVal.width);
<svg id="myMap" viewBox="0 0 200 200"></svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何解析SVG元素的viewBox x、y、宽度和高度值? 的相关文章