Почему JS не видит SVG-элементы по ID?

Question

[ymfront]

Есть SVG, вставленный инлайново в HTML. Типа такого:

<svg viewBox="0 0 719 719" fill="none" xmlns="http://www.w3.org/2000/svg">
	<g id="svg_elem">
		<circle id="Ellipse 1" cx="359.467" cy="359.467" r="358.493" transform="rotate(0.155903 359.467 359.467)" fill="#525267" />
		<g id="Ellipse 3" filter="url(#filter0_ii_13_68)">
			<circle cx="359.909" cy="358.735" r="293.219" transform="rotate(0.155903 359.909 358.735)" fill="#525267" /> </g>
		<path id="shadow 1" opacity="0.4" d="M359.392 602.962C494.193 603.329 603.769 494.348 604.135 359.547C604.502 224.745 495.521 115.17 360.72 114.803C225.918 114.436 116.343 223.417 115.976 358.218C115.609 493.02 224.59 602.595 359.392 602.962Z" fill="url(#paint0_radial_13_68)" />

Пытаюсь получить доступ к элементу по ID. но никак не получается.

Пытался разными способами:

let svg = document.getElementById("svg_elem");
let svg = document.querySelector("#svg_elem");

В консоль всегда выводится null (console.log(svg)).

Как правильно записать нужный элемент в переменную по ID?

Comments

[Ankhena]

Если не обращать внимания на то, что у вас даже svg выложена криво, потерян по меньшей мере закрывающий тег и на неверные значения атрибутов id во всех остальных случаях кроме svg_elem, то всё остальное должно работать.

Поэтому выкладывайте неполучившееся в песочницу на codepen.io

id="Ellipse 3"

Обратите внимание на то, что в id не может быть пробелов.

Answer 1

[Алексей Ярков]

Всё работает.
Может вы console.log(svg) вызываете ДО появления элемента?