如何获取页面上<g id=\"iqaluit\">和<circle id=\"circle\">元素的offsetLeft/offsetTop？答案

【问题标题】：How to get the offsetLeft/offsetTop of the <g id="iqaluit"> and <circle id="circle"> elements on the page?如何获取页面上<g id=\"iqaluit\">和<circle id=\"circle\">元素的offsetLeft/offsetTop？
【发布时间】：2022-10-06 06:37:14
【问题描述】：

怎么获得offsetLeft/offsetTop的 **<g id=\"iqaluit\">和<圈子id=\"圈子\">javascript中的元素。我试过这个：但它给出了一个错误 TypeError: bar is null。

let bar = document.getElementById(\'iqaluit\');
console.log(bar.offsetLeft, bar.offsetTop)
let circle = document.getElementById(\'circle\');
console.log(circle.offsetLeft, circle.offsetTop);

HTML

<div class=\"section-map\">
    <canvas class=\"svgfix__canvas\" width=\"500\" height=\"488\"> </canvas>
    <svg id=\"MAP\" data-name=\"MAP\" data-province=\"MAP\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1100 1072.93\">
        <g id=\"City_Labels_Canada\" data-name=\"City Labels Canada\">

            <g id=\"iqaluit\" data-name=\"Iqaluit\" data-province=\"nunavut\" class=\"city nohover\">

                <circle id=\"circle\" cx=\"839.32\" cy=\"390.34\" r=\"3.1\"></circle>

                <text x=\"847\" y=\"394\" data-name=\"Iqaluit\" class=\"en de fr es\">Iqaluit</text>
            </g>
        </g>
    </svg>
</div>

可能是您在加载 dom 之前尝试访问它。 window.addEventListener(\'load\', function() { console.log(\'All assets are loaded\') let bar = document.getElementById(\'iqaluit\'); console.log(bar.offsetLeft, bar.offsetTop) let circle = document.getElementById(\'circle\'); console.log(circle.offsetLeft, circle.offsetTop); }) 注意：SVG 元素不支持向左和向上偏移。
是的，似乎在<圆圈>标签，问题是这个“SVG 元素不支持左上偏移。”。但是是<g>标签也被认为是 svg 元素？
是的，因为 g 和 cricle 在 svg 中都有两个标签 [阅读有关此内容的更多信息](w3.org/TR/cssom-view/#dom-htmlelement-offsetleft)。你可以试试这个Element.getBoundingClientRect()

标签： javascript html svg ecmascript-6 html5-canvas

【解决方案1】：

@Dio，您走在正确的轨道上。 svg 元素不支持您要查找的属性，但您可以使用文档访问元素，与您尝试的方式略有不同。见下文。

此外，@Syed Qasim Ahmed 的建议提供了一个对象，但我不确定您要使用 offsetLeft/offsetTop 实现什么，所以我不能说它是否等效。

const map = document.getElementById('MAP');
const bar = map?.querySelector('#iqaluit');

/**
 * You can see the available
 * methods and properties
 * with a for in loop
 */
 
if (bar) {
  for (let i in bar) {
    console.log('what is i?', i);
    console.log('what is bar[i]?', bar[i]);
  }

  const getBoundingClientRect = bar.getBoundingClientRect();

  console.log({ getBoundingClientRect });
}

<div class="section-map">
    <canvas class="svgfix__canvas" width="500" height="488"> </canvas>
    <svg id="MAP" data-name="MAP" data-province="MAP" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 1072.93">
        <g id="City_Labels_Canada" data-name="City Labels Canada">

            <g id="iqaluit" data-name="Iqaluit" data-province="nunavut" class="city nohover">

                <circle id="circle" cx="839.32" cy="390.34" r="3.1"></circle>

                <text x="847" y="394" data-name="Iqaluit" class="en de fr es">Iqaluit</text>
            </g>
        </g>
    </svg>
</div>

【讨论】：