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>