これに取り組んでいる人はいますか？ filterタグを実装したいと思っています。

preserveAspectRatioも欠落しているようです： http ：

このためのPRを作成する必要がありますか、それとも最初に不足しているすべての属性/タグを収集し、後で単一のパッチを作成することを希望しますか？

[編集] preserveAspectRatioがコミットに追加されましたhttps://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

こんにちは。

上記のように、＃1738の@cassusのおかげでmarker *属性が追加されました。

関連する<marker> SVG要素を追加するのはどうですか？
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

私もこれが必要だと気づきました。 これがその概要です： http ：

この「1人が必要とするときにランダムな要素と属性をあちこちに追加する」アプローチは手に負えなくなっています。 したがって、すべてをサポートするか、何もサポートしないか（または、適切なセットを今すぐ追加して、そこでフリーズする）する必要があります。

私はhttp://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.htmlを_ほとんどすべて（名前空間の属性を数えない）でスクレイピングし、これを思いついた： https ：

ただし、これにより、縮小されたビルドに最大2kbが追加され（クロージャーコンパイラーではうまく機能しますが）、今はそのサイズの増加を受け入れたくありません。 別のSVGビルドを行うことについて話しました。 または、アドオンとして個別に発送します。

@zpaoその通りです。 完全なSVGサポートはアドオンになる可能性があります。 そのためには、たとえばReact.DOM.circleがReact.SVG.circleになることを通知するために、減価償却警告を設定する必要があります。

React.SVG.circleの+1

@zpao
完全なSVGアドオンは良いアプローチのように聞こえます。 多くのプロジェクトはSVGを必要としないので、それらのコードを比較検討するべきではありません。 他のプロジェクトが必要であり、サポートの途中で行うのは意味がありません。

+1

2069はイメージのサポートを要求します。

画像サポートの+1

画像サポートも+1

<use>サポートの場合dangerouslySetHTMLを機能させるようにしていますが、イベントバブリングは機能しません。

strokeDashoffsetません。 次のようなプログレスバーに使用したい： http ：

strokeDashoffset +1

プログレスバーにも使用したい。

<text>作業しているときに、 alignment-baselineがありません

おそらく誰かがhttp://www.w3.org/TR/SVG/Overview.htmlをトロールして、すべての属性とプロパティを取得する意志を持っていますか？ （この目的にはもっと良いURLがあるかもしれませんが、確かではありません...）

もう1つの助けは、ソースコードとテストのどこでこれを変更するかを知って、反応するためのコミットを簡単に行えるようにすることです。

FWIW、ほとんどの属性は引き続きスタイル属性を使用して適用できます。

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

@syranide私はそれをしました（手動で行うのは狂気になるため、ほとんど自動化されています） ：//github.com/zpao/react/compare/fuck-svg。 なぜそれがすでにマージされていないのかについての私の以前のコメントを参照してください。

@ThomasDeutschこれまでのSVG関連のプルリクエストのほとんどを参照してください。 とはいえ、1つずつ追加するよりも計画を立てたいと思います（前のコメントも紹介します）。

textPathの+ 1-現在取り組んでいるプロジェクトに必要です。現在、厄介なソリューションをハッキングしています。 ReactSVGプラグインパックの実装に貢献できれば幸いです。

：+1：完全なSVGアドオンの場合。 それがいつ出荷されるかについての見積もりはありますか？

ForeignObjectの場合は+1

ForeignObjectの場合は+1

svgスプライトを使用するための属性xlink:href 。

<use>サポートの+1

現在、この回避策としてます。

属性：maskUnits＆maskContentUnits（＃2056）

マスク属性＃2535

patternTransform

テキスト属性text-anchor

textPathの+1

svgアイコン処理の<use>場合は+1。

SVGアドオンの場合は+1。 私は現在、プロジェクトに必要なのは<clipPath>だけですが、将来必要になるものは誰にもわかりません。 包括的なアドオンは非常に役立ちます。

アドオンの場合は+1。

ReactでSVGを広範囲に使用することを計画しているので、私たちのようなプロジェクト用の完全なSVGアドオンは素晴らしいアイデアのようです。

textPathの場合は+1、一般的にはより完全なsvgサポート。

SVGが完全にサポートされるまで、適切な回避策は、必要な要素を明示的にレンダリングおよび宣言するために通過する必要があるsvg属性をReactに指示することです。 たとえば、 <use>は次のようにアクセスできます。

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これを行うときは注意してください–属性が変更された場合でも、ReactはsetAttribute（setAttributeNSではなく）を呼び出し、更新はおそらく正しく機能しません。

