[解決済み] ReactJSにSVGを埋め込む

質問

SVGマークアップをReactJSコンポーネントに埋め込むことは可能でしょうか？

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

結果、エラーになる。

名前空間属性はサポートされていません。ReactJSXはXMLではありません。

一番軽い方法は何でしょう。以下のようなものを使用します。 リアクトART のようなものを使うのは、私がやろうとしていることのために、やりすぎです。

どのように解決するのですか？

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 を使わなくても、namespace属性を取り除くだけで、簡単なSVGの埋め込みができます。例えば、このように動作します。

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

この時点で、以下のようなプロップを追加することを考えることができます。 fill のようなプロップの追加や、その他設定するのに便利なものを考えることができます。