将 SVG 标记添加到 React 组件答案

【问题标题】：Add SVG markup to React component将 SVG 标记添加到 React 组件
【发布时间】：2015-10-15 12:18:05
【问题描述】：

我正在尝试制作一个基于此 CodePen 标记的反应组件。

我的组件如下所示：

import React from 'react';

class Arches extends React.Component {
    render(){
        return(/*markup from codepen*/);
    }
}

export default Arches;

但在渲染时它会中断：

unexpected token (764:3)
  762 |     d="m 46.842051,219.06796

将 SVG 集成到 React 组件中的正确方法是什么？

【问题讨论】：

标签： svg reactjs render

【解决方案1】：

React 确实支持 SVG，但这里的主要问题是 JSX is not identical to HTML。您不能只是复制粘贴任何旧的 HTML 或 SVG 标记块并期望它在 JSX 中工作而无需花费一些精力来清理它。这个特定的 SVG sn-p 的主要问题是：

JSX 不允许 HTML 样式的 cmets， 就像您的示例中的这个：
```

```
您要么需要完全删除它们，要么将它们替换为JSX Javascript-style comments：
```
{/* Child Dentition */}
```

JSX 不支持 XML 命名空间。因此，像这里这样的命名空间元素将不起作用：

<metadata id="metadata8">
  <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>Human Dental Arches</dc:title>
    </cc:Work>
  </rdf:RDF>
</metadata>

事实上，如果你查看supported SVG tags 的列表，metadata 甚至不包括在内，因此可以直接删除此部分，因为它不会影响视觉输出。另请注意，xml:space 之类的命名空间属性也不起作用：

<text xml:space="preserve" x="87.802124" y="124.42228" style="font-size:10.13467216px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans">

JSX 使用 className 属性而不是 class。 这是必要的，因为 class 是 Javascript 中的保留关键字，所以像这样：
```
<path class="tooth-11 tooth-11-parent" />
```
应该变成这样：
```
<path className="tooth-11 tooth-11-parent" />
```

JSX 中的 style 属性采用 Javascript 对象， 不是字符串文字。所以像这样的价值观：

<path style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>

需要变成：

<path style={{fill: 'none', stroke: '#000000', strokeWidth: 1, strokeLinecap: 'round', strokeLinejoin: 'miter', strokeMiterlimit: 4, strokeOpacity: 1, strokeDasharray: 'none'}} />

好的，有很多变化！但作为对阅读本文的奖励，我可以让你知道有一种简单的方法可以进行大部分转换：React 文档站点上的this page 可以让你粘贴任意 HTML sn-ps 并输出相应的 JSX。似乎这并没有解决我上面提到的命名空间问题，但是通过一些手动修复，您最终可以得到一些有效的 JSX，它将 display nicely。

【讨论】：

链接到 JSX 编译器的 HTML 页面实际上不起作用。粘贴带有命名空间属性的 HTML 会生成带有 JSX 的代码，该代码会保留在运行时会失败的命名空间属性。
@izk 没错，答案的最后一句中提到了这一点作为警告：“......这不解决我上面提到的命名空间问题......”跨度>