如何解析SVG元素的viewBox x，y，宽度和高度值? [英] How to parse SVG element's viewBox x, y, width and height values?

问题描述

假设我有一个SVG元素:

Suppose I have an SVG element :

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

我将如何获得特定的价值 myMap的viewBox?举一个简化的示例:如何获取myMap的viewBox属性的"x"值? (对于上面的示例，x值为第一个零(0)).

How would I get get a specific value of myMap's viewBox? For a simplified example : how to get the "x" value of the viewBox attribute of myMap? (for the above example, the x value is the first zero (0)).

下面是我尝试过的一些语法变体:

Below is some variation of syntax I've tried :

<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，宽度和高度的float值，才能在地图中实现放大和缩小功能.

All the above examples display [object Object] on the alert box.
I need the proper float value of x, y, width and height of the viewport to implement zoom in and out functions in a map.

推荐答案

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

You could always just read it straight out of the DOM

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

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

这篇关于如何解析SVG元素的viewBox x，y，宽度和高度值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！