自定义 aurelia 属性中的简单 DOM 操作

Question

我正在通过测试一个简单的 DOM 操作来试验 Aurelia 自定义属性。

令我惊讶的是，通过将椭圆节点附加到父 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?

自定义 aurelia 属性中的简单 DOM 操作

Simple DOM manipulation in custom aurelia atttribute

javascript

dom

aurelia

aurelia-templating