创建扩展 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/xhtml 中创建自定义元素

SVG 元素位于 SVG 命名空间 http://www.w3.org/2000/svg

来自文档：https://html.spec.whatwg.org/multipage/custom-elements.html#element-definition

如果extends的元素接口和HTML命名空间是HTMLUnknownElement，
然后抛出“NotSupportedError”DOMException。

和

如果命名空间不是 HTML 命名空间，则返回 null

正在进行的关于允许其他命名空间的 W3C 讨论在这里：https://github.com/w3c/webcomponents/issues/634

---

HTML 命名空间也有限制

Apple/Safari 实现了 自治自定义元素（从 HTMLElement 扩展）

但拒绝实现自定义内置元素（从 HTML 命名空间扩展任何内置元素）

---

如果你想生成SVG，你必须扩展HTMLElement并生成整个SVG标签：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='V'><circle cx='X' cy='Y' r='R'/></svg>

相关的自定义元素 SVG StackOverflow 问答

• javascript - change the background of an active icon on a menu

• Getting error while creating a custom element which extends SVGCircleElement