SharePoint Framework开发WebPart嵌入SVG代码编译报错求助

我之前在SPFx项目里用Inkscape导出的SVG也碰到过一模一样的问题！这个Error TS1003: Identifier expected错误大概率是因为SVG代码里的语法和JSX/TypeScript的规则冲突了，咱们一步步来解决：

1. 先修正SVG的JSX兼容性问题 #

Inkscape导出的SVG会带很多原生SVG的语法，但React的JSX对属性命名和格式有自己的要求，这是最常见的报错原因：

• 把SVG里的class属性改成className（JSX里不能用class，因为它是TypeScript的关键字）
• 所有带连字符的属性（比如stroke-width、fill-rule、view-box）要改成驼峰命名（strokeWidth、fillRule、viewBox）
• 移除SVG开头的<?xml ...?>声明和<!DOCTYPE ...>标签，JSX不需要这些XML格式的头部
• 删掉Inkscape专属的命名空间属性（比如inkscape:version、sodipodi:docname），TypeScript不识别这些带冒号的属性

举个例子，Inkscape导出的原始SVG可能是这样：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" class="logo" stroke-width="3" inkscape:version="1.2" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 50 L190 50 L100 190 Z" fill-rule="nonzero" />
</svg>

改成JSX兼容的版本后：

<svg width={200} height={200} className="logo" strokeWidth={3} xmlns="http://www.w3.org/2000/svg">
  <path d="M10 50 L190 50 L100 190 Z" fillRule="nonzero" />
</svg>

2. 直接把SVG转成React组件 #

如果手动改属性太麻烦，你可以把整个SVG封装成一个React函数组件，这样更方便复用：

import * as React from 'react';

export const CustomLogo = () => (
  <svg width={200} height={200} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    {/* 这里放调整好属性的SVG内容 */}
    <path d="M10 50 L190 50 L100 190 Z" fill="#2563eb" />
  </svg>
);

之后在你的WebPart组件里直接导入使用：

import { CustomLogo } from './CustomLogo';

// 在render里调用
<CustomLogo />

3. 作为静态资源导入（适合复杂SVG） #

如果你的SVG特别复杂，手动改属性容易出错，更简单的方法是把SVG文件当成静态资源导入：

• 把Inkscape导出的SVG文件放到WebPart的assets文件夹里（比如src/webparts/graph/assets/logo.svg）
• 在TSX文件里导入这个SVG：

  import logoSvg from './assets/logo.svg';
  

• 然后用<img>标签渲染：

  <img src={logoSvg} alt="Custom Logo" className="logo-style" />
  

这种方法不需要修改SVG的任何代码，SPFx会自动处理资源路径和打包。

4. 定位具体报错位置 #

你报错的行是src\webparts\graph\components\Graph.tsx(28,8)，可以直接打开这个文件看第28行第8列的内容：

• 大概率是这里有一个带连字符的属性（比如fill-rule），或者用了class关键字
• 也可能是SVG里的注释格式不对，JSX里的注释要写成{/* 注释内容 */}，不能用<!-- -->

按照上面的方法调整后，应该就能解决这个编译错误了！

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