Простые манипуляции с 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 не работает с элементом svg?