将 SVG 嵌入 ReactJS答案

【问题标题】：Embedding SVG into ReactJS将 SVG 嵌入 ReactJS
【发布时间】：2014-06-17 15:02:52
【问题描述】：

是否可以将 SVG 标记嵌入到 ReactJS 组件中？

render: function() {
  return (
    <span>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
    </span>
  );
}

导致错误：

不支持命名空间属性。 ReactJSX 不是 XML。

这样做最简单的方法是什么。使用React ART 之类的东西对于我正在尝试做的事情来说太过分了。

【问题讨论】：

你能创建一个jsbin吗？它可能就像将您的开始 SVG 标记更改为 <svg id="Layer_1"> 一样简单（或者甚至更好，没有 id）。编辑：这是一个例子：jsbin.com/nifemuwi/2/edit?js,output
@FakeRainBrigand 谢谢！在这种情况下就是这么简单。不过看看本的回答。很高兴知道您可以在需要时绕过 jsx 解析。

标签： javascript svg reactjs

【解决方案1】：

2016 年 5 月 27 日更新

从 React v15 开始，React 中对 SVG 的支持（接近？）与当前浏览器对 SVG 的支持（source）100% 相同。您只需要应用一些语法转换以使其与 JSX 兼容，like you already have to do for HTML (class → className, style="color: purple" → style={{color: 'purple'}})。对于任何命名空间（冒号分隔）的属性，例如xlink:href，删除 : 并将属性的第二部分大写，例如xlinkHref。下面是一个带有 <defs>、<use> 和内联样式的 svg 示例：

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

Working codepen demo

有关特定支持的更多详细信息，请查看文档的list of supported SVG attributes。这是（现已关闭）GitHub issue，它跟踪了对命名空间 SVG 属性的支持。

上一个答案

您可以进行简单的 SVG 嵌入，而无需使用 dangerouslySetInnerHTML，只需剥离命名空间属性即可。例如，这有效：

        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

此时您可以考虑添加诸如 fill 之类的属性，或者任何其他可能有用的配置。

【讨论】：

@ChinonsoChukwuogor 好问题！我不知道，我从来没有使用过 React Native。你试一试了吗？
@AndrewPatton 带有刻度字符的多个 Css 类名称不起作用：'.class1, .class2{fill: #005baa;}' 我该如何解决？
@HelloWorld 你能举个例子吗？我刚刚分叉了我的原始演示以添加 classB 并且它起作用了：codepen.io/acusti/pen/BVJzNg
谢谢，从这里开始，我设法从文件中导入了一个 svg 作为 React 组件，没有任何加载器，我刚刚删除了 ``` xmlns:osb="openswatchbook.org/uri/2009/osb"`` ` 来自 svg 标签，只留下 xlmns。显然，这都是关于标签解析的。以防万一，我也遵循了这些步骤：blog.logrocket.com/how-to-use-svgs-in-react
为什么人们会容忍 JSX？

【解决方案2】：

如果您只想包含一个静态 svg 字符串，可以使用dangerouslySetInnerHTML：

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}

并且 React 将直接包含标记而不对其进行处理。

【讨论】：

我正在使用 React 控制 SVG 中的一些路径，但 React 似乎不支持过滤器元素。有没有办法支持这一点？似乎 dangerouslySetInnerHTML 不起作用，因为我无法在 SVG 中放置跨度，也无法使用它来设置路径上的过滤器属性。我认为没有办法像往常一样创建 React 元素，但让它们将所有属性逐字传递给 DOM 元素？
作为 2019 年，您似乎可以使用 dangerouslySetInnerHTML，但我仍然无法使用 dangerouslySetInnerHTML 在 Chrome 上制作阴影过滤器，但它可以在 Firefox 上使用。

【解决方案3】：

According to a react developer，你不需要命名空间 xmlns。如果你需要 xlink:href 属性，你可以使用 react 0.14 中的 xlinkHref

例子

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}

【讨论】：

【解决方案4】：

如果您想从文件中加载它，您可以尝试使用React-inlinesvg - 这非常简单直接。

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>

【讨论】：

【解决方案5】：

您可以导入 svg 并像图像一样使用它

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

并在 img 标签中显示它

<img src={chatSVG} className='iconChat' alt="Icon chat"/>

【讨论】：

该问题要求专门嵌入svg inline。
如果你需要改变颜色怎么办？
我相信这不是最初的要求

【解决方案6】：

有一个包可以为您转换它并将 svg 作为字符串返回以实现到您的 reactJS 文件中。

https://www.npmjs.com/package/convert-svg-react

【讨论】：

【解决方案7】：

我找到的最好方法是这个网站

https://react-svgr.com/playground/

您复制一个 svg，它会为您提供一个反应功能组件，并将 svg 转换为反应代码。

【讨论】：