Попытка добавить элемент в группу в Javascript вызывает «... не объект». ошибка, хотя элемент является объектом - PullRequest
Новая
       37

Попытка добавить элемент в группу в Javascript вызывает «... не объект». ошибка, хотя элемент является объектом

0 голосов
/ 03 октября 2019

Описание: Попытка добавить элемент в группу javascript приводит к «TypeError: Аргумент 1 Node.appendChild не является объектом». хотя я с помощью typeof проверил, что это объект. 

let d = SVG('board').size(100, 100);

function createElem(elemId) {
  let elem;
  elem = d.rect().attr({
    id: elemId
  });
  return elem;
};

function main() {
  'use strict';
  let elem, elemId, s;

  elemId = `elem101`;
  elem = createElem(elemId);
  alert(elem); // Returns ‘elem101’ although elem is an object. --A
  s = d.group();
  s.add(elem); // Appears to work fine up to this point

  // However, replacing the previous line with the following
  // three lines of code causes an error
  elem = document.getElementById(elemId);
  alert(elem); // returns ‘[object SVGRectElemnt]’; Why? -- B
  // In A, the alert returns the element id of ‘elem101’
  // but here in B it returns the rectangle object.
  // Why this difference?
  try {
    s.add(elem); // Causes error: “TypeError: Argument 1 of
    // Node.appendChild is not an object.”
    // I am unable to add the element returned by getElementById
    // to the group.
  } catch (e) {
    console.log(e.message);
  }
};

main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id='board'></div>

Добавление фрагмента кода в тело

1 Ответ

1 голос
/ 03 октября 2019

Похоже, add ожидает объект SVG.js, а не узел DOM. Вы можете получить объект SVG.js из узла DOM, используя свойство instance .

Вот тот же фрагмент, теперь использующий elem.instance, который не выдает ошибку. Тем не менее, он не будет добавлять один и тот же элемент дважды, поэтому он не будет делать много ...

Если вы хотите получить объект SVG.js по идентификатору, вы можете использовать the SVG.get() метод для получения элемента 

let d = SVG('board').size(100, 100);

function createElem(elemId) {
  let elem;
  elem = d.rect().attr({
    id: elemId
  });
  return elem;
};

function main() {
  'use strict';
  let elem, elemId, s;

  elemId = `elem101`;
  elem = createElem(elemId);
  alert(elem);
  // Returns ‘elem101’ although elem is an object.
  // Apparently SVG.js overrides the toString() method of their objects to
  // return the id property if present.
  s = d.group();
  s.add(elem); // Appears to work fine up to this point

  elem = document.getElementById(elemId);
  alert(elem); // returns ‘[object SVGRectElemnt]’; Why? 
  // Since you're using DOM methods, it's retrieving a DOM object.
  // To get the SVG.js object, use an SVG.js method
  // elem = SVG.get(elemId);

  try {
    s.add(elem.instance); // does nothing because of the add() call above 
  } catch (e) {
    console.log(e.message);
  }
  // OR
  try {
    s.add(SVG.get(elemId)); // does nothing because of the add() call above
  } catch (e) {
    console.log(e.message);
  }
};

main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id='board'></div>
...