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ß.
javascript
svg
reactjs
Nikolaus
quelle
quelle
<svg id="Layer_1">
(oder noch besser ohne ID) zu ändern . Bearbeiten: Hier ist ein Beispiel: jsbin.com/nifemuwi/2/edit?js,outputAntworten:
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:href
Entfernen Sie für jedes Namespace-Attribut (durch Doppelpunkte getrennt) z. B. das:
und schreiben Sie den zweiten Teil des Attributs groß, zxlinkHref
. Hier ist ein Beispiel eines svg mit<defs>
,<use>
und Inline - Styles: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,
dangerouslySetInnerHTML
indem Sie nur die Namespace-Attribute entfernen. Zum Beispiel funktioniert dies:An diesem Punkt können Sie darüber nachdenken, Requisiten wie
fill
oder was auch immer nützlich sein könnte, um es zu konfigurieren.quelle
.class1, .class2{fill: #005baa;}
' Wie kann ich das beheben?classB
und es hat funktioniert: codepen.io/acusti/pen/BVJzNgWenn Sie nur eine statische SVG-Zeichenfolge haben, die Sie einschließen möchten, können Sie Folgendes verwenden
dangerouslySetInnerHTML
:und React wird das Markup direkt einschließen, ohne es überhaupt zu verarbeiten.
quelle
Laut einem Reaktionsentwickler benötigen Sie den Namespace xmlns nicht. Wenn Sie das Attribut benötigen, können
xlink:href
Sie xlinkHref aus Reaktion 0.14 verwendenBeispiel
quelle
Wenn Sie es aus einer Datei laden möchten, können Sie versuchen, React-inlinesvg zu verwenden - das ist ziemlich einfach und unkompliziert.
quelle