将SVGembedded到ReactJS中

是否可以将SVG标记embeddedReactJS组件?

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

结果在错误中:

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

这样做的最轻的方法是什么? 使用像React ART这样的东西对于我正在尝试做的事来说是过度的。

更新2016-05-27

从React v15开始,React对SVG的支持(接近?)与当前浏览器对SVG( 源代码 )的支持有100%的兼容性。 您只需要应用一些语法转换就可以兼容JSX, 就像您已经为HTML所做的一样 ( classclassNamestyle="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> ); } 

工作codepen演示

有关特定支持的更多详细信息,请查看支持的SVG属性的文档列表 。 这里是(closures的) GitHub问题 ,它跟踪了名称空间SVG属性的支持。


以前的答案

你可以做一个简单的SVGembedded,而不必使用dangerouslySetInnerHTML的SetInnerHTML只是剥离命名空间属性。 例如,这工作:

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

在这一点上,你可以考虑添加像fill道具,或其他任何可能有用的configuration。

如果你只是想要包含一个静态的svgstring,你可以使用dangerouslySetInnerHTML

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

React将直接包含标记而不处理它。

根据一个反应开发者 ,你不需要命名空间xmlns。 如果你需要xlink:href属性,你可以使用xlinkHref来反应0.14

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

如果你想从一个文件加载它,你可以尝试使用React-inlinesvg – 这非常简单直接。