html - typescript 中 <svg> 元素的类型是什么

Question

这个问题在这里已经有了答案:





How to use SVGDocument in Typescript?

(2 个回答)



Property getBBox does not exist on type SVGElement

(2 个回答)


1年前关闭。




我正在实现以下类:

export class BbSVGElement extends HTMLElement implements HTMLCanvasElement { ... }

问题是我找不到 <svg> 的类型 typescript 中的元素:<span>元素是 HTMLSpanElement , <canvas>元素是 HTMLCanvasElement ， ETC。
我问是因为要实现一个简单的任务，例如 height()函数，我需要获取元素的边界框。根据this stack overflow answer ，这是正确的做法:

height(): number { return this.getBBox().height}

但是自从this指 HTMLElement ，当然 Property 'getBBox' does not exist on type 'BbSVGElement'.ts(2339)所以我尝试了各种铸件；像:

return (<SVGElement> this).getBBox().width
return (<SVGSVGElement> this).getBBox().width

当然我可以做类似的事情

return (<any> this).getBBox().width

或者

return this.offsetWidth // <-- This property here comes from HTMLElement

但如果可能的话，我宁愿不要。
所以:什么是正确的 Actor 阵容？或者我会错过另一个选择吗？

Answer 1

What is the type of the <svg> element in TypeScript?

<svg>的接口(interface)类型*.svg 中的元素文档(即 SVG DOM)是 SVGElement . <svg> 的类型HTML 文档(即 HTML DOM)中的元素实际上是一个无原型(prototype)的对象 实现了 HTMLElement 和 SVGElement !
所以在 TypeScript 中，你可以表示一个 <svg> DOM 中的元素通过使用交集类型(它表示组合两种或多种类型的所有成员的类型，与表示组合两种或多种类型的共享成员的类型的联合类型相比)。
像这样:

type SvgInHtml = HTMLElement & SVGElement;

const svgElement: SvgInHtml = document.createElement('svg') as SvgInHtml;

const svgHeight = svgElement.getBBox().height; // Using `SVGElement.getBBox()`.
const htmlWidth = svgElement.offsetWidth;      // Using `HTMLElement.offsetWidth`

我看到您想使用派生类来表示它 - 但这是不正确的(因为类继承只允许单个父类)，而是使用非封装 type SvgInHtml引用，或将其封装在对象或新类中(没有父类(super class)):

type SvgInHtml = HTMLElement & SVGElement;

class MySvgWrapper {

    constructor( private readonly svgElement: SvgInHtml ) {
    }

    get height(): number {
        return this.svgElement.getBBox().height;
    }
}

(这是我在正确理解您的问题之前发布的原始答案 - 我将其保留在这里并可以访问，因为我觉得它可能对其他发现此问题但与您有不同问题的人仍然有用):
所有(大多数？)SVG 元素的基本 SVG-DOM 接口(interface)是 SVGElement which is documented on MDN .
假设您使用的 TypeScript 3.x 或更高版本在 lib.dom.d.ts 中具有 SVG-DOM 接口(interface)(请参阅我在该行下方的回答内容)然后您需要更改您的 class对此的声明:

export class MySVGElement extends SVGElement {
    
}

从 TypeScript 3.x 开始，TypeScript 的 HTML DOM 类型“标准库”包括 lib/lib.dom.d.ts 中的 SVG DOM 接口(interface)。 ，因此您无需下载、导入或添加任何内容 - 只需使用 SVGElement (及其派生接口(interface))直接。
If you open the current TypeScript lib.dom.d.ts in GitHub您可以搜索"SVGElement" (以及任何其他 SVG-DOM 接口(interface)，例如 SVGGraphicsElement )并看到它在那里声明:
例如。:

/** SVG elements whose primary purpose is to directly render graphics into a group. */
interface SVGGraphicsElement extends SVGElement, SVGTests {
    readonly transform: SVGAnimatedTransformList;
    getBBox(options?: SVGBoundingBoxOptions): DOMRect;
    getCTM(): DOMMatrix | null;
    getScreenCTM(): DOMMatrix | null;
    addEventListener<K extends keyof SVGElementEventMap>(type: K, listener: (this: SVGGraphicsElement, ev: SVGElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof SVGElementEventMap>(type: K, listener: (this: SVGGraphicsElement, ev: SVGElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

如果您收到与未知/未定义类型相关的任何错误，请将其发布为新的 StackOverflow 问题。