Alguém está trabalhando nisso? Eu gostaria de implementar a tag filter .

preserveAspectRatio também parece estar faltando: http://jsfiddle.net/jonase/kb3gN/3025/

Devo criar um PR para isso ou você prefere coletar todos os atributos / tags ausentes primeiro e depois criar um único patch?

[editar] preserveAspectRatio foi adicionado ao commit https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Oi.

Os atributos do marker * foram adicionados graças a @cassus em # 1738, conforme declarado acima.

Que tal adicionar o elemento <marker> SVG relacionado?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Acabei de perceber que preciso disso também. Esta é uma boa visão geral disso: http://tutorials.jenkov.com/svg/marker-element.html

Essa abordagem de "adicionar um elemento aleatório e um atributo aqui e ali conforme 1 pessoa precisa" saiu do controle. Portanto, precisamos dar suporte a tudo ou nada (ou, alternativamente, adicionar um conjunto razoável de coisas de vez em quando congelar).

Eu copiei http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html para _quase_ tudo (sem contar os atributos com espaço de nomes) e cheguei a isto: https://github.com/zpao/ react / compare / fuck-svg.

No entanto, isso adiciona ~ 2kb à nossa compilação minimizada (embora fosse esmagar bem com o compilador de encerramento) e não quero aumentar esse tamanho agora. Já falamos sobre fazer uma compilação SVG separada. Ou enviá-lo separadamente como um complemento.

@zpao você está certo. O suporte SVG completo pode ser um complemento. Para fazer isso, um aviso de depreciação precisará ser definido para informar, por exemplo, que React.DOM.circle se tornará React.SVG.circle

+1 para React.SVG.circle

@zpao
Um complemento SVG completo parece uma boa abordagem. Muitos projetos não precisam de nenhum SVG, então não devemos sobrecarregar o código para eles. Outros projetos precisam e não faz sentido ir apenas pela metade no suporte.

+1

2069 solicita suporte para imagem.

+1 para suporte de imagem

+1 para suporte de imagem também

+1 para suporte de <use> . Estamos usando isso para nosso conjunto de ícones SVG. Estamos tentando dangerouslySetHTML para fazê-lo funcionar, no entanto, o borbulhamento de eventos não funciona com ele.

Faltando strokeDashoffset . Quero usá-lo para uma barra de progresso, como esta: http://codepen.io/JMChristensen/pen/Ablch

+1 para strokeDashoffset

também deseja usá-lo para uma barra de progresso.

Estou perdendo alignment-baseline quando trabalho com <text>

Talvez alguém tenha força de vontade para navegar por http://www.w3.org/TR/SVG/Overview.html e obter todos os atributos e propriedades? (Pode haver um URL melhor para este propósito, não tenho certeza ...)

Outra ajuda seria saber onde mudar isso no código-fonte e nos testes para que seja mais fácil fazer um commit para reagir.

FWIW, a maioria dos atributos ainda pode ser aplicada usando o atributo style.

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

@syranide Eu fiz isso (principalmente automatizado porque seria uma loucura fazer manualmente) - https://github.com/zpao/react/compare/fuck-svg. Veja meu comentário anterior sobre por que ainda não está integrado.

@ThomasDeutsch Veja a maioria dos pedidos anteriores de pull relacionados a SVG. Dito isso, prefiro descobrir um plano do que adicioná-los um por um (direcionarei você ao meu comentário anterior também).

+1 para textPath - eu preciso disso para um projeto no qual estou trabalhando atualmente, e agora estou hackeando uma solução desagradável. Eu ficaria feliz em contribuir com uma implementação para um pacote de plug-ins React SVG

: +1: para um complemento SVG completo. Alguma estimativa de quando isso seria enviado?

+1 para ForeignObject

+1 para ForeignObject

O atributo xlink:href para usar sprites svg.

+1 para suporte de <use>

Atualmente usando https://www.npmjs.org/package/react-inlinesvg como uma solução alternativa para isso.

