Arbeitet jemand daran? Ich würde gerne das filter Tag implementieren.

preserveAspectRatio scheint auch zu fehlen: http://jsfiddle.net/jonase/kb3gN/3025/

Soll ich dafür eine PR erstellen oder ziehen Sie es vor, zuerst alle fehlenden Attribute/Tags zu sammeln und später einen einzigen Patch zu erstellen?

[Bearbeiten] protectAspectRatio wurde im Commit hinzugefügt https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

Hallo.

Marker*-Attribute wurden dank @cassus in #1738 wie oben beschrieben hinzugefügt.

Wie wäre es mit dem Hinzufügen des zugehörigen SVG-Elements <marker> ?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Ich habe gerade gemerkt, dass ich das auch brauche. Hier ist eine gute Übersicht: http://tutorials.jenkov.com/svg/marker-element.html

Dieser Ansatz "hier und da ein zufälliges Element und Attribut hinzufügen, wie 1 Person es braucht" ist außer Kontrolle geraten. Wir müssen also entweder alles oder nichts unterstützen (oder alternativ ab und zu eine vernünftige Reihe von Dingen hinzufügen und dann dort einfrieren).

Ich habe http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html für _fast_ alles abgekratzt (Namespace-Attribute nicht mitgezählt) und kam auf folgendes: https://github.com/zpao/ reagieren/vergleichen/fuck-svg.

Dies fügt jedoch unserem minimierten Build ~ 2 KB hinzu (obwohl es mit dem Closure-Compiler gut zerquetscht würde) und ich möchte diese Größe jetzt nicht erhöhen. Wir haben darüber gesprochen, einen separaten SVG-Build zu erstellen. Oder das separat als Add-On versenden.

@zpao du hast recht. Volle SVG-Unterstützung könnte ein Addon sein. Dazu muss eine Abschreibungswarnung gesetzt werden, um beispielsweise zu informieren, dass React.DOM.circle zu React.SVG.circle wird

+1 für React.SVG.circle

@zpao
Ein vollständiges SVG-Add-On klingt nach einem guten Ansatz. Viele Projekte benötigen kein SVG, daher sollten wir den Code für sie nicht belasten. Andere Projekte brauchen und es macht keinen Sinn, nur halbwegs Unterstützung zu leisten.

+1

2069 fordert Unterstützung für das Bild an.

+1 für Bildunterstützung

+1 auch für Bildunterstützung

+1 für <use> Unterstützung. Wir verwenden das für unser SVG-Icon-Set. Wir versuchen dangerouslySetHTML damit es funktioniert, aber das Event-Bubbling funktioniert damit nicht.

strokeDashoffset fehlt. Ich möchte es für einen Fortschrittsbalken verwenden, wie folgt :

+1 für strokeDashoffset

möchte es auch für einen Fortschrittsbalken verwenden.

Ich vermisse alignment-baseline wenn ich mit <text> arbeite

Vielleicht hat jemand die Willenskraft, http://www.w3.org/TR/SVG/Overview.html zu durchforsten und alle Attribute und Eigenschaften zu erhalten? (Für diesen Zweck könnte es eine bessere URL geben, bin mir nicht sicher...)

Eine weitere Hilfe wäre zu wissen, wo dies im Quellcode und in den Tests geändert werden muss, damit es einfacher ist, mit einem Commit zu reagieren.

FWIW, die meisten Attribute können weiterhin mit dem style-Attribut angewendet werden.

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

@syranide Ich habe das gemacht (meistens automatisiert, weil das manuell Wahnsinn wäre) - https://github.com/zpao/react/compare/fuck-svg. Siehe meinen vorherigen Kommentar dazu, warum das nicht bereits zusammengeführt wurde.

@ThomasDeutsch Sehen Sie sich die meisten der vorherigen SVG-bezogenen Pull-Requests an. Das heißt, ich würde lieber einen Plan ausarbeiten, als sie einzeln hinzuzufügen (ich verweise Sie auch auf meinen vorherigen Kommentar).

+1 für textPath - Ich brauche es für ein Projekt, an dem ich gerade arbeite, und hacke gerade eine böse Lösung. Ich würde gerne eine Implementierung zu einem React SVG Plugin Pack beitragen

:+1: für ein vollständiges SVG-Add-On. Irgendwelche Schätzungen, wann das versendet wird?

