将SVG嵌入到ReactJS中

Question

是否可以将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 React之类的东西对于我想做的事情来说是过大的。

Answer 1

更新2016-05-27

从React
v15开始，React中对SVG的支持与当前浏览器对SVG的支持（接近？）达到100％奇偶校验（源）。您只需要应用一些语法转换就可以使其与JSX兼容，就像您已经对HTML所做的一样（class→ className，style="color: purple"→ style={{color: 'purple'}}）。对于任何命名空间（用冒号分隔）的属性，例如xlink:href，删除:并大写该属性的第二部分，例如xlinkHref。下面是与SVG的例子<defs>，<use>以及内嵌样式：

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，或者其他可能对配置有用的道具。