¿Alguien está trabajando en esto? Me gustaría implementar la etiqueta filter .

preserveAspectRatio también parece faltar: http://jsfiddle.net/jonase/kb3gN/3025/

¿Debo crear un PR para esto o prefiere recopilar todos los atributos / etiquetas que faltan primero y luego crear un solo parche?

[editar] preserveAspectRatio se agregó en el compromiso https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Hola.

Los atributos de marcador * se han agregado gracias a @cassus en # 1738 como se indicó anteriormente.

¿Qué hay de agregar el elemento <marker> SVG relacionado?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Me acabo de dar cuenta de que también necesito esto. Aquí hay una buena descripción general: http://tutorials.jenkov.com/svg/marker-element.html

Este enfoque de "agregar un elemento aleatorio y un atributo aquí y allá según lo necesite 1 persona" se ha salido de control. Por lo tanto, debemos admitir todo o nada (o, alternativamente, agregar un conjunto razonable de cosas de vez en cuando y luego congelarnos allí).

Saqué http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html para _ casi_ todo (sin contar los atributos de espacio de nombres) y se me ocurrió esto: https://github.com/zpao/ reaccionar / comparar / fuck-svg.

Sin embargo, eso agrega ~ 2kb a nuestra compilación minificada (aunque se aplastaría bien con el compilador de cierre) y no quiero aumentar ese tamaño en este momento. Hemos hablado de hacer una compilación SVG separada. O enviarlo por separado como complemento.

@zpao tienes razón. El soporte completo de SVG podría ser un complemento. Para hacerlo, será necesario configurar una advertencia de depreciación para informar, por ejemplo, que React.DOM.circle se convertirá en React.SVG.circle

+1 para el círculo React.SVG.

@zpao
Un complemento SVG completo parece un buen enfoque. Muchos proyectos no necesitan ningún SVG, por lo que no deberíamos sobrecargar el código para ellos. Otros proyectos necesitan y no tiene sentido ir solo a la mitad del soporte.

+1

2069 solicita soporte para imagen.

+1 para soporte de imagen

+1 para soporte de imagen también

+1 por <use> soporte. Lo estamos usando para nuestro conjunto de iconos svg. Estamos tratando de dangerouslySetHTML para que funcione, sin embargo, el evento de propagación no funciona con él.

Falta strokeDashoffset . Quiero usarlo para una barra de progreso, como esta: http://codepen.io/JMChristensen/pen/Ablch

+1 por strokeDashoffset

también quiero usarlo para una barra de progreso.

Me falta alignment-baseline cuando trabajo con <text>

¿Quizás alguien tiene la fuerza de voluntad para rastrear http://www.w3.org/TR/SVG/Overview.html y obtener todos los atributos y propiedades? (Puede haber una URL mejor para este propósito, no estoy seguro ...)

Otra ayuda sería saber dónde cambiar esto en el código fuente y las pruebas para que sea más fácil hacer un compromiso para reaccionar.

FWIW, la mayoría de los atributos aún se pueden aplicar utilizando el atributo de estilo.

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

@syranide Hice eso (en su mayoría automatizado porque sería una locura hacerlo manualmente) - https://github.com/zpao/react/compare/fuck-svg. Vea mi comentario anterior sobre por qué eso no se fusionó ya.

@ThomasDeutsch Vea la mayoría de las solicitudes de extracción relacionadas con SVG anteriores. Dicho esto, prefiero idear un plan que agregarlos uno por uno (también lo dirigiré a mi comentario anterior).

+1 para textPath: lo necesito para un proyecto en el que estoy trabajando actualmente, y ahora mismo estoy pirateando una solución desagradable. Me complacerá contribuir con una implementación para un paquete de complementos React SVG

: +1: para un complemento SVG completo. ¿Alguna estimación sobre cuándo se enviará?

+1 para ForeignObject

+1 para ForeignObject

El atributo xlink:href para usar svg sprites.

+1 por <use> soporte

Actualmente usando https://www.npmjs.org/package/react-inlinesvg como una solución para esto.

