获取元素相对于封闭 svg 的坐标

Question

获取元素相对于封闭 svg 的坐标

我有一个 SVG，其中包含元素和元素组。我想获取封闭元素相对于外部 SVG 的坐标。目前我正在使用document.getElementById(elementid).getBBox().y，它总是返回 0。

Answer 1

正如我在评论中所说，您可以使用getBoundingClientRect来实现此目的：

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <svg width="500" height="500">
      <g transform="translate(100,100)rotate(45)">
        <text id="myText" x="10" y="10" style="fill:red">Hi Mom!</text>
      </g>
    </svg>
    <script>
      var rect = document.getElementById("myText").getBoundingClientRect();
      console.log("position is " + rect.top + "," + rect.left);
    </script>
  </body>

</html>

Run Code Online (Sandbox Code Playgroud)

仅当 SVG 本身未缩放且位于 0,0 时，此功能才有效。否则坐标映射到屏幕的一角，而不是 SVG (6认同)

归档时间：	9 年，7 月前
查看次数：	5659 次
最近记录：	9 年，7 月前