Einbetten von SVG in ReactJS

Ist es möglich, SVG-Markup in eine ReactJS-Komponente einzubetten?

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

Ergebnisse im Fehler:

Namespace-Attribute werden nicht unterstützt. ReactJSX ist kein XML.

Was ist der leichteste Weg, dies zu tun. Die Verwendung von React ART ist für das, was ich versuche, ein Übermaß.

Update 27.05.2016

Ab React v15 entspricht die Unterstützung für SVG in React (nahezu?) 100% der aktuellen Browserunterstützung für SVG ( Quelle ). Sie müssen nur einige Syntaxtransformationen anwenden, um JSX-kompatibel zu machen, wie Sie es bereits für HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}) tun müssen . xlink:hrefEntfernen Sie für jedes Namespace-Attribut (durch Doppelpunkte getrennt) z. B. das :und schreiben Sie den zweiten Teil des Attributs groß, z xlinkHref. Hier ist ein Beispiel eines svg mit <defs>, <use>und Inline - Styles:

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>
    );
}

Funktionierende Codepen-Demo

Weitere Informationen zur spezifischen Unterstützung finden Sie in der Liste der unterstützten SVG-Attribute in den Dokumenten . Und hier ist das (jetzt geschlossene) GitHub-Problem , bei dem die Unterstützung für SVG-Attribute mit Namespace verfolgt wurde.

Vorherige Antwort

Sie können eine einfache SVG-Einbettung durchführen, ohne sie verwenden zu müssen, dangerouslySetInnerHTMLindem Sie nur die Namespace-Attribute entfernen. Zum Beispiel funktioniert dies:

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

An diesem Punkt können Sie darüber nachdenken, Requisiten wie filloder was auch immer nützlich sein könnte, um es zu konfigurieren.

Wenn Sie nur eine statische SVG-Zeichenfolge haben, die Sie einschließen möchten, können Sie Folgendes verwenden dangerouslySetInnerHTML:

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

und React wird das Markup direkt einschließen, ohne es überhaupt zu verarbeiten.

Laut einem Reaktionsentwickler benötigen Sie den Namespace xmlns nicht. Wenn Sie das Attribut benötigen, können xlink:hrefSie xlinkHref aus Reaktion 0.14 verwenden

Beispiel

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

Wenn Sie es aus einer Datei laden möchten, können Sie versuchen, React-inlinesvg zu verwenden - das ist ziemlich einfach und unkompliziert.

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>