将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这样的东西对于我正在尝试做的事来说是过度的。

Answer 1

更新2016-05-27

从React v15开始，React对SVG的支持（接近？）与当前浏览器对SVG（ 源代码 ）的支持有100％的兼容性。 您只需要应用一些语法转换就可以兼容JSX， 就像您已经为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> ); } 

工作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。

Answer 2

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

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

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

Answer 3

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

例

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

Answer 4

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