使用 svg 进入 sharepoint webpart答案

【问题标题】：Using svg into sharepoint webpart使用 svg 进入 sharepoint webpart
【发布时间】：2018-09-22 05:53:41
【问题描述】：

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

当我构建时，我遇到了这种错误：错误 - typescript - src\webparts\graph\components\Graph.tsx(28,8): error TS1003: Identifier expected.

我使用 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>

【问题讨论】：

标签： reactjs typescript svg sharepoint sharepoint-online

【解决方案1】：

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

【讨论】：