getElementById возвращает ноль при попытке доступа к элементу SVG - PullRequest
Новая
       17

getElementById возвращает ноль при попытке доступа к элементу SVG

0 голосов
/ 31 мая 2019

Я пытаюсь написать скрипт, который будет динамически создавать SVG-элемент и отображать его. Однако, когда я устанавливаю идентификатор элемента SVG и затем пытаюсь получить к нему доступ с помощью Document.getElementById (), он возвращает ноль. Я использую window.onload, чтобы убедиться, что документ будет загружен до вызова скрипта. 

<body>
  <script>
  function buildSVG(color) {
  const shape = `<rect x="0" y="0" width="90" height="90" stroke="black" fill="${color}"/>`;
  return shape;
}


function addSVG(color) {
  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.id = "svgID";
  let elem = document.getElementById("svgID");
  elem.setAttribute('width', '600');
  svg.setAttribute('height', '250');
  svg.innerHTML = buildSVG(color);
  svg.setAttribute('style', 'border: 1px solid black');
  document.body.appendChild(svg);
}
  window.onload = addSVG("cyan");
  </script>
</body>

Я ожидаю, что будет отображен голубой квадрат. Тем не менее, я получаю сообщение об ошибке "не могу прочитать свойство setAttribute из ноль"

Что я могу сделать, чтобы это исправить?

1 Ответ

2 голосов
/ 31 мая 2019

Когда вы создаете свой svg-элемент, у вас уже есть ссылка на него в назначенной вами переменной. Нет необходимости получать его снова из документа. Это было бы даже невозможно, поскольку оно еще не добавлено в документ. Вот исправленный код: 

function buildSVG(color) {
  const shape = `<rect x="0" y="0" width="90" height="90" stroke="black" fill="${color}"/>`;
  return shape;
}


function addSVG(color) {
  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.id = "svgID";
  svg.setAttribute('width', '600');
  svg.setAttribute('height', '250');
  svg.innerHTML = buildSVG(color);
  svg.setAttribute('style', 'border: 1px solid black');
  document.body.appendChild(svg);
}
window.onload = addSVG("cyan");

// after 1 second: get the svgID-element and change the border.
setTimeout(function(){
  document.getElementById('svgID').setAttribute('style', 'border: 1px dashed red');
}, 1000);
...