有没有办法像 HTMLElement 一样扩展 SVGElement

Question

我正在制作一个小型 JS 库。我正在使用 HTMLElement 界面创建自定义元素。现在我想制作一个自定义图形工具，为此，我希望我的元素扩展 SVGElement。

我有一个扩展 SVGElement 的Graph.js类和一个实例化图形的main.js 。

这是我的类Graph.js：

export class Graph extends SVGElement {

    constructor() {
        super();

    }

}

和Main.js：

import { Graph } from './Experimental/Graph/Graph.js';

customElements.define('pro-graph', Graph);

let graph = new Graph();

但由于某种原因我收到此错误：

Uncaught TypeError: Illegal constructor.
    <anonymous> debugger eval code:1

Answer 1

问题是super();构造函数中的行相当于new SVGElement()，当您直接调用它时，它会抛出确切的异常。尝试这个也没有多大意义，因为不存在“纯” SVGElement。SVGElement是一个抽象基类，用于更专业的元素，例如SVGCircleElement，SVGPathElement以及所有其他元素。但它们也不能通过构造函数创建。创建 SVG 元素的常用方法是通过工厂方法，document.createElementNS如此处所述。

当您无法通过构造函数实例化一个类时，您就无法创建扩展它的类。

更好的库设计方法可能是：

• 创建一个包装类，它不扩展 SVGElement，而是在私有变量中包含 SVGElement
• 创建一个 SVGElement，然后为其附加几个附加方法