在 ReactJS 中嵌入 SVG

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

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

结果是:

不支持命名空间属性。

做这件事最轻松的方法是什么。使用像 对抗逆转录病毒这样的东西对于我正在尝试做的事情来说是过分的。

164142 次浏览
小开

如果只有一个要包含的静态 svg 字符串，可以使用 dangerouslySetInnerHTML:

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

React 将直接包含标记，而不需要对其进行任何处理。

小开
最佳答案

更新2016-05-27

在 React v15中，React 中对 SVG 的支持是(接近?)SVG (来源)与当前浏览器支持的100% 奇偶性。您只需要应用一些语法转换来使其与 JSX 兼容，即 className0(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>
);
}

正在进行代码演示

有关具体支持的详细信息，请查看文档的 支持的 SVG 属性列表。下面是(现在已经关闭的) GitHub 的问题，它跟踪对名称空间 SVG 属性的支持。

前一个答案

您可以做一个简单的 SVG 嵌入，而不必使用 dangerouslySetInnerHTML，只需剥离名称空间属性。例如，这种方法是有效的:

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

在这一点上，您可以考虑添加像 fill这样的道具，或任何其他可能有用的配置。

小开

根据反应开发人员 ，您不需要名称空间 xmlns。如果需要属性 xlink:href，可以使用 response 0.14中的 xlinkHref

例子

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

如果你想从一个文件加载它，你可以尝试使用 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>
小开

您可以导入 svg，并将其用作图像

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

在 img 标签中显示

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

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

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

小开

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

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

您复制一个 svg，它将提供一个 response 函数组件，并将 svg 转换为 response 代码。


提交答案