ReactJS不支持svg過濾器？

Question

寫過濾器內陰影，但不幸的是給出了一個錯誤（）

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不支持過濾器，我的過濾器將永遠不會工作？

Answer 1

您忘記引用feComponentTransfer組件中的in屬性。

組件應該是這樣的

<feComponentTransfer in="SourceAlpha"> 

不是

<feComponentTransfer in=SourceAlpha>