SVGフィルタをReactでレンダリングできません

Question

React（15.0.1）を使用するWebアプリケーションでグラフィック要素<rect>にSVGフィルタ（この場合は<feGaussianBlur>）をロードしようとしています。 component2.jsで

render(){ 
    return(
     <defs> 
     <filter id='blur'> 
      <feGaussianBlur stdDeviation="5" /> 
     </filter> 
     </defs> 
     <component2 /> 
    ); 
} 

：コードはcomponent1.jsでこの

に似たものになります

render(){ 
    <rect x="some_xpos" 
     y="some_ypos" 
     height="some_height" 
     width="some_width" 
     filter="url(#blur)" 
    > 
    </rect> 
} 

これらのすべてのコンポーネントが同じhtmlページに何とかレンダリングされますページ全体がレンダリングされるときにフィルタは適用されません。私は、さまざまなオプションに見てきました：

• オプション1：パブリックURLを使用していることを公共財のフォルダとurl()に、独自の.svgファイルへのSVGフィルタをエクスポートします。 Chromeのバグのために動作しませんでしたlink
• option2：アプリケーション全体がレンダリングされる主な（そして唯一の）index.htmlファイルに<filter>を入れてください。私はまた、それ自身の<svg>タグで囲まれた一番上に置きました。うまくいきませんでした。

<rect>は、フィルタがどこにあるのかわかりませんでした。私はこれをデバッグする方法や、svgフィルタをロードするための代替方法に関するアドバイスを感謝します。

Answer 1

SVG要素を直接DOMで作成する場合は、SVG要素をSVG名前空間に作成する必要があります。そして私が見ることから、Reactはそれをサポートしていません。回避策は、Kaiddoがコメントで言及しているように、要素をraw innerHTMLとして作成することです。

Answer 2

最適な回避策は、次のように「スタイル」を使用することです：

<rect x="some_xpos" 
     y="some_ypos" 
     height="some_height" 
     width="some_width" 
     style={ {filter: 'url(#blur)'} } 
    >