@spicyj Reactに名前空間のサポートがありません（つまり、コードベースにsetAttributeNSの呼び出しがありません）。 名前空間を使用して属性を設定する適切な方法に関する提案はありますか？

名前空間属性がどのように機能するかはわかりません。現在、サポートされていません。申し訳ありません。

vector-effectがいいでしょう。 その間に使用できる固定幅のストロークをそれなしで維持する別の方法はありますか？

ForeignObjectの場合は+1

テキストベースライン属性のPRを参照するだけです：＃2697

ああ、私はuseタグが必要です：がっかりしました：

を返すレンダリング関数を持つカスタムコンポーネントを使用することに辞任しました

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

醜いですが、動作します。

：+1：これについて

アドオンでの完全なsvgサポートのために+1オン

：+1：

@zpao @spicyj ReactDOMとSVGDOMPropertyConfigモンキーパッチを適用せずに、これらの個々のSVG要素をReactに追加するサポートされている方法はありますか？

申し訳ありません。

画像とforeignObjectの場合は+1

ForeignObjectの場合は+1

animateが機能せず、その属性の一部が機能しない可能性があります： https ：

アドオンでSVGをサポートする状況はどうなっていますか？ 今日これに遭遇した:-(

cc @xymostech @MichelleTodd

名前空間属性の場合は+1。

アドオンでの完全なsvgサポートのために+1オン

SVG属性サポートの場合は+1000 :-)

サポートするための+1属性

属性「fill-rule」を追加するためのリクエスト、おそらく「fillRule」として

SVGアドオンも見たい：+1：

Reactコアチーム、これに関する舞台裏の動き/議論はありますか？

特にこれについてではありませんが、＃3718、＃3763は両方ともSVGで作業中であり、＃3067もこの属性の変更に関連しています。

完全なSVGサポートの場合は+1。 それが起こる前に、カスタムタグと属性を作成する方法が必要になります。 誰かが私を助けてくれますか？

マーカー要素もありません（https://developer.mozilla.org/en/docs/Web/SVG/Element/marker）

@ersagunkurucaそれまでの間https://gist.github.com/akre54/80eaa63762ea499029f0を試して

3945これらのタグはマーカーのReactSVGではサポートされていません：refx、refy、orient

：+1：マーカー用！

SVGのすべてのものに+1。

：+1

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>

現在は

<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

+すべてのSVGがサポートされています

フィルタの場合は+1

使用サポートのための+1！

名前空間属性の場合は+1

useおよびfilter属性のサポートの+1

<image>サポートの場合<svg>タグのxmlns:xlink="http://www.w3.org/1999/xlink"属性にハングアップしています。

filter +1

@zpaoのコメントを考慮すると、この問題をロックする必要がありますか？ または、少なくとも、その情報でOPを更新できますか？ 私は更新のためにスレッドを購読していますが、 @ zpaoのコメントは（作業がすでに行われているという事実とともに）埋められており、スレッド全体を読んでいない人にとってはちょっと混乱します。

@zpaoのコメントは、それが現在reactに組み込まれていない理由についての決定を説明していますが、アドオンが存在しない理由についてのより良い説明はありますか？
これはまだ探求できるものですか？

マーカーの+1：refx、refy、orient

テキストの属性の+1：回転、ドミナントベースライン

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

+1アドオン

+1アドオン

実際、Reactはコアの「react」とdomの「react-dom」に分割される過程にあり、「react-svg」が最終的に登場する場所だと思います。

フィルタの場合は+1。

vector-effect属性をお願いします

たまたま必要になったときにSVGタグ/属性を要求する人は、Reactの非常に貧弱なモデルだと思います。 ページ上で機能するSVGをレンダリングするためだけにdangerouslySetInnerHTMLを使用しなければならないのはばかげています。 そうは言っても、不足しているもののいくつかは次のとおりです。

_タグ：_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_属性：_

• filterUnits
• stdDeviation
• values
• in
• operator

そしておそらく両方のカテゴリーでもっとたくさん。 これらは、私が使用している特定のSVGコードのほんの一部です。

vector-effect +1

stdDeviation +1

個別の完全なReact.SVGの場合は+1。 私はこれまでReactでSVGを使用するのが大好きですが、サポートが不完全なため、半複雑なアプリケーションには対応できません。

@spicyjには、更新を続けるために必要な個別の構成の必要性を排除する計画があります。 うまくいけば、それはすぐに完了するでしょう。 その間、しっかりと握ってください。

animateTransformの+1

支配ベースラインの場合は+1（＃3199）

@zpaoが言ったように、これをすぐに修正して、任意の属性を使用できるようにする予定です。

それまでこの問題をロックします。

