mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
fix: applying multiple filters on iOS (#2366)
# Summary
Applying multiple `FeColorFilter` instances can cause unexpected
behavior on iOS, likely due to a bug in `CoreImage` where the `CIImage`
recipe isn't applied step by step as it should be. This fix ensures that
the filter result is rendered after each application by converting the
image to `CGImage` and then back to `CIImage`.
## Test Plan
With this simple test, we can prove that these changes are working
```tsx
<Svg height="200" width="200">
<Filter id="filter">
<FeColorMatrix type="matrix" values="78 -70 -7 0 0 -21 29 -7 0 0 -21 -70 0 0 0 0 0 0 1 0"/>
<FeColorMatrix type="matrix" values="0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0, 0, 0, 0, 0, 0, 1, 0"/>
</Filter>
<Rect width="200" height="200" fill="red" filter="url(#filter)"/>
</Svg>
```
| Web | iOS before changes | iOS after changes |
| --- | --- | --- |
| <img width="242" alt="image"
src="https://github.com/user-attachments/assets/dc683341-b3ca-4fab-86d8-cf72b15c13d4">
| <img width="237" alt="image"
src="https://github.com/user-attachments/assets/d4a1af5d-ae67-4ed9-9dbd-d03540b2c63c">
| <img width="249" alt="image"
src="https://github.com/user-attachments/assets/83e856a6-5bcc-4534-ad7b-a1f188434e1c">
|
This commit is contained in:
@@ -22,6 +22,7 @@ import Test2248 from './src/Test2248';
|
||||
import Test2266 from './src/Test2266';
|
||||
import Test2276 from './src/Test2276';
|
||||
import Test2327 from './src/Test2327';
|
||||
import Test2366 from './src/Test2366';
|
||||
|
||||
export default function App() {
|
||||
return <ColorTest />;
|
||||
|
||||
30
apps/test-examples/src/Test2366.tsx
Normal file
30
apps/test-examples/src/Test2366.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {FeColorMatrix, Filter, Rect, Svg} from 'react-native-svg';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
||||
<Svg height="200" width="200">
|
||||
<Filter id="filter">
|
||||
<FeColorMatrix
|
||||
type="matrix"
|
||||
values="
|
||||
78 -70 -7 0 0
|
||||
-21 29 -7 0 0
|
||||
-21 -70 0 0 0
|
||||
0 0 0 1 0"
|
||||
/>
|
||||
<FeColorMatrix
|
||||
type="matrix"
|
||||
values="0.2126, 0.7152, 0.0722, 0, 0,
|
||||
0.2126, 0.7152, 0.0722, 0, 0,
|
||||
0.2126, 0.7152, 0, 0, 0,
|
||||
0, 0, 0, 1, 0"
|
||||
/>
|
||||
</Filter>
|
||||
<Rect width="200" height="200" fill="red" filter="url(#filter)" />
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user