Простые манипуляции с DOM в пользовательских настройках aurelia

Question

Я экспериментирую с пользовательским атрибутом Aurelia, тестируя простые манипуляции с DOM.

К моему удивлению выполнение манипуляции с помощью узла добавления и эллипса родительскому узлу svg изменяет HTML, но не отображает эллипс.

Манипулирование свойством innerHtml работает должным образом.

import { bindable, inject} from 'aureliaframework'; 
 

 
@inject(Element) 
 
export class TestCustomAttribute { 
 

 
    constructor(private element: SVGElement) { 
 
    } 
 
    attached() 
 
    { 
 
     var ellipse = document.createElement("ellipse"); 
 
     ellipse.setAttribute("cx","200"); 
 
     ellipse.setAttribute("cy","200"); 
 
     ellipse.setAttribute("rx","100") 
 
     ellipse.setAttribute("ry","100") 
 
     ellipse.setAttribute("style","fill:blue") 
 

 
     //this is rendered 
 
     this.element.innerHTML = "<ellipse style='fill: purple' cx='200' cy='200' rx='100' ry='100'></ellipse>" 
 
      
 
     //this shows on DOM explorer but not rendered 
 
     this.element.appendChild(ellipse) 
 
    }

Можно ли достичь желаемого результата с использованием appendNode() вместо манипулирования элементом innerHtml?

Answer 1

Похоже, что это скорее причуда вокруг DOM API и элементов SVG, а не проблема с Aurelia.

Попробуйте использовать createElementNS и включают в себя пространство имен вместо SVG https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Смотрите этот вопрос для более подробной информации: jquery's append not working with svg element?