是否可以将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之类的东西来做我想做的事太过分了.
是否可以将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之类的东西来做我想做的事太过分了.
Update 2016-05-27
从React v15开始,React中对SVG的支持(接近?)与当前对SVG的浏览器支持(source)source%对等.您只需要应用一些语法转换,使其与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.下面是(现已关闭)GitHub issue,它跟踪了对名称空间SVG属性的支持.
Previous answer
只需剥离名称空间属性,就可以实现简单的SVG嵌入,而无需使用dangerouslySetInnerHTML
.例如,这是有效的:
render: function() {
return (
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"/>
</svg>
);
}
在这一点上,你可以考虑添加props ,比如fill
,或者其他可能有用的配置.