将 SVG 嵌入 ReactJS

Posted 2023-02-22

【中文标题】将 SVG 嵌入 ReactJS

【英文标题】：Embedding SVG into 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 解析。

【参考方案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
            
            
            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, .class2fill: #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' />

【讨论】：

该问题要求专门嵌入svg inline。

如果你需要改变颜色怎么办？

我相信这不是最初的要求

【参考方案6】：

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

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

【参考方案7】：

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

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

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