是否可以将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这样的东西对于我正在尝试做的事情来说太过分了。
答案 0 :(得分:148)
更新2016-05-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>
);
}
有关特定支持的详细信息,请查看文档“list of supported SVG attributes。这是跟踪对命名空间SVG属性的支持的(现已关闭)GitHub issue。
上一个回答
您可以通过剥离命名空间属性来执行简单的SVG嵌入,而无需使用dangerouslySetInnerHTML
。例如,这有效:
render: function() {
return (
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"/>
</svg>
);
}
此时您可以考虑添加fill
之类的道具,或其他可能有用的配置。
答案 1 :(得分:50)
如果您想要包含静态svg字符串,可以使用dangerouslySetInnerHTML
:
render: function() {
return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}
和React将直接包含标记而不进行处理。
答案 2 :(得分:26)
According to a react developer,你不需要命名空间xmlns。如果您需要属性xlink:href
,则可以使用xlinkHref from react 0.14
实施例
Icon = (props) => {
return <svg className="icon">
<use xlinkHref={ '#' + props.name }></use>
</svg>;
}
答案 3 :(得分:8)
如果您想从文件中加载它,可以尝试使用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>
答案 4 :(得分:1)
您可以导入svg,它像图片一样使用
import chatSVG from '../assets/images/undraw_typing_jie3.svg'
然后在img标签中添加它
<img src={chatSVG} className='iconChat' alt="Icon chat"/>
答案 5 :(得分:0)
有一个程序包可以将其转换为您,然后将svg作为字符串返回以实现到您的reactJS文件中。
答案 6 :(得分:0)
我找到的最好的方法是这个网站
https://react-svgr.com/playground/
您复制一个 svg,它会为您提供一个 react 功能组件,其中 svg 转换为 react 代码。