Question

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

Answer 1

正如我在评论中所说，您可以使用getBoundingClientRect：

＆＃13;

<!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>

＆＃13;

Answer 2

使用jQuery，你可以这样做：var offset=svg.offset()（给你svg的绝对位置），然后是var pos=elem.offset()，它给你元素的绝对位置。从另一个中减去一个。这里svg是jQuery（＆＃39; svg＆＃39;），也许elem是jQuery（＆＃39;＃idOfElement＆＃39;）。例如。

我懒得做香草JS比特，我也不建议使用它。 jQuery试图跨浏览器，并且偏移在所有浏览器实现上都能很好地工作。

此外，您可以尝试利用浏览器位置系统并将svg的位置设置为“相对”，然后elem.position（）将为您提供相对于第一个绝对父元素的位置有相对或绝对的位置。

.svg { position: relative } 要么 $('svg').css({position:'relative'})

然后$('#myElemId').position()为您提供坐标。

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

2 个答案: