使用viewBox集检索Firefox与Chrome中的SVG位置

我试图获取设置了viewBox的svg元素的左侧位置。viewBox基本上是一个正方形，而实际的svg元素更为矩形。在大多数情况下，这不是问题（在Chrome中，一切正常），但是，当尝试在Firefox中获取元素的左位置时，由于viewBox是方形的，Firefox会报告viewBox的左位置，而不是svg元素

请参阅，以获取一个可以让事情变得显而易见的示例

基本上，在Chrome中，左侧位置报告的数字是8，这是我想要的数字。在Firefox中，它被报告为108。如何让Firefox也报告数字8

代码 HTML JS

---

假设我们给了rect一个id=“r”属性

如果您只需要svg本身中rect的偏移量，那么它是

    $('p').text(document.getElementById("r").getCTM().e);

如果您希望从页面原点开始偏移

• 调用rect.getBoundingClientRect（），左侧和顶部将包含答案

  $('p').text(document.getElementById("r").getBoundingClientRect().left);
  

  $('p').text(document.getElementById("r").getScreenCTM().e);
  

• 或者，rect.getScreenCTM（）结果的e和f成员将是答案

  $('p').text(document.getElementById("r").getBoundingClientRect().left);
  

  $('p').text(document.getElementById("r").getScreenCTM().e);
  

如果使用变换旋转svg，则会得到不同的答案，getBoundingClientRect（）将为您提供一个未旋转的边界矩形，但getScreenCTM将为您提供一个变换的偏移量，因为您目前无法使用这两种方法

8是差异，即元素在页面上的位置。这与描述不一致，但如果您想要8，则为：

    $('p').text(document.getElementById("r").getScreenCTM().e -
                document.getElementById("r").getCTM().e);

---

不幸的是，这两个都给出了相同的错误答案。这只是帮助我确认firefox处理viewbox的方式不同。最终解决我的问题的是将

transform origin

设置为

0

，而不是

center

    $('p').text(document.getElementById("r").getScreenCTM().e -
                document.getElementById("r").getCTM().e);