これはhttps://github.com/facebook/react/pull/5714で修正されました

5714は＃6243で元に戻されたため、属性のホワイトリストが必要です。 ただし、幸いなことに、 focusableとvector-effect ）を手動で追加しました。 これらの変更はv15に反映されると思います。

興味深いことに、_tag_ホワイトリストがもう適切かどうかはわかりません。 これまでのところ、 <marker> 、 <textPath> 、 <feGaussianBlur> 、およびこの号で要求されたその他のタグと、リンクされたPRで、マスターに問題なく使用できました。 fbjsまだSVGタグのホワイトリストを機能したのか、 @ zpaoまたは@spicyjがこれを明確にできるかどうかを確認できます。 ＃6243を補完するために、不足しているタグもそこに追加する必要があります。

属性ホワイトリストがまだ関連しているため、この問題のロックを解除していますが、仕様に含まれ、ブラウザーによって実装されている属性のほとんどがサポートされているため、リクエストが大幅に少なくなることを願っています。 最終的なv15でまだサポートされていないものがある場合は、こちらからお知らせください。

この注記は、すべてのSVG属性を通過させるv15RC1には適用されません。

xlink:href属性についてはかなり混乱しているようです。 現在サポートされていますが、別の方法で記述する必要があります。

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

Reactは、0.14.xであっても、それをxlink:hrefに正しく変換します。 例については、このフィドルを参照してください。

私のユースケースでは、ReactがfeFuncRようないくつかのフィルター要素、具体的にはそれらの属性（ slope 、 interceptなど）を認識する必要がありました。 15.0-rc2では問題ないようですが、0.14.xでは、最初にreact / react-domインポートする前に、 react/lib/SVGDOMPropertyConfigによってエクスポートされたディクショナリにこれらの属性を追加することで回避しました。自体。 例えば：

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

これは明らかにハックですが、 dangerouslySetInnerHTMLも好ましいと思います

これは機能しますが、公式に公開されているAPIではなく、マイナーリリースまたはパッチリリースで機能しなくなる可能性があります。 あなたはそれを使うことができますが、あなた自身の責任で。 それでも足りないものがある場合は、追加してください。 15RC2に問題がないことをうれしく思います。

うん、絶対に。 私は15がRCステータスから出るまでそれを使用しているだけです。

v15.0での（ほぼ）完全なSVGサポートにはかなり満足していますが、 xmlnsやxmlnsXlinkなどの名前空間属性は、レンダリング時に適用できなかったことに気づきました。これは、表示時に問題ありません。ブラウザのsvg 。

.svg画像を作成する場合は、これらの属性が必要です。

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

したがって、上記のコードを実行しても機能しません。

おそらく次の事実に関連しています：

... document.createElementを使用したおかげで、SVGタグのリストを維持する必要がなくなったため、以前はサポートされていなかったSVGタグはReact15で問題なく機能するはずです。

document.createElementNSありません。

document.createElementNSではありません。

ブログの投稿は少し単純すぎますが、 <svg>タグの下にある場合はcreateElementNSが使用されます。 これが起こらない場合は、問題を再現するJSFiddleに、問題を説明する別の問題を提出してください。 ありがとう！

@gaearonありがとうございます。 ReactDOM介してブラウザでsvgをレンダリングすると、実際に発生すると思います。 おそらく、この問題はReactDOMServer関連しています。

これは、レンダリングされたSVGとrenderToStaticMarkup()を介して生成されたコードを示すペンで、少なくともxmlNSとxmlnsXlinkの属性がありません。

その場合は、この問題を個別に提出できます。

ええ、 xmlnsとxmlns:Xlinkがありません。 https://github.com/facebook/react/pull/6471には、それを追加するための進行中の作業がいくつかあり

サポートされているタグのリストに<animate>と<animateTransform>がまだ表示されません。 あなたがそれをサポートしないことを選んだ理由はありますか？

@shilpan

現在、すべてのタグがサポートされています。 このリストには、 React.DOM.*ファクトリ関数としてサポートされているタグのみが示されています。

次のSVG要素がReact.DOM。*でサポートさ

（強調鉱山）

JSXを使用している場合は、これについてまったく心配する必要はありません。JSXはReact.DOM.*ファクトリに依存していないため、 <animate>と<animateTransform>を記述しても問題ありません。

JSXを使用しない場合でも、 React.createElement('animate', ...)を使用して問題なく動作するか、独自のファクトリ関数var animate = React.createFactory('animate")作成できます。

xmlnsサポートを追加するための+1 ....それまでの間、回避策（IE9-11をサポートできるようにする必要がありました）に興味がある場合は、これが私が思いついたものです。

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