Получение значений из [объекта SVGCircleElement] в JavaScript с использованием getAttribute

Question

Я получил значение «[object SVGCircleElement]» в функции javascript и хотел бы распаковать его, чтобы получить больше информации о нем, например, его идентификатор.Это из ванильной перетаскиваемой функции, которую я написал и не думаю, что она здесь полностью необходима, дело в событии endDrag (mouseup). У меня есть функция, которая содержит переменную [object SVGCircleElement]

function endDrag(evt){
alert(selectedElement);
selectedElement = false;
}

, который дает мне [object SVGCircleElement] Как я могу получить его ID, например?Спасибо

Также - [object SVGSVGElement].При щелчке мышью по перетаскиваемому элементу этот объект передается функции.Перетаскиваемый элемент в dom имеет такие значения, как ID и cy, cx и fill, которые я также хотел бы получить.

Редактировать - благодаря приведенному ниже ответу я смог получить информацию о [object SVGCircleElement] с помощью переменной selectedElement и

selectedElement.id gets ID
selectedElement.getAttribute("cx")`enter code here` gets the cx (as this is a svg circle) 

и т. Д.

Answer 1

Эта строка является просто строкой фактического объекта js.

Вы могли бы увидеть это, используя console.log() вместо alert().

Этот объект предоставляет множество свойств, и здесь не место перечислять их все. Но для id вы можете просто получить доступ к его свойству .id.

Однако имейте в виду, что для SVGElement некоторые свойства на самом деле SVGAnimatedStrings , из которых вам нужно получить доступ к их свойству .baseVal, или вы также можете просто захотеть вызвать Element.getAttribute().

const selectedElement = document.querySelector('circle');

console.log('toString', selectedElement.toString());

console.log('.id', selectedElement.id);
console.log('.cx', selectedElement.cx); 
console.log('.getAttribute("cx")', selectedElement.getAttribute("cx")); 

<svg viewBox="0 0 100 100">
  <circle id="my-circle" cx="50" cy="50" r="50"/>
</svg>