Angular 2/5构建时SVG属性缺失但运行正常问题求助

看起来你在处理SVG路径数据时遇到了TypeScript编译错误——虽然运行时polyfill能正常工作，但构建时SVGElement.width、height和viewbox却报错。这主要是TypeScript类型校验和属性拼写的问题，我给你整理了几个针对性的解决方案：

1. 先修正属性拼写的低级错误 #

首先注意SVG的标准属性是viewBox（驼峰式，B大写），而不是你写的viewbox（全小写）。TypeScript对DOM属性名的大小写是严格校验的，小写的viewbox会被识别为不存在的属性，这肯定会导致编译报错。先把代码里的viewbox改成viewBox，这是最容易忽略的关键点。

2. 扩展TypeScript的SVG类型定义 #

运行时没问题是因为polyfill已经给SVG元素添加了这些属性/方法，但TypeScript的默认DOM类型定义里并没有包含这些内容，所以编译时会报错。我们可以通过扩展类型来解决：

在你的Angular项目src目录下创建（如果没有的话）一个typings.d.ts文件，然后添加以下类型扩展代码：

// 扩展SVGElement的基本属性
interface SVGElement {
  width?: string | number;
  height?: string | number;
  viewBox?: SVGViewBox;
}

// 为SVGPathElement扩展polyfill带来的属性和方法
interface SVGPathElement extends SVGElement {
  pathSegList: SVGPathSegList;
  normalizePath(): string;
}

// 补充SVGPathSegList的基础类型定义（可根据polyfill实际实现调整）
interface SVGPathSegList {
  length: number;
  [index: number]: SVGPathSeg;
  appendItem(item: SVGPathSeg): void;
  removeItem(index: number): SVGPathSeg;
}

// 补充SVGPathSeg的基础类型定义
interface SVGPathSeg {
  pathSegType: number;
  pathSegTypeAsLetter: string;
  // 可根据pathseg.js的实现添加更多属性，比如x、y等
}

这个文件会被TypeScript自动识别，扩展后就不会再报这些属性不存在的错误了。

3. 确认polyfill加载顺序 #

你已经在.angular-cli.json的scripts里配置了["pathseg.js", "normalizePath.js"]，这个顺序是正确的——因为normalizePath.js大概率依赖pathseg.js提供的pathSegList，保持这个顺序不要改动。

4. 临时绕过类型检查（紧急情况用） #

如果不想折腾类型定义，也可以用类型断言把SVG元素转为any来绕过检查，比如：

const mySvg = document.getElementById('target-svg') as any;
const svgWidth = mySvg.width;
const svgHeight = mySvg.height;
const svgViewBox = mySvg.viewBox;

不过这种方法会失去TypeScript的类型校验优势，只建议在紧急调试时使用，长期来看还是扩展类型定义更规范。

5. 升级TypeScript/Angular版本 #

如果你用的是较旧的Angular或TypeScript版本，默认的DOM类型定义可能不够完整，比如早期的TS版本对SVG属性的支持有限。可以升级到和Angular版本匹配的TypeScript版本（比如Angular 16对应TS 5.0+），新版本的类型定义会更完善，可能不需要手动扩展就能识别这些属性。

内容的提问来源于stack exchange，提问作者slerfsterdn