在ReactJS中嵌入SVG

Question

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

做这件事最轻的方法是什么。使用像反应艺术这样的东西对我试图做的事情来说是过度的。

Answer 1

更新2016-05-27

从React v15开始，React中对SVG的支持（接近？）100%与当前浏览器支持的SVG（源代码）奇偶性。您只需要应用一些语法转换来使其与JSX兼容，就像您已经为HTML所做的那样(class→classname，style=“color:purple”→style={{color:'purple'}})。对于任何命名空间（以冒号分隔）的属性，例如xlink:href，删除:并将属性的第二部分大写，例如xlinkhref。下面是一个具有 、 和内联样式的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>
    );
}

工作代码演示

以前的回答

只需剥离命名空间属性，就可以进行简单的SVG嵌入，而不必使用DangerouslySetInnerHTML。例如，这是有效的：

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

在这一点上，您可以考虑添加诸如fill之类的道具，或者其他任何可能对配置有用的东西。