mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-05-26 20:32:23 +00:00
feat: FeDropShadow (#2514)
# Summary Continuation of #2362 introducing highly requested ✨ `FeDropShadow` ✨ filter. This addition is straightforward since it's essentially a shorthand (as specified in the spec) for filters that are already implemented: https://www.w3.org/TR/filter-effects-1/#feDropShadowElement <img width="532" alt="image" src="https://github.com/user-attachments/assets/b221ee4c-d8b0-469b-acb0-71224fb2b1e0"> ## Test Plan Example app -> Filters -> FeDropShadow ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | macOS | ✅ | | Android | ✅ | | Web | ✅ |
This commit is contained in:
@@ -1,12 +1,20 @@
|
||||
import { ColorValue } from 'react-native';
|
||||
import { NumberArray, NumberProp } from '../../lib/extract/types';
|
||||
import { warnUnimplementedFilter } from '../../lib/util';
|
||||
import FeFlood from './FeFlood';
|
||||
import FeGaussianBlur from './FeGaussianBlur';
|
||||
import FeMerge from './FeMerge';
|
||||
import FeMergeNode from './FeMergeNode';
|
||||
import FeOffset from './FeOffset';
|
||||
import FilterPrimitive from './FilterPrimitive';
|
||||
import FeComposite from './FeComposite';
|
||||
|
||||
export interface FeDropShadowProps {
|
||||
in?: string;
|
||||
stdDeviation?: NumberArray;
|
||||
dx?: NumberProp;
|
||||
dy?: NumberProp;
|
||||
floodColor?: ColorValue;
|
||||
floodOpacity?: NumberProp;
|
||||
}
|
||||
|
||||
export default class FeDropShadow extends FilterPrimitive<FeDropShadowProps> {
|
||||
@@ -17,7 +25,21 @@ export default class FeDropShadow extends FilterPrimitive<FeDropShadowProps> {
|
||||
};
|
||||
|
||||
render() {
|
||||
warnUnimplementedFilter();
|
||||
return null;
|
||||
const { stdDeviation, in: in1 = 'SourceGraphic', dx, dy } = this.props;
|
||||
return (
|
||||
<>
|
||||
<FeGaussianBlur in={in1} stdDeviation={stdDeviation} />
|
||||
<FeOffset dx={dx} dy={dy} result="offsetblur" />
|
||||
<FeFlood
|
||||
floodColor={this.props.floodColor}
|
||||
floodOpacity={this.props.floodOpacity}
|
||||
/>
|
||||
<FeComposite in2="offsetblur" operator="in" />
|
||||
<FeMerge>
|
||||
<FeMergeNode />
|
||||
<FeMergeNode in={in1} />
|
||||
</FeMerge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user