2016-06-16 6 views
0

ReactJSはsvgフィルタをサポートしていませんか?

export function InnerShadow(props:InnerShadowProps):ReactElement<any> { 
    return (
     <defs> 
      <filter id="inner-shadow" x="-50%" y="-50%" width="200%" height="200%"> 
       <feComponentTransfer in=SourceAlpha> // : error TS1005: '{' expected. 
        <feFuncA type="table" tableValues="1 0"/> 
       </feComponentTransfer> // : error TS1005: '}' expected. 
       <feGaussianBlur stdDeviation="5"/> 
       <feOffset dx="0" dy="0" result="offsetblur"/> 
       <feFlood flood-color="rgb(0, 0, 0)" result="color"/> 
       <feComposite in2="offsetblur" operator="in"/> 
       <feComposite in2="SourceAlpha" operator="in" /> 
       <feMerge> 
        <feMergeNode in="SourceGraphic" /><feMergeNode /> 
       </feMerge> 
      </filter> 
     </defs> 
    ); 
} 

そして私のdocumentationが見つかっていない中)(内側の影フィルタを書いたが、残念ながらエラーが発生します。

質問 - 私が何かを見逃してしまった、またはReactJSがフィルタをサポートしていないため、フィルタが動作しませんでしたか?

答えて

0

feComponentTransferコンポーネントのin属性を引用しています。コンポーネントがこの

<feComponentTransfer in="SourceAlpha"> 

よりもむしろ

<feComponentTransfer in=SourceAlpha> 
+1

のようになります

が見つかりました。エラーをありがとう、しかし、究極の問題は、コンパイラにありました。 Typescriptは反応からのsvgについて知らない。 –

関連する問題