web-dev-qa-db-ja.com

SVGをReactJSに埋め込む

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 ART のようなものを使用することは、私がやろうとしていることに対してはやり過ぎです。

javascriptsvgreactjs
111
nicholas

2016-05-27を更新

React v15の時点で、ReactでのSVGのサポートは、SVGの現在のブラウザーサポートと100％同等です（ source ）。 JSX互換にするために、いくつかの構文変換を適用する必要があります。 HTMLで既に行っているように （classname__→classNamename__、style="color: purple"→style={{color: 'purple'}}）。名前空間（コロンで区切られた）属性の場合、たとえばxlink:href、:を削除し、属性の2番目の部分を大文字にします。 xlinkHrefname__。 <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>
    );
}

動作するコードペンデモ

特定のサポートの詳細については、ドキュメントの サポートされているSVG属性のリストを確認してください 。そして、ここに（現在は閉じられています） GitHubの問題 名前空間付きSVG属性のサポートを追跡しました。

前の回答

名前空間の属性を削除するだけで、dangerouslySetInnerHTMLname__を使用せずに簡単なSVG埋め込みを実行できます。たとえば、これは機能します：

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

その時点で、fillname__などの小道具の追加、または構成に役立つその他の小道具の追加について考えることができます。

158
Andrew Patton

含める静的svg文字列がある場合は、dangerouslySetInnerHTMLを使用できます。

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

Reactは、マークアップをまったく処理せずに直接含めます。

50
Sophie Alpert

React Developerによると 、名前空間xmlnsは必要ありません。属性xlink:hrefが必要な場合は、react 0.14のxlinkHrefを使用できます

例

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

ファイルからロードする場合は、 React-inlinesvg を使用してみてください。これは非常に単純で簡単です。

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>
8
Youkko