代码

Question

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

请参阅http://jsfiddle.net/c6SW6/11/，了解一些应该让事情变得明显的例子。

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

代码

HTML

<div>
    <svg viewBox="0 0 100 100"><rect x=0 y=0 width=100 height=100></rect></svg>
</div>

<p>
</p>

CSS

div {
    height: 100px;
    width: 300px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 200px;
}

svg {
    background-color: green;
    height: 100%;
    width: 100%;
}

JS

$('p').text($('svg').offset().left);

Answer 1

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

如果您只想在svg本身中使用rect的偏移量，那么它就是

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

如果您想要从页面原点偏移...

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

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

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

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

如果你使用变换旋转svg然后你会得到不同的答案，getBoundingClientRect（）会给你一个未旋转的边界矩形，但getScreenCTM会给你一个变换的偏移，因为你没有这样做你可以使用当前

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

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

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

代码

HTML

CSS

JS

1 个答案: