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

您忘记引用in组件中的feComponentTransfer属性。

组件应如下所示

<feComponentTransfer in="SourceAlpha">

而不是

<feComponentTransfer in=SourceAlpha>

ReactJS不支持svg过滤器？

1 个答案: