3

我正在通过测试一个简单的 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 来实现所需的结果？

4

1 回答 1

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?

于 2017-02-08T02:29:17.267 回答