创建扩展 SVGCircleElement 的自定义元素时出错

Question

我有以下Node类，我用它来创建自定义元素。node-element

class Node extends SVGCircleElement{

    static get observedAttributes() {

        return ["coordinates"];

      }

    constructor()

    {

        super();

        this.attributeMap = {coordinates:(coordinates)=>this.updateCoordinates(coordinates)}

    }

    connectedCallback(){

        this.initNode();

    }

    updateCoordinates(coordinates)

    {

        this.setAttribute("cx",`${coordinates.x}`);

        this.setAttribute("cy",`${coordinates.y}`);

        this.setAttribute("r",50);

    }

    initNode()

    {

        this.className="node";

    }

    attributeChangedCallback(name,oldValue,newValue)

    {

        if(oldValue!==newValue)

        {

            this.attributeMap[name](JSON.parse(newValue))

        }

    }

}

我注册此元素使用：-

customElements.define('node-element',Node);

我正在创建此元素，如下所示：-

let newNode = document.createElement("node-element");

这就是我得到以下错误的地方：-

Uncaught TypeError: Illegal constructor

    at new Node (index.js:9)

    at SVGSVGElement.drawNode (index.js:43)

第 43 行对应于 createElement 代码。

Answer 1

很想被证明是错误的，只是在SVG项目上花了2个月AFAIK，你不能扩展SVG元素只能在 HTML 命名空间中创建自定义元素http://www.w3.org/1999/xhtmlSVG 元素位于 SVG 命名空间中http://www.w3.org/2000/svg从文档：&nbsp;https://html.spec.whatwg.org/multipage/custom-elements.html#element-definition如果扩展的元素接口和 HTML 命名空间是 HTMLUnknownElement，则抛出一个“NotSupportedError”DOMException。和如果命名空间不是 HTML 命名空间，则返回 null正在进行的关于允许其他命名空间的 W3C 讨论如下：https://github.com/w3c/webcomponents/issues/634HTML 命名空间也有限制Apple/Safari实现了Autonomous Custom Elements（从HTMLElement扩展而来）但拒绝实现自定义内置元素（从 HTML 命名空间扩展任何内置元素）如果要生成 SVG，则必须扩展并生成整个 SVG 标记：HTMLElement<svg&nbsp;xmlns='http://www.w3.org/2000/svg'&nbsp;viewBox='V'><circle&nbsp;cx='X'&nbsp;cy='Y'&nbsp;r='R'/></svg>