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

Question

Есть 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)).

console.log(document.getElementById("svg_elem") == null);
console.log(document.querySelector("#svg_elem") == null);

<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)" />
</g>
</svg>

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

Answer 1

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

Все ищется без проблем...

const o = document.querySelector('#test')
console.log(o.getAttribute('fill'))
o.setAttribute('fill', 'green')
console.log(document.querySelector('#test').getAttribute('fill'))

<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36">
      <path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z" />
      <path fill="#FFAC33"
        d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z" />
      <circle id="test" fill="#FFCC4D" cx="8.999" cy="27" r="4" />
      <path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z" />
      <path
        d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z" />
      <path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z" />
</svg>

Answer 2

Все отлично видится.

console.log(document.getElementById("svg_elem").innerHTML);
console.log(document.querySelector("#svg_elem").innerHTML);

<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)" />
</g>
</svg>

Answer 3

Вероятно у тебя синхронный скрипт стоит до того места, где написан svg:

<script>console.log(1, document.getElementById('svg') == null)</script>
<script src="data:text/javascript,console.log(2, document.getElementById('svg') == null)"></script>
<script defer src="data:text/javascript,console.log(3, document.getElementById('svg') == null)"></script>
<svg id="svg"></svg>
<script>console.log(4, document.getElementById('svg') == null)</script>

БЛОГ НА HUSL

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

Ответы (3 шт):