+1 für Fremdobjekt

+1 für Fremdobjekt

Das Attribut xlink:href um SVG-Sprites zu verwenden.

+1 für <use> Unterstützung

Verwenden Sie derzeit https://www.npmjs.org/package/react-inlinesvg als

Attribute: maskUnits & maskContentUnits (# 2056)

Maskenattribut #2535

patternTransform

Textattribut text-anchor

+1 für textPath

+1 für <use> für die Handhabung von SVG-Symbolen.

+1 für ein SVG-Add-On. Ich benötige derzeit nur <clipPath> für ein Projekt, aber wer weiß, was ich in Zukunft brauche. Ein umfangreiches Add-On wäre sehr hilfreich.

+1 für ein Add-On.

Wir planen, SVG mit React umfassend zu nutzen, daher scheint ein komplettes SVG-Add-On für Projekte wie unseres eine großartige Idee zu sein.

+1 für textPath und umfassendere SVG-Unterstützung im Allgemeinen.

Bis SVG vollständig unterstützt ist, besteht eine anständige Problemumgehung darin, React mitzuteilen, welche SVG-Attribute es durchlaufen soll, um die benötigten Elemente zu rendern und explizit zu deklarieren. Auf <use> kann beispielsweise wie folgt zugegriffen werden:

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 Seien Sie dabei vorsichtig – React ruft immer noch setAttribute (nicht setAttributeNS) auf, wenn sich das Attribut ändert, und das Update wird wahrscheinlich nicht richtig funktionieren.

@spicyj Ich sehe in React keine Namespace-Unterstützung (dh es gibt keinen Aufruf von setAttributeNS in der Codebasis). Haben Sie einen Vorschlag zum Festlegen eines Attributs mit einem Namespace?

Wir haben nicht herausgefunden, wie Namespace-Attribute funktionieren und unterstützen sie derzeit nicht, sorry.

vector-effect wäre nett. Gibt es eine andere Möglichkeit, Striche mit fester Breite beizubehalten, die in der Zwischenzeit verwendet werden können?

+1 für Fremdobjekt

Ich verweise nur auf meine PR für Text-Baseline-Attribute: #2697

oh scheiss ich brauche use tag :enttäuscht:

Ich habe mich damit abgefunden, eine benutzerdefinierte Komponente zu verwenden, die eine Renderfunktion hat, die zurückgibt

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

Es ist hässlich, aber es funktioniert.

:+1: dazu

+1 an für volle SVG-Unterstützung in Addons

:+1:

@zpao @spicyj gibt es eine unterstützte Möglichkeit, diese einzelnen SVG-Elemente zu React hinzuzufügen, ohne ReactDOM und SVGDOMPropertyConfig Affen zu patchen ?

Entschuldige Nein.

+1 für Bild und Fremdobjekt

+1 für Fremdobjekt

animate funktioniert nicht und möglicherweise einige seiner Attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Wie ist der Status zur Unterstützung von SVG in Addons? Bin heute erst darauf gestoßen :-(

cc @xymostech @MichelleTodd

+1 für Namespace-Attribute.

+1 an für volle SVG-Unterstützung in Addons

+1000 für SVG-Attribut-Unterstützung :-)

+1 für die UnterstützungAttribute

Anfrage zum Hinzufügen des Attributs "fill-rule", eventuell als "fillRule"

Möchte auch ein SVG-Addon sehen :+1:

Reagieren Sie Kernteam, gibt es dazu eine Bewegung/Diskussion hinter den Kulissen?

Nicht speziell, aber #3718, #3763 sind beides SVG-Dinge, an denen gearbeitet wird, und #3067 hängt auch mit dieser Attributänderung zusammen.

+1 für volle SVG-Unterstützung. Bevor es passiert, brauche ich eine Möglichkeit, benutzerdefinierte Tags und Attribute zu erstellen. Kann mir da bitte jemand helfen?

Auch das Marker-Element fehlt (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

@ersagunkuruca in der Zwischenzeit https://gist.github.com/akre54/80eaa63762ea499029f0 versuchen

3945 Diese Tags werden in React SVG für Marker nicht unterstützt: refx, refy,orient

:+1: für Marker!

+1 für SVG all die Dinge.

:+1

wie wäre es mit der Unterstützung für animateTransform-Eigenschaften?

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

derzeit endet nur mit

<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 für Bild

+Alle SVG unterstützt

+1 für Filter

+1 für die Nutzungsunterstützung!

+1 für Namespace-Attribute

+1 für use und filter Attribute-Unterstützung

+1 für <image> Unterstützung. Ich benötige React, um ein Inline-SVG zu rendern, das ein Bild in einem Beschneidungspfad enthält, und es hängt am xmlns:xlink="http://www.w3.org/1999/xlink" Attribut im <svg> Tag.

+1 für filter

Sollte dieses Problem in Anbetracht Kommentars von @zpao gesperrt werden? Oder können wir das OP zumindest mit diesen Informationen aktualisieren? Ich habe den Thread für Updates abonniert, aber der Kommentar von @zpao ist begraben (zusammen mit der Tatsache, dass bereits Arbeit geleistet wurde) und ist für jeden, der nicht den gesamten Thread gelesen hat, etwas verwirrend.

Der Kommentar von
Ist das noch zu erforschen?

+1 für Marker: refx, refy, orient

+1 für Textattribute: Rotieren, Dominant-Grundlinie

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

+1 Add-On

+1 Add-On

Eigentlich ist Reagieren im Prozess Spaltung in den Kern des Seins ‚reagiert‘ und den dom ‚reagieren-dom‘, und ich vermute , dass die in der ‚reagieren-svg‘ schließlich in kommen

+1 für Filter.

vector-effect Attribut bitte

Ich denke, dass Leute, die SVG-Tags/Attribute anfordern, wenn sie sie brauchen, ein sehr schlechtes Modell für React sind. Es ist albern, dass ich dangerouslySetInnerHTML nur um ein funktionierendes SVG auf der Seite zu rendern. Davon abgesehen fehlen hier einige Dinge:

_Stichworte:_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_Attribute:_

• filterUnits
• stdDeviation
• values
• in
• operator

und wahrscheinlich noch viel mehr in beiden Kategorien. Dies sind nur einige von dem speziellen SVG-Code, mit dem ich arbeite.

+1 für vector-effect

+1 für stdDeviation

+1 für ein separates und vollständiges React.SVG. Ich liebe es bisher mit SVG in React zu arbeiten, aber die Unvollständigkeit der Unterstützung macht es für jede halbkomplexe Anwendung ein No-Go.

@spicyj hat einen Plan, um die Notwendigkeit einer separaten Konfiguration zu beseitigen, die wir

+1 für animateTransform

+1 für Dominante-Grundlinie (#3199.)

Wie @zpao sagte, werden wir dies bald

Schließe dieses Problem bis dahin.

Dies wurde in https://github.com/facebook/react/pull/5714 behoben

5714 wurde in #6243 zurückgesetzt, und daher benötigen wir immer noch eine Attribut-Whitelist. Die gute Nachricht ist jedoch, dass #6243 Attribute enthält, die für MDN gescrapt sind, sodass wir davon ausgehen, dass es 95 % der Anwendungsfälle abdeckt . Ich habe das ganze Problem durchgelesen und Themen und PRs verlinkt und manuell zwei fehlende Eigenschaften ( focusable und vector-effect ) in #6267 hinzugefügt. Ich erwarte, dass diese Änderungen in v15 landen.

Interessanterweise bin ich mir nicht sicher, ob die _tag_ Whitelist noch relevant ist. Bisher konnte ich <marker> , <textPath> , <feGaussianBlur> und andere in dieser Ausgabe und in verlinkten PRs angeforderte Tags ohne Probleme auf dem Master verwenden. Ich sehe, dass fbjs immer noch eine SVG-Tag-Whitelist unterhält und ich kenne die Codebasis nicht gut genug, um zu sagen, warum Tags, die darin fehlen, heute für mich funktioniert haben. Hoffentlich können @zpao oder @spicyj dies klären und ob wir müssen dort auch die fehlenden Tags hinzufügen, um #6243 zu ergänzen.

Ich löse dieses Problem, weil die Attribut-Whitelist immer noch relevant ist, aber hoffentlich sehen wir jetzt viel weniger Anfragen, da die meisten Attribute, die sowohl in der Spezifikation enthalten sind als auch von den Browsern implementiert werden, unterstützt werden. Wenn etwas in der endgültigen Version 15 immer noch nicht unterstützt wird, teilen Sie uns dies bitte hier mit.

Dieser Hinweis gilt nicht für v15 RC1, das alle SVG-Attribute durchlässt.

Mir ist aufgefallen, dass es ziemlich viel Verwirrung über das Attribut xlink:href geben scheint. Es _wird_ derzeit unterstützt, aber Sie müssen es anders schreiben:

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

React wird das korrekt in xlink:href umwandeln, sogar in 0.14.x. Sehen Sie sich diese Geige als Beispiel an.

Für meinen Anwendungsfall brauchte ich React, um einige Filterelemente wie feFuncR , insbesondere ihre Attribute ( slope , intercept , etc). Es scheint in 15.0-rc2 in Ordnung zu sein, aber für 0.14.x habe ich es umgangen, indem ich diese Attribute dem von react/lib/SVGDOMPropertyConfig exportierten Wörterbuch hinzugefügt habe, bevor ich zuerst react / react-dom importiert habe selbst. Z.B:

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

Dies ist offensichtlich ein Hack, aber ich finde es besser als dangerouslySetInnerHTML

Dies funktioniert zwar, ist aber keine offiziell freigegebene API und kann in jede Neben- oder Patch-Version einbrechen. Sie können es verwenden, aber auf eigene Gefahr. Wenn noch etwas fehlt, arbeiten Sie bitte mit uns zusammen, damit wir es hinzufügen. Es freut mich zu hören, dass Sie keine Probleme mit 15 RC2 haben.

Ja, absolut. Ich benutze das nur, bis 15 den RC-Status verlässt.

Ich bin ziemlich glücklich über die (fast) vollständige SVG-Unterstützung in v15.0, aber ich xmlns und xmlnsXlink beim Rendern nicht angewendet werden konnten, und dies ist beim Anzeigen in svg im Browser.

Falls Sie ein .svg Bild erstellen möchten, sind diese Attribute notwendig.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

Also den obigen Code zu machen, wird nicht funktionieren.

Vermutlich hängt damit zusammen, dass:

... dank der Verwendung von document.createElement brauchen wir keine Liste von SVG-Tags mehr zu führen, daher sollten alle SVG-Tags, die zuvor nicht unterstützt wurden, in React 15 problemlos funktionieren

und nicht document.createElementNS .

und nicht document.createElementNS.

Der Blogbeitrag ist etwas zu vereinfacht, aber createElementNS wird verwendet, wenn wir uns unter einem <svg> Tag befinden. Wenn dies nicht der Fall ist, können Sie bitte ein separates Problem mit einer Beschreibung des Problems mit einer JSFiddle-Datei einreichen, die es reproduziert? Danke!

Danke @gaearon. Ich denke, es passiert, wenn svg im Browser durch ReactDOM . Wahrscheinlich hängt das Problem mit ReactDOMServer .

Hier ist ein Stift , der die gerenderten SVG und den durch renderToStaticMarkup() generierten Code anzeigt, wobei mindestens xmlNS und xmlnsXlink Attribute fehlen.

Wenn dies der Fall ist, könnte ich dieses Problem separat melden.

Ja, xmlns und xmlns:Xlink fehlen. https://github.com/facebook/react/pull/6471 hat einige im Gange daran, es hinzuzufügen.

Ich sehe <animate> und <animateTransform> in der Liste der unterstützten Tags. Gibt es einen Grund, warum Sie sich entschieden haben, es nicht zu unterstützen?

@shilpan

Alle Tags werden jetzt unterstützt. Die Liste sagt nur, welche Tags als React.DOM.* Factory-Funktionen unterstützt werden:

Die folgenden SVG-Elemente werden in React.DOM.* unterstützt:

(Hervorhebung von mir)

Wenn Sie JSX verwenden, müssen Sie sich darüber überhaupt keine Gedanken machen – das Schreiben von <animate> und <animateTransform> funktioniert einfach, weil JSX nicht auf React.DOM.* Fabriken angewiesen ist.

Auch wenn Sie JSX nicht verwenden, können Sie React.createElement('animate', ...) was problemlos funktioniert, oder Ihre eigene Factory-Funktion erstellen: var animate = React.createFactory('animate") .

+1 für das Hinzufügen von Unterstützung für xmlns .... Wenn in der Zwischenzeit jemand an einer Problemumgehung interessiert ist (die ich brauchte, um IE9-11 unterstützen zu können), habe ich mir Folgendes ausgedacht:

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