0

我正在尝试获取设置了 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);
4

1 回答 1

2

假设我们给 rect 一个 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);
于 2013-08-29T18:02:41.167 回答