feat: implement filter region (#2441)

# Summary

Implement proper handling for filter region according to the specs:
*
[FilterEffectsRegion](https://www.w3.org/TR/SVG11/filters.html#FilterEffectsRegion)
*
[FilterPrimitiveSubRegion](https://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveSubRegion)

enabling user to specify 
* `filterUnits`
* `primitiveUnits`
* `x`
* `y`
* `width`
* `height`

on `Filter` element and the last four on filter primitives.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |         |
| Android |          |
| Web     |          |
This commit is contained in:
Jakub Grzywacz
2024-09-12 12:13:05 +02:00
committed by GitHub
parent 967886d40c
commit 85be1d0bac
15 changed files with 271 additions and 84 deletions

View File

@@ -3,7 +3,6 @@ import { NativeMethods } from 'react-native';
import RNSVGFilter from '../../fabric/FilterNativeComponent';
import { NumberProp, Units } from '../../lib/extract/types';
import Shape from '../Shape';
import warnOnce from 'warn-once';
export interface FilterProps {
children?: React.ReactNode;
@@ -13,7 +12,6 @@ export interface FilterProps {
width?: NumberProp;
height?: NumberProp;
filterUnits?: Units;
// TODO: Implement
primitiveUnits?: Units;
}
@@ -26,22 +24,20 @@ export default class Filter extends Shape<FilterProps> {
width: '120%',
height: '120%',
filterUnits: 'objectBoundingBox',
// primitiveUnits: 'userSpaceOnUse',
primitiveUnits: 'userSpaceOnUse',
};
render() {
const { id, x, y, width, height, filterUnits, primitiveUnits } = this.props;
warnOnce(
!!primitiveUnits,
"WARNING: Filter's `primitiveUnits` prop is not supported yet"
);
const filterProps = {
name: id,
x,
y,
width,
height,
filterUnits: filterUnits || 'objectBoundingBox',
filterUnits,
primitiveUnits,
};
return (
<RNSVGFilter