L'incorporation de SVG dans ReactJS

Est possible d'intégrer du SVG balisage dans un ReactJS composant?

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

Les résultats dans l'erreur:

De l'espace de noms d'attributs ne sont pas pris en charge. ReactJSX n'est pas XML.

Ce qui est le plus léger moyen de le faire. En utilisant quelque chose comme Réagir ART est overkill pour ce que je suis en train de faire.

Pouvez-vous créer un jsbin? Il pourrait être aussi simple que de changer votre ouverture de balise SVG juste <svg id="Layer_1"> (ou encore mieux, sans l'id). Edit: voici un exemple: jsbin.com/nifemuwi/2/edit?js,sortie
Merci! C'était que simple dans ce cas. Regarder Ben la réponse de si. Bon à savoir vous pouvez obtenir autour de la jsx analyse lorsque vous en avez besoin.

InformationsquelleAutor nicholas | 2014-05-01

156

Mise à jour 2016-05-27

Que de Réagir v15, le support de SVG dans de Réagir est (proche?) 100% de la parité avec le navigateur actuel de soutien pour le format SVG (source). Vous avez juste besoin d'appliquer une partie de la syntaxe de transformations pour le rendre compatible JSX, comme vous avez déjà commencé à le faire pour le HTML (class → className, style="color: purple" → style={{color: 'purple'}}). Pour n'importe quel espace de noms (séparées par des virgules) attribut, par exemple xlink:href, retirez le : et de tirer profit de la seconde partie de l'attribut, par exemple xlinkHref. Voici un exemple d'un svg avec <defs>, <use>, et des styles en ligne:
```
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>
    );
}
```
Travail codepen démo

Pour plus de détails sur le soutien spécifique, vérifiez les docs’ liste des attributs SVG. Et voici le (maintenant fermé) GitHub problème, qui s'est déplacé de soutien pour des espaces de SVG attributs.

Réponse précédente

Vous pouvez faire un simple SVG intégrer sans avoir à utiliser dangerouslySetInnerHTML simplement en enlevant l'espace de noms d'attributs. Par exemple, cela fonctionne:
```
        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }
```
À quel point vous pouvez penser à ajouter des accessoires comme fill, ou tout autre chose qui pourrait être utile à configurer.
- Est-ce de travailler dans ReactNative?
- Excellente question! Je ne sais pas, je n'ai jamais utilisé de Réagir Natif. Avez-vous de lui donner un aller?
- Plusieurs noms de Classe Css avec la tique char ne fonctionne pas: '.class1, .class2{fill: #005baa;} " Comment puis-je résoudre ce problème?
- Pouvez-vous me donner un exemple de situation où il ne fonctionne pas? Je viens de fourche mon démo originale pour ajouter classB et cela a fonctionné: codepen.io/acusti/stylo/BVJzNg
InformationsquelleAutor Andrew Patton
50

Si vous venez d'avoir une statique svg chaîne que vous souhaitez inclure, vous pouvez utiliser dangerouslySetInnerHTML:
```
render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}
```
et de Réagir comprendra le balisage directement, sans traitement du tout.
- Je suis à la contrôle de certains chemins à l'intérieur de SVG à l'aide de Réagir, mais de Réagir ne semble pas soutenir les éléments de filtre. Est-il un moyen pour soutenir cela? Semble comme dangerouslySetInnerHTML ne fonctionnera pas parce que je ne peux pas mettre un span à l'intérieur d'un SVG et je ne peux pas l'utiliser pour définir le filtre d'attribut sur les chemins. Je ne crois pas qu'il existe un moyen de créer Réagir éléments, comme d'habitude, mais ont passer tous les attributs verbatim les éléments du DOM?
- Comme 2019, semble que vous pouvez utiliser dangerouslySetInnerHTML encore, mais je ne pouvais pas faire de l'ombre filtre fonctionne sur Chrome à l'aide de dangerouslySetInnerHTML, mais ça fonctionne sur Firefox.
InformationsquelleAutor Sophie Alpert
26

Selon une réagir développeur, vous n'avez pas besoin de l'espace de noms xmlns. Si vous avez besoin de l'attribut xlink:href vous pouvez utiliser xlinkHref de réagir 0.14

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

Si vous souhaitez le charger à partir d'un fichier, vous pouvez essayer d'utiliser Réagir-inlinesvg - c'est assez simple et directe.

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>

InformationsquelleAutor Youkko

Vous devez vous connecter pour publier un commentaire.