Atributos: maskUnits y maskContentUnits (# 2056)

atributo de máscara # 2535

patternTransform

atributo de texto text-anchor

+1 para textPath

+1 por <use> para el manejo de iconos svg.

+1 para un complemento SVG. Actualmente solo necesito <clipPath> para un proyecto, pero quién sabe qué necesitaré en el futuro. Un complemento completo sería muy útil.

+1 para un complemento.

Estamos planeando hacer un uso extensivo de SVG con React, por lo que un complemento SVG completo para proyectos como el nuestro parece una gran idea.

+1 para textPath y soporte svg más completo en general.

Hasta que SVG sea totalmente compatible, una solución decente es decirle a React qué atributos de svg debe pasar para representar y declarar los elementos que necesita explícitamente. Por ejemplo, se puede acceder a <use> así:

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 Tenga cuidado al hacer eso: React aún llamará a setAttribute (no a setAttributeNS) si el atributo cambia, y la actualización probablemente no funcionará correctamente.

@spicyj No veo ningún soporte de espacio de nombres en React (es decir, no hay ninguna llamada a setAttributeNS en la base de código). ¿Alguna sugerencia sobre una forma adecuada de establecer un atributo con un espacio de nombres?

No hemos descubierto cómo funcionarán los atributos de espacio de nombres y no los admitimos en este momento, lo siento.

vector-effect estaría bien. ¿Hay otra forma de mantener trazos de ancho fijo sin él que se pueda usar mientras tanto?

+1 para ForeignObject

Solo haciendo referencia a mi PR para los atributos de línea de base de texto: # 2697

oh mierda, necesito use etiqueta: decepcionado:

Me he resignado a usar un componente personalizado que tiene una función de renderizado que devuelve

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

Es feo, pero funciona.

: +1: en esto

+1 activado para soporte completo de svg en complementos

: +1:

@zpao @spicyj ¿hay alguna forma compatible de agregar estos elementos SVG individuales a React sin parchear mono ReactDOM y SVGDOMPropertyConfig ?

Lo siento, no.

+1 para imagen y objeto extranjero

+1 para ForeignObject

animate no funciona y posiblemente algunos de sus atributos: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

¿Cuál es el estado de la compatibilidad con SVG en complementos? Me encontré con esto hoy :-(

cc @xymostech @MichelleTodd

+1 para atributos de espacio de nombres.

+1 activado para soporte completo de svg en complementos

+1000 para soporte de atributos SVG :-)

+1 para apoyaratributos

Solicitud para agregar el atributo "regla de relleno", tal vez como "regla de relleno"

También me gustaría ver un complemento SVG: +1:

Equipo central de React, ¿hay algún movimiento / discusión detrás de escena sobre esto?

No en esto específicamente, pero # 3718, # 3763 son elementos SVG en los que se está trabajando y # 3067 también está relacionado con este cambio de atributos.

+1 para compatibilidad completa con SVG. Antes de que suceda, necesitaré una forma de crear etiquetas y atributos personalizados. ¿Alguien puede ayudarme con eso?

También falta el elemento marcador (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca prueba https://gist.github.com/akre54/80eaa63762ea499029f0 mientras tanto

3945 Estas etiquetas no son compatibles con React SVG para el marcador: refx, refy, orient

: +1: ¡para marcadores!

+1 para SVG todas las cosas.

: +1

¿Qué tal la compatibilidad con las propiedades de 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>

actualmente acaba con

<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 para la imagen

+ Todos los SVG compatibles

+1 para filtro

+1 para soporte de uso!

+1 para atributos de espacio de nombres

+1 por use y filter soporte de atributos

+1 por <image> soporte. Que necesito reaccionar a rendir SVG en línea que tiene una imagen dentro de un trazado de recorte, y es cada vez colgado en el xmlns:xlink="http://www.w3.org/1999/xlink" attr en el <svg> etiqueta.

+1 por filter

Teniendo en cuenta el comentario de @zpao , ¿debería bloquearse este problema? O al menos, ¿podemos actualizar el OP con esa información? Estoy suscrito al hilo para recibir actualizaciones, pero el comentario de oculto (junto con el hecho de que el trabajo ya se ha realizado) y es un poco confuso para cualquiera que no haya leído el hilo completo.

El comentario de @zpao explica la decisión sobre por qué no está integrado actualmente en React, pero ¿hay una mejor explicación de por qué no existe un complemento?
¿Es esto algo que todavía se puede explorar?

+1 para marcador: refx, refy, orient

+1 para atributos de texto: rotar, dominante-línea de base

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

+1 complemento

+1 complemento

En realidad, React está en proceso de dividirse en el núcleo 'react' y el dom 'react-dom', y supongo que ahí es donde finalmente entrará 'react-svg'

+1 para filtro.

vector-effect atributo por favor

Creo que las personas que solicitan etiquetas / atributos SVG cuando las necesitan es un modelo muy pobre para React. Es una tontería que tenga que usar dangerouslySetInnerHTML solo para representar un SVG funcional en la página. Dicho esto, aquí están algunas de las cosas que faltan:

_Etiquetas: _

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Atributos: _

• filterUnits
• stdDeviation
• values
• in
• operator

y probablemente mucho más en ambas categorías. Esos son solo algunos del código SVG específico con el que estoy trabajando.

+1 por vector-effect

+1 por stdDeviation

+1 para un React.SVG completo y separado. Me encanta trabajar con SVG en React hasta ahora, pero lo incompleto del soporte hace que no sea posible para ninguna aplicación semicompleja.

@spicyj tiene un plan para eliminar la necesidad de una configuración separada que necesitamos para seguir actualizando. Con suerte, eso estará completo pronto. Mientras tanto, agárrate fuerte.

+1 para animateTransform

+1 para dominar la línea de base (# 3199.)

Como dijo @zpao , pronto arreglaremos esto definitivamente para que se pueda usar cualquier atributo.

Bloqueando este problema hasta entonces.

Esto se solucionó en https://github.com/facebook/react/pull/5714.

5714 se revirtió en # 6243 y, por lo tanto, aún necesitamos una lista blanca de atributos. Sin embargo, la buena noticia es que el número 6243 contiene atributos extraídos para MDN, por lo que esperamos que cubra el 95% de los casos de uso . Leí todo este problema y vinculé los problemas y las relaciones públicas y agregué manualmente dos propiedades faltantes ( focusable y vector-effect ) en # 6267. Espero que estos cambios lleguen a la v15.

Curiosamente, no estoy seguro de si la lista blanca _tag_ ya es relevante. Hasta ahora he podido usar <marker> , <textPath> , <feGaussianBlur> y otras etiquetas solicitadas en este número y en PR vinculadas sin problemas en el maestro. Veo que fbjs todavía mantiene una lista blanca de etiquetas SVG y no conozco la base de código lo suficientemente bien como para decir por qué las etiquetas que faltan funcionaron para mí hoy, así que espero que @zpao o @spicyj puedan aclarar esto, y si también necesitamos agregar las etiquetas que faltan allí, para complementar # 6243.

Estoy desbloqueando este problema porque la lista blanca de atributos sigue siendo relevante, pero con suerte veremos muchas menos solicitudes ahora que la mayoría de los atributos que están en la especificación y son implementados por los navegadores son compatibles. Si algo aún no es compatible con la versión 15 final, háganoslo saber aquí.

Esta nota no se aplica a v15 RC1, que pasa todos los atributos SVG.

Noté que parece haber mucha confusión sobre el atributo xlink:href . Actualmente, es compatible, pero debería escribirlo de una manera diferente:

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

React lo convertirá correctamente en xlink:href , incluso en 0.14.x. Vea este violín para ver un ejemplo.

Para mi caso de uso, necesitaba React para reconocer algunos elementos de filtro como feFuncR , específicamente sus atributos ( slope , intercept , etc.). Parece estar bien en 15.0-rc2, pero para 0.14.x lo solucioné agregando estos atributos al diccionario exportado por react/lib/SVGDOMPropertyConfig antes de importar primero react / react-dom sí mismo. P.ej:

// 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;

Obviamente, esto es un truco, pero lo encuentro preferible a dangerouslySetInnerHTML

Si bien esto funciona, no es una API expuesta oficialmente y puede fallar en cualquier versión menor o de parche. Puede usarlo, pero bajo su propio riesgo. Si aún falta algo, trabaje con nosotros para que lo agreguemos. Me alegra saber que no tiene problemas con 15 RC2.

Sí, absolutamente. Solo lo usaré hasta que 15 salga del estado RC.

Bastante feliz por el soporte (casi) completo de SVG en v15.0, pero me doy cuenta de que algunos atributos de espacio de nombres como xmlns y xmlnsXlink no se pueden aplicar al renderizar, y esto está bien cuando se muestran el svg en el navegador.

En caso de que desee crear una imagen .svg esos atributos son necesarios.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Entonces, hacer el código anterior no funcionará.

Probablemente esté relacionado con el hecho de que:

... gracias al uso de document.createElement , ya no necesitamos mantener una lista de etiquetas SVG, por lo que cualquier etiqueta SVG que antes no era compatible debería funcionar bien en React 15

y no document.createElementNS .

y no document.createElementNS.

La publicación del blog es demasiado simplificada, pero createElementNS se usa cuando estamos bajo una etiqueta <svg> . Si esto no sucede, ¿puede presentar un problema por separado que describa el problema, con un JSFiddle que lo reproduzca? ¡Gracias!

Gracias @gaearon. Creo que sucede cuando se procesa svg en el navegador a través de ReactDOM . Probablemente el problema esté relacionado con ReactDOMServer .

Aquí hay un lápiz que muestra el SVG renderizado y el código generado a través de renderToStaticMarkup() donde falta al menos xmlNS y xmlnsXlink attrs.

Si es el caso, podría presentar este problema por separado.

Sí, faltan xmlns y xmlns:Xlink . https://github.com/facebook/react/pull/6471 tiene algunos trabajos en progreso para agregarlo.

Sigo sin ver <animate> y <animateTransform> en la lista de etiquetas compatibles. ¿Hay alguna razón por la que eligió no apoyarlo?

@shilpan

Todas las etiquetas son compatibles ahora. La lista solo indica qué etiquetas son compatibles con las funciones de fábrica React.DOM.* :

Los siguientes elementos SVG son compatibles con React.DOM. *:

(énfasis mío)

Si usa JSX, no necesita preocuparse por esto en absoluto; escribir <animate> y <animateTransform> simplemente funcionará porque JSX no depende de las fábricas de React.DOM.* .

Incluso si no usa JSX, puede usar React.createElement('animate', ...) que funcionará bien, o crear su propia función de fábrica: var animate = React.createFactory('animate") .

+1 para agregar soporte para xmlns .... Mientras tanto, si alguien está interesado en una solución alternativa (que necesitaba para poder admitir IE9-11), esto es lo que se me ocurrió:

// 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}}/>