Quelqu'un travaille sur ça ? Je serais ravi d'implémenter la balise filter .

preserveAspectRatio semble également manquer : http://jsfiddle.net/jonase/kb3gN/3025/

Dois-je créer un PR pour cela ou préférez-vous d'abord collecter tous les attributs/tags manquants et créer ensuite un seul patch ?

[modifier] preserveAspectRatio a été ajouté dans commit https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Salut.

les attributs marker* ont été ajoutés grâce à @cassus en #1738 comme indiqué ci-dessus.

Qu'en est-il de l'ajout de l'élément SVG <marker> associé ?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Je viens de réaliser que j'en ai besoin aussi. En voici un bon aperçu : http://tutorials.jenkov.com/svg/marker-element.html

Cette approche « ajouter un élément aléatoire et un attribut ici et là selon qu'une personne en a besoin » est devenue incontrôlable. Donc, nous devons soit prendre en charge tout ou rien (ou bien ajouter un ensemble raisonnable de choses de temps en temps, puis geler là-bas).

J'ai gratté http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html pour _presque_ tout (sans compter les attributs d'espace de noms) et j'ai trouvé ceci : https://github.com/zpao/ réagir/comparer/fuck-svg.

Cependant, cela ajoute environ 2 Ko à notre version minifiée (bien que cela écraserait bien avec le compilateur de fermeture) et je ne veux pas augmenter cette taille pour le moment. Nous avons parlé de faire un build SVG séparé. Ou l'expédier séparément en tant qu'addon.

@zpao tu as raison. La prise en charge complète de SVG pourrait être un addon. Pour ce faire, un avertissement de dépréciation devra être défini pour informer par exemple que React.DOM.circle deviendra React.SVG.circle

+1 pour React.SVG.circle

@zpao
Un module complémentaire SVG complet semble être une bonne approche. De nombreux projets n'ont pas besoin de SVG, nous ne devrions donc pas alourdir le code pour eux. D'autres projets ont besoin et cela n'a pas de sens de n'aller qu'à mi-chemin sur le support.

+1

2069 demandes de support pour l'image.

+1 pour la prise en charge des images

+1 pour la prise en charge des images également

+1 pour l'assistance <use> . Nous l'utilisons pour notre jeu d'icônes svg. Nous essayons de dangerouslySetHTML pour que cela fonctionne, cependant, le bouillonnement d'événements ne fonctionne pas avec cela.

strokeDashoffset manquant. Je veux l'utiliser pour une barre de progression, comme ceci : http://codepen.io/JMChristensen/pen/Ablch

+1 pour strokeDashoffset

voulez aussi l'utiliser pour une barre de progression.

Il me manque alignment-baseline lorsque je travaille avec <text>

Peut-être que quelqu'un a la volonté de parcourir http://www.w3.org/TR/SVG/Overview.html et d'obtenir tous les attributs et propriétés ? (Il pourrait y avoir une meilleure URL à cet effet, pas sûr...)

Une autre aide serait de savoir où changer cela dans le code source et les tests afin qu'il soit plus facile de faire un commit pour réagir.

FWIW, la plupart des attributs peuvent toujours être appliqués à l'aide de l'attribut style.

<path style={{strokeDashoffset: 100}} />

@syranide Je l'ai fait (principalement automatisé car ce serait de la folie de le faire manuellement) - https://github.com/zpao/react/compare/fuck-svg. Voir mon commentaire précédent sur les raisons pour lesquelles cela n'est pas déjà fusionné.

@ThomasDeutsch Voir la plupart des demandes d'extraction liées à SVG précédentes. Cela dit, je préfère trouver un plan que de les ajouter un par un (je vous renvoie également à mon commentaire précédent).

+1 pour textPath - J'en ai besoin pour un projet sur lequel je travaille actuellement, et en ce moment je suis en train de pirater une mauvaise solution. Je serais heureux de contribuer à une implémentation d'un pack de plugins React SVG

:+1: pour un module complémentaire SVG complet. Des estimations sur quand cela serait expédié?

+1 pour objet étranger

+1 pour objet étranger

L'attribut xlink:href afin d'utiliser des sprites svg.

+1 pour l'assistance <use>

Utilise actuellement https://www.npmjs.org/package/react-inlinesvg comme

