使用 svg 到 sharepoint webpart

Question

我正在为 SharePoint 开发 Web 部件。我使用 SharePoint 框架、TypeScript 和 ReactJS。我需要使用 svg 图像。但是当我将我的 svg 图像代码粘贴到我的 webpart 时，出现错误并且无法构建。为了进行测试，我在创建新项目时使用 SharePoint 生成的基础 Web 部件。

当我构建时，我有这样的错误：错误 - 打字稿 - src\webparts\graph\components\Graph.tsx(28,8)：错误 TS1003：需要标识符。

我用 inkscape 创建了我的 svg，并对其进行了编辑以与 ReactJS 一起使用。

你能帮我吗？

svg :

  <svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   id="svg2">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <path
       d="m 560,315.21933 a 265.71429,234.28572 0 1 1 -531.428589,0 265.71429,234.28572 0 1 1 531.428589,0 z"
       id="path2985"
       style={{fill:#ffff00;fill-opacity:1;stroke:none}} />
  </g>
</svg>

Answer 1

我终于找到了解决办法。我使用 svg to react cli (https://www.npmjs.com/package/svg-to-react-cli) 将我的 svg 转换为 React 组件。然后我删除了标签定义和元数据。最后，我将我的 svg 代码粘贴到我的反应组件中。而且效果很好。

使用 svg 到 sharepoint webpart

Using svg into sharepoint webpart

sharepoint

svg

typescript

reactjs

sharepoint-online