document.getElementById () не работает с поиском кукловода и идентификатором для элемента <path>в SVG

Question

Кукольник не может выбрать элемент SVG, который я создал с помощью d3.js

Это фрагмент внутри асинхронной функции:

  const chromiumBrowser = await puppeteer.launch(BROWSER_CONFIG);
  const page = await chromiumBrowser.newPage();
  await page.goto(WIND_DISPLAY_CLIENT_URL);

  const result = await page.evaluate(x => {
    return Promise.resolve(document.getElementById('needle'));
  }, 7);
  const result2 = await page.evaluate(x => {
    return Promise.resolve(document.getElementById('needle'));
  }, 7);
  console.log('what is the result?');
  console.log(result);
  console.log(result2);
  console.log(result === result2);

  await delay(20000);

  const result3 = await page.evaluate(x => {
    return Promise.resolve(document.getElementById('needle'));
  }, 7);

  console.log('result 3 is after the timeout?');
  console.log(result3);

  await chromiumBrowser.close();

Вот как SVG рендерит в DOM:

<path d="M5,0C3.333333333333333,-67.5,1.6666666666666667,-135,0,-135C- 
1.6666666666666667,-135,-3.333333333333333,0,-5,0C-3.333333333333333,0,-1.6666666666666667,5,0,5C1.6666666666666667,5,3.333333333333333,2.5,5,0" 
id="needle" transform="rotate(-180)"></path>

И это фрагмент кода d3, который его отображает:

this.updatedParentSvg = parentSvg
  .append('g')
  .data([lineData])
  .attr('class', 'pointer')
  .attr('id', 'pointer')
  .attr('transform', center);

const pointerLine = d3.line().curve(d3.curveMonotoneX);
this.needle = this.updatedParentSvg
  .append('path')
  .attr('d', pointerLine)
  .attr('id', 'needle')
  .attr('transform', 'rotate(' + this.config.minAngle + ')');

Если я выберу родительский элемент g DOM, я могу запустить document.getElementById и получить значения обратно, ноне в элементе пути, где проблема.