Attributs : maskUnits & maskContentUnits (# 2056)

attribut de masque #2535

patternTransform

attribut de texte text-anchor

+1 pour textPath

+1 pour <use> pour la gestion des icônes svg.

+1 pour un module complémentaire SVG. Je n'ai actuellement besoin que de <clipPath> pour un projet, mais qui sait de quoi j'aurai besoin à l'avenir. Un module complémentaire complet serait très utile.

+1 pour un module complémentaire.

Nous prévoyons de faire un usage intensif de SVG avec React, donc un module complémentaire SVG complet pour des projets comme le nôtre semble être une excellente idée.

+1 pour textPath et une prise en charge plus complète de svg en général.

Jusqu'à ce que SVG soit entièrement pris en charge, une solution de contournement décente consiste à indiquer à React par quels attributs svg il doit passer pour rendre et déclarer explicitement les éléments dont vous avez besoin. Par exemple, <use> est accessible comme ceci :

var DOMProperty = require('react/lib/DOMProperty');

// xlink:href is not a standardly-supported svg attribute, but you can tell
// React that it is ok.
DOMProperty.injection.injectDOMPropertyConfig({
  isCustomAttribute: function (attributeName) {
    return (attributeName === 'xlink:href');
  }
});

var SvgButton = React.createClass({
  render: function render() {
    var use = React.createElement('use', {
      'xlink:href': '#' + this.props.icon
    });
    return (
      <button>
        <svg>
          { use }
        </svg>
        <div>{ this.props.label }</div>
      </button>
    );
 });

@jeffkole Soyez prudent lorsque vous faites cela - React appellera toujours setAttribute (pas setAttributeNS) si l'attribut change, et la mise à jour ne fonctionnera probablement pas correctement.

@spicyj Je ne vois aucun support d'espace de noms dans React (c'est-à-dire qu'il n'y a pas d'appel à setAttributeNS dans la base de code). Une suggestion sur une manière appropriée de définir un attribut avec un espace de noms ?

Nous n'avons pas compris comment les attributs d'espace de noms fonctionneront et nous ne les prenons pas en charge pour le moment, désolé.

vector-effect serait sympa. Existe-t-il un autre moyen de conserver des traits de largeur fixe sans cela qui peut être utilisé en attendant ?

+1 pour objet étranger

Juste en faisant référence à mon PR pour les attributs de base de texte : #2697

oh merde j'ai besoin du tag use :déçu:

Je me suis résigné à utiliser un composant personnalisé qui a une fonction de rendu qui renvoie

<svg dangerouslySetInnerHTML={{ __html: '<use xlink:href="#' + this.props.icon + '"/>' }} />

C'est moche, mais ça marche.

:+1: à ce sujet

+1 activé pour la prise en charge complète de svg dans les addons

:+1:

@zpao @spicyj existe-t-il un moyen pris en charge d'ajouter ces éléments SVG individuels à React sans patcher ReactDOM et SVGDOMPropertyConfig ?

Non désolé.

+1 pour l'image et l'objet étranger

+1 pour objet étranger

animate ne fonctionne pas et peut-être certains de ses attributs : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Quel est l'état de la prise en charge de SVG dans les addons ? Je viens de tomber sur ça aujourd'hui :-(

cc @xymostech @MichelleTodd

+1 pour les attributs avec espace de noms.

+1 activé pour la prise en charge complète de svg dans les addons

+1000 pour la prise en charge des attributs SVG :-)

+1 pour le soutienles attributs

Demande d'ajout d'attribut "fill-rule", peut-être en tant que "fillRule"

J'aimerais aussi voir un addon SVG :+1 :

React core team, y a-t-il des mouvements/discussions en coulisses à ce sujet ?

Pas sur ceci spécifiquement, mais #3718, #3763 sont tous deux des choses SVG en cours de travail et #3067 est également lié à ce changement d'attributs.

+1 pour une prise en charge complète de SVG. Avant que cela ne se produise, j'aurai besoin d'un moyen de créer des balises et des attributs personnalisés. Quelqu'un peut-il m'aider s'il vous plaît?

L'élément marqueur est également manquant (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca essayez https://gist.github.com/akre54/80eaa63762ea499029f0 en attendant

3945 Ces balises ne sont pas prises en charge dans React SVG pour le marqueur : refx, refy, orient

:+1: pour les marqueurs !

+1 pour SVG toutes choses.

:+1

que diriez-vous de la prise en charge des propriétés animateTransform

<path
    d="M120 60c0-31.13-26.86-60-60-60">
    <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 60 60"
          to="360 60 60"
          dur="1.5s"
          repeatCount="indefinite" />
</path>

actuellement se termine juste avec

<path d="M120 60c0-31.13-26.86-60-60-60" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2">
    <animateTransform type="rotate" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2.0"></animateTransform>
</path>

+1 pour l'image

+ Tous les SVG sont pris en charge

+1 pour le filtre

+1 pour l'aide à l'utilisation !

+1 pour les attributs avec espace de noms

+1 pour la prise en charge des attributs use et filter

+1 pour l'assistance <image> . J'ai besoin de réagir à rendre un SVG en ligne qui a une image à l' intérieur d' un chemin de détourage, et il est enferrons sur le xmlns:xlink="http://www.w3.org/1999/xlink" attr dans le <svg> étiquette.

+1 pour filter

Compte tenu du commentaire de @zpao , ce problème doit-il être verrouillé ? Ou du moins, pouvons-nous mettre à jour le PO avec ces informations ? Je suis abonné au fil de discussion pour les mises à jour, mais le commentaire de @zpao est enterré (avec le fait que le travail a déjà été fait) et c'est un peu déroutant pour quiconque n'a pas lu l'intégralité du fil.

Le commentaire de @zpao explique la décision sur la raison pour laquelle il n'est pas actuellement intégré à réagir, mais existe-t-il une meilleure explication sur la raison pour laquelle un module complémentaire n'existe pas ?
Est-ce quelque chose qui peut encore être exploré?

+1 pour le marqueur : refx, refy, orient

+1 pour les attributs du texte : rotation, ligne de base dominante

http://www.w3.org/TR/SVG/text.html#TextElementRotateAttribute

+1 module complémentaire

+1 module complémentaire

En fait, React est en train d'être divisé en le noyau 'react' et le dom 'react-dom', et je suppose que c'est là que 'react-svg' entrera enfin en jeu

+1 pour le filtre.

vector-effect attribut s'il vous plaît

Je pense que les personnes qui demandent des balises/attributs SVG lorsqu'elles en ont besoin est un très mauvais modèle pour React. C'est idiot que je doive utiliser dangerouslySetInnerHTML juste pour rendre un SVG fonctionnel sur la page. Cela étant dit, voici quelques éléments manquants :

_Mots clés:_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Les attributs:_

• filterUnits
• stdDeviation
• values
• in
• operator

et probablement beaucoup plus dans les deux catégories. Ce ne sont que quelques-uns du code SVG spécifique avec lequel je travaille.

+1 pour vector-effect

+1 pour stdDeviation

+1 pour un React.SVG séparé et complet. J'adore travailler avec SVG dans React jusqu'à présent, mais l'incomplétude de la prise en charge en fait un choix interdit pour toute application semi-complexe.

@spicyj a un plan pour éliminer le besoin d'une configuration distincte que nous devons continuer à mettre à jour. Espérons que ce sera bientôt terminé. En attendant, tenez-vous bien.

+1 pour animerTransform

+1 pour la ligne de base dominante (#3199.)

Comme @zpao l'a dit, nous allons résoudre ce problème pour de bon bientôt afin que tous les attributs puissent être utilisés.

Verrouillage de ce problème jusque-là.

Cela a été corrigé dans https://github.com/facebook/react/pull/5714.

5714 a été rétabli dans #6243, et nous avons donc toujours besoin d'une liste blanche d'attributs. La bonne nouvelle, cependant, est que #6243 contient des attributs grattés pour MDN, nous nous attendons donc à ce qu'il couvre 95% des cas d'utilisation . J'ai lu tout ce numéro et les problèmes liés et les relations publiques et j'ai ajouté manuellement deux propriétés manquantes ( focusable et vector-effect ) dans #6267. Je m'attends à ce que ces changements atterrissent dans la v15.

Fait intéressant, je ne suis pas sûr que la liste blanche _tag_ soit plus pertinente. Jusqu'à présent, j'ai pu utiliser <marker> , <textPath> , <feGaussianBlur> et d'autres balises demandées dans ce numéro et dans les PR liés sans problème sur le maître. Je vois que fbjs maintient toujours une liste blanche de balises SVG et je ne connais pas assez bien la base de code pour dire pourquoi les balises manquantes ont fonctionné pour moi aujourd'hui, donc j'espère que @zpao ou @spicyj pourront clarifier cela, et si nous devons également y ajouter les balises manquantes, pour compléter #6243.

Je déverrouille ce problème car la liste blanche des attributs est toujours d'actualité, mais j'espère que nous verrons beaucoup moins de demandes maintenant que la plupart des attributs qui sont à la fois dans la spécification et implémentés par les navigateurs sont pris en charge. Si quelque chose n'est toujours pas pris en charge dans la version finale v15, veuillez nous le faire savoir ici.

Cette note ne s'applique pas à la v15 RC1 qui transmet tous les attributs SVG.

J'ai remarqué qu'il semble y avoir beaucoup de confusion à propos de l'attribut xlink:href . Il _est_ actuellement pris en charge mais vous auriez besoin de l'écrire d'une manière différente :

<use xlinkHref="#shape" x="50" y="50" />

React le transformera correctement en xlink:href , même en 0.14.x. Voir ce violon pour un exemple.

Pour mon cas d'utilisation, j'avais besoin de React pour reconnaître certains éléments de filtre comme feFuncR , en particulier leurs attributs ( slope , intercept , etc). Cela semble bien dans 15.0-rc2, mais pour 0.14.x j'ai contourné cela en ajoutant ces attributs au dictionnaire exporté par react/lib/SVGDOMPropertyConfig avant d'importer d'abord react / react-dom lui-même. Par exemple:

// Needed to set correct xmlns on <svg> and to preserve attributes on feFunc*.
// Required for 0.14.x. May become unnecessary with 15.x

var SVGDOMPropertyConfig = require("react/lib/SVGDOMPropertyConfig");

var DOMProperty = require("react/lib/DOMProperty");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;

SVGDOMPropertyConfig.Properties.in = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.intercept = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.slope = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.xmlns = MUST_USE_ATTRIBUTE;

var React = require("react");
var render = require("react-dom").render;

C'est évidemment un hack mais je le trouve préférable à dangerouslySetInnerHTML

Bien que cela fonctionne, il ne s'agit pas d'une API officiellement exposée et peut se briser dans une version mineure ou un correctif. Vous pouvez l'utiliser mais à vos risques et périls. S'il manque encore quelque chose, veuillez travailler avec nous afin que nous l'ajoutions. Je suis heureux d'apprendre que vous n'avez pas de problèmes avec 15 RC2.

Ouais, absolument. Je ne l'utilise que jusqu'à ce que 15 sorte du statut RC.

Assez heureux pour la prise en charge (presque) complète de SVG dans la v15.0 mais je me rends compte que certains attributs avec espace de noms comme xmlns et xmlnsXlink ne pouvaient pas s'appliquer lors du rendu, et c'est ok lors de l'affichage le svg dans le navigateur.

Si vous souhaitez créer une image .svg , ces attributs sont nécessaires.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Donc, faire le code ci-dessus ne fonctionnera pas.

Probablement lié au fait que :

... grâce à l'utilisation de document.createElement , nous n'avons plus besoin de maintenir une liste de balises SVG, donc toutes les balises SVG qui n'étaient pas prises en charge auparavant devraient fonctionner correctement dans React 15

et non document.createElementNS .

et non document.createElementNS.

L'article de blog est un peu trop simplifié, mais createElementNS est utilisé lorsque nous sommes sous une balise <svg> . Si cela ne se produit pas, pouvez-vous s'il vous plaît déposer un problème séparé décrivant le problème, avec un JSFiddle qui le reproduit ? Merci!

Merci @gaearon. Je pense que cela se produit lors du rendu du svg dans le navigateur via ReactDOM . Le problème est probablement lié à ReactDOMServer .

Voici un stylo qui montre le SVG rendu et le code généré par renderToStaticMarkup() où il manque au moins xmlNS et xmlnsXlink attrs.

Si c'est le cas, je pourrais déposer cette question séparément.

Oui, xmlns et xmlns:Xlink sont manquants. https://github.com/facebook/react/pull/6471 a des travaux en cours pour l'ajouter.

Je ne vois toujours pas <animate> et <animateTransform> dans la liste des balises prises en charge. Y a-t-il une raison pour laquelle vous avez choisi de ne pas le soutenir ?

@shilpan

Toutes les balises sont désormais prises en charge. La liste indique uniquement les balises prises en charge en tant que fonctions d'usine React.DOM.* :

Les éléments SVG suivants sont pris en charge

(c'est moi qui souligne)

Si vous utilisez JSX, vous n'avez pas du tout besoin de vous en soucier : écrire <animate> et <animateTransform> fonctionnera simplement parce que JSX ne repose pas sur les usines React.DOM.* .

Même si vous n'utilisez pas JSX, vous pouvez utiliser React.createElement('animate', ...) qui fonctionnera très bien, ou créer votre propre fonction d'usine : var animate = React.createFactory('animate") .

+1 pour l'ajout de la prise en charge de xmlns .... En attendant, si quelqu'un est intéressé par une solution de contournement (dont j'avais besoin pour pouvoir prendre en charge IE9-11), voici ce que j'ai proposé :

// explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
                               <use xlink:href="#linkToSymbolId"></use>
                        <svg/>`

return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/>