Atributos: maskUnits & maskContentUnits (# 2056)

atributo de máscara # 2535

patternTransform

atributo de texto text-anchor

+1 para textPath

1 para <use> para manipulação do ícone SVG.

+1 para um complemento SVG. Atualmente, só preciso de <clipPath> para um projeto, mas quem sabe do que vou precisar no futuro. Um complemento abrangente seria muito útil.

1 para um add-on.

Estamos planejando fazer uso extensivo de SVG com React, portanto, um complemento SVG completo para projetos como o nosso parece uma ótima ideia.

1 para textPath e suporte svg mais completo em geral.

Até que o SVG seja totalmente suportado, uma solução alternativa decente é dizer ao React por quais atributos svg ele deve passar para renderizar e declarar os elementos que você precisa explicitamente. Por exemplo, <use> pode ser acessado desta forma:

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 Tenha cuidado ao fazer isso - o React ainda chamará setAttribute (não setAttributeNS) se o atributo mudar, e a atualização provavelmente não funcionará corretamente.

@spicyj Não vejo nenhum suporte de namespace no React (ou seja, não há chamada para setAttributeNS na base de código). Alguma sugestão sobre uma maneira adequada de definir um atributo com um namespace?

Não descobrimos como os atributos com namespace funcionarão e não temos suporte para isso agora, desculpe.

vector-effect seria bom. Existe outra maneira de manter traçados de largura fixa sem ele que possa ser usada enquanto isso?

+1 para ForeignObject

Apenas referenciando meu PR para atributos de linha de base de texto: # 2697

merda, preciso da tag use : desapontado:

Eu me resignei a usar um componente personalizado que tem uma função de renderização que retorna

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

É feio, mas funciona.

: +1: neste

+1 ligado para suporte svg completo em addons

: +1:

@zpao @spicyj existe uma maneira suportada de adicionar esses elementos SVG individuais ao React sem fazer o monkey-patching ReactDOM e SVGDOMPropertyConfig ?

Desculpe, não.

+1 para imagem e objeto estrangeiro

+1 para ForeignObject

animate não funciona e possivelmente alguns de seus atributos: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Qual é o status do suporte a SVG em complementos? Acabei de encontrar isso hoje :-(

cc @xymostech @MichelleTodd

+1 para atributos com namespace.

+1 ligado para suporte svg completo em addons

+1000 para suporte a atributos SVG :-)

+1 para apoiaratributos

Solicitação para adicionar o atributo "fill-rule", talvez como "fillRule"

Também gostaria de ver um complemento SVG: +1:

Equipe central do React, há algum movimento / discussão nos bastidores sobre isso?

Não especificamente nisto, mas # 3718, # 3763 são coisas SVG sendo trabalhadas e # 3067 também está relacionado a essa alteração de atributos.

+1 para suporte SVG completo. Antes que aconteça, vou precisar de uma maneira de criar tags e atributos personalizados. Alguém pode me ajudar com isso?

O elemento marcador também está ausente (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca, tente https://gist.github.com/akre54/80eaa63762ea499029f0 entretanto

3945 Essas tags não são suportadas no React SVG para marcador: refx, refy, orient

: +1: para marcadores!

1 para SVG todas as coisas.

: +1

e quanto ao suporte para propriedades 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>

atualmente acaba com

<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 imagem

+ Suporte para todos os SVG

+1 para filtro

1 para uso de suporte!

+1 para atributos com namespace

+1 para use e filter atributos de suporte

+1 para suporte de <image> . Preciso do React para renderizar um SVG embutido que tem uma imagem dentro de um caminho de recorte e está travando no xmlns:xlink="http://www.w3.org/1999/xlink" attr na tag <svg> .

+1 para filter

Considerando o comentário de @zpao , esse problema deve ser bloqueado? Ou, pelo menos, podemos atualizar o OP com essas informações? Estou inscrito no tópico para atualizações, mas o comentário de @zpao está

O comentário de @zpao explica a decisão de por que ele não está integrado no react, mas há uma explicação melhor sobre por que um addon não existe?
Isso é algo que ainda pode ser explorado?

+1 para o marcador: refx, refy, orient

+1 para atributos de texto: girar, linha de base dominante

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

+1 addon

+1 addon

Na verdade, o React está em processo de divisão no núcleo 'react' e no dom 'react-dom', e acho que é aí que o 'react-svg' finalmente entrará

+1 para filtro.

vector-effect atributo, por favor

Acho que as pessoas que solicitam tags / atributos SVG quando precisam deles é um modelo muito pobre para o React. É bobagem eu ter que usar dangerouslySetInnerHTML apenas para renderizar um SVG funcional na página. Dito isso, aqui estão algumas das coisas que faltam:

_Tag:_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Atributos:_

• filterUnits
• stdDeviation
• values
• in
• operator

e provavelmente muito mais em ambas as categorias. Esses são apenas alguns do código SVG específico com o qual estou trabalhando.

+1 para vector-effect

+1 para stdDeviation

+1 para um React.SVG separado e completo. Estou adorando trabalhar com SVG no React até agora, mas a incompletude do suporte torna impossível qualquer aplicativo semi-complexo.

@spicyj tem um plano para eliminar a necessidade de uma configuração separada de que precisamos para manter a atualização. Esperançosamente, isso será concluído em breve. Nesse meio tempo, por favor, segure firme.

+1 para animateTransform

+1 para linha de base dominante (# 3199.)

Como @zpao disse, vamos consertar isso para sempre, para que todos os atributos possam ser usados.

Travando esse problema até então.

Isso foi corrigido em https://github.com/facebook/react/pull/5714.

5714 foi revertido em # 6243 e, portanto, ainda exigimos uma lista de permissões de atributos. A boa notícia, entretanto, é que # 6243 contém atributos extraídos para MDN, portanto, esperamos que cubra 95% dos casos de uso . Li toda esta edição e vinculei as questões e PRs e adicionei manualmente duas propriedades ausentes ( focusable e vector-effect ) em # 6267. Espero que essas mudanças ocorram na v15.

Curiosamente, não tenho certeza se a lista de permissões _tag_ é mais relevante. Até agora, consegui usar <marker> , <textPath> , <feGaussianBlur> e outras tags solicitadas nesta edição e em PRs vinculados sem problemas no mestre. Vejo que fbjs ainda mantém uma lista de permissões de tags SVG e não conheço a base de código bem o suficiente para dizer por que as tags ausentes funcionaram para mim hoje, então espero que @zpao ou @spicyj possam esclarecer isso, e se também precisamos adicionar as tags ausentes, para complementar # 6243.

Estou desbloqueando esse problema porque a lista de permissões de atributos ainda é relevante, mas esperamos ver muito menos solicitações agora que a maioria dos atributos que estão nas especificações e são implementados pelos navegadores são suportados. Se algo ainda não for compatível com a versão 15 final, informe-nos aqui.

Esta observação não se aplica à v15 RC1, que transmite todos os atributos SVG.

Percebi que parece haver muita confusão sobre o atributo xlink:href . _É_ atualmente suportado, mas você precisaria escrevê-lo de uma maneira diferente:

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

O React transformará isso corretamente em xlink:href , mesmo em 0.14.x. Veja este violino como um exemplo.

Para o meu caso de uso, eu precisava do React para reconhecer alguns elementos de filtro como feFuncR , especificamente seus atributos ( slope , intercept , etc). Parece estar bem em 15.0-rc2, mas para 0.14.x resolvi isso adicionando esses atributos ao dicionário exportado por react/lib/SVGDOMPropertyConfig antes de importar primeiro react / react-dom em si. Por exemplo:

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

Isso é obviamente um hack, mas acho preferível a dangerouslySetInnerHTML

Embora isso funcione, não é uma API oficialmente exposta e pode falhar em qualquer versão menor ou patch. Você pode usá-lo, mas por sua própria conta e risco. Se algo ainda estiver faltando, trabalhe conosco para que possamos adicioná-lo. Fico feliz em saber que você não tem problemas com o 15 RC2.

Sim, absolutamente. Só estou usando isso até que 15 saia do status RC.

Muito feliz com o suporte (quase) total de SVG na v15.0, mas estou percebendo que alguns atributos de namespace como xmlns e xmlnsXlink não podem ser aplicados na renderização, e isso está ok quando mostrado o svg no navegador.

Caso você queira criar uma imagem .svg esses atributos são necessários.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Portanto, fazer o código acima não vai funcionar.

Provavelmente está relacionado ao fato de que:

... graças ao uso de document.createElement , não precisamos mais manter uma lista de tags SVG, portanto, quaisquer tags SVG que não eram suportadas anteriormente devem funcionar bem no React 15

e não document.createElementNS .

e não document.createElementNS.

A postagem do blog é um pouco simplificada, mas createElementNS é usado quando estamos sob uma tag <svg> . Se isso não acontecer, você pode registrar um problema separado descrevendo o problema, com um JSFiddle que o reproduz? Obrigado!

Obrigado @gaearon. Eu acho que isso acontece quando renderiza svg no navegador por meio de ReactDOM . Provavelmente, o problema está relacionado com ReactDOMServer .

Aqui está uma caneta que mostra o SVG renderizado e o código gerado por renderToStaticMarkup() onde está faltando pelo menos xmlNS e xmlnsXlink attrs.

Se for o caso, eu poderia registrar esse problema separadamente.

Sim, xmlns e xmlns:Xlink estão faltando. https://github.com/facebook/react/pull/6471 tem algum trabalho em andamento para adicioná-lo.

Ainda não vejo <animate> e <animateTransform> na lista de tags suportadas. Existe uma razão pela qual você optou por não apoiá-lo?

@shilpan

Todas as tags são suportadas agora. A lista apenas informa quais tags são suportadas como React.DOM.* funções de fábrica:

Os seguintes elementos SVG são compatíveis com React.DOM. *:

(ênfase minha)

Se você usa JSX, não precisa se preocupar com isso - escrever <animate> e <animateTransform> só funcionará porque o JSX não depende de React.DOM.* fábricas.

Mesmo que não use JSX, você pode usar React.createElement('animate', ...) que funcionará perfeitamente, ou criar sua própria função de fábrica: var animate = React.createFactory('animate") .

+1 para adicionar suporte para xmlns .... Nesse ínterim, se alguém estiver interessado em uma solução alternativa (que eu precisava para ser capaz de oferecer suporte ao IE9-11), aqui está:

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