Feature: filter, feFlood and feBlend #1216
Comments
|
Hello! Thanks for being available to work on this. There are prototypes for ios in the filters branch and the latest version of that is in the filters_rebase branch: https://github.com/react-native-community/react-native-svg/tree/filters_rebase There's some work done for android as well: #150 (comment) And there are several other react-native libraries to take inspiration from: #150 (comment) There are some other useful links in that thread as well, e.g. to browser implementations, and various apis on android and ios. You can probably start by looking at the diff between the filters_rebase branch, and the master branch: https://github.com/react-native-community/react-native-svg/compare/filters_rebase And then start creating native components for android. Feel free to ask any questions, no matter if it feels stupid or not, I can give advice and guidance along the way as long as you keep working on it. Probably easier to work from the filters_rebase branch, if someone starts working actively on this, then I can handle rebasing it onto the latest developments in the master and develop branch, mostly just adding typescript types to the new svg filter components. |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open. |
|
Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you. |
|
Any updates or plans here? |
# Summary Introducing the long-awaited **Filters** in `react-native-svg` 🎉 ### Motivation This PR is the beginning of bringing support of SVG Filters into `react-native-svg`. * **related issues**: This PR series will address the following issues: #150, #176, #635, #883, #994, #996, #1216 * **feature overview**: This PR is a boilerplate for Filters * introducing `Filter` component and `FeColorMatrix` as a start. * It also introduces a new subdirectory called `react-native-svg/filter-image` with a `FilterImage` component. # Usage ## Filter and Fe... Filters are compatible with the web familiar standard, so most things should be compatible out-of-the-box and changes will be limited to using a capital letter as it's component. ### Example ```tsx import React from 'react'; import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg'; export default () => { return ( <Svg height="300" width="300"> <Filter id="myFilter"> <FeColorMatrix type="saturate" values="0.2" /> </Filter> <Rect x="0" y="0" width="300" height="300" fill="red" filter="url(#myFilter)" /> </Svg> ); }; ```  ## Filter Image `FilterImage` is a new component that is not strictly related to SVG. Its behavior should be the same as a regular `Image` component from React Native with one exception - the additional prop `filters`, which accepts an array of filters to apply to the image. ### Example ```tsx import React from 'react'; import { StyleSheet } from 'react-native'; import { FilterImage } from 'react-native-svg/filter-image'; const myImage = require('./myImage.jpg'); export default () => { return ( <FilterImage style={styles.image} source={myImage} filters={[ { name: 'colorMatrix', type: 'saturate', values: 0.2 }, { name: 'colorMatrix', type: 'matrix', values: [ 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 1, 0, ], }, ]} /> ); }; const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); ```  ## Test Plan **Example App**: Updated the example app with various filter effects, showcasing real-world usage. ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [x] I have tested this on a device and a simulator - [x] I added documentation in `README.md` and `USAGE.md` - [x] I updated the typed files (typescript)
Feature: filter, feFlood and feBlend
Hi there,
I am writting here because I need these features.
I want to do these, but I would like to be introduced. I don't know the procedures for doing this.
Any help is very useful to me.
The text was updated successfully, but these errors were encountered: