Element drop shadow / blur #176
Comments
|
Could you explain your request a little more? |
|
Can you stop poking me? I don't understand why you poke me as I never really used this module. |
|
@MoOx he is poking every contributor... |
|
According to this https://github.com/react-native-community/react-native-svg/graphs/contributors I am not really a contributor... Anyway, this is not a good idea :) |
|
hahah yea, but I was just playing captain obvious :) |
|
Please stop at people unless for direct reasons. Don't mass spam the contributors for feature requests, or your bug reports. This is a common courtesy. |
|
@MoOx I poke every contributors to modules that are not very responsive in getting back to issues. I work at a large product company now and we would love this module to work efficiently for our future pipline's ;)... Therefore, @mattapperson Currently the SVG module does not offer any form of drop shadow integretion (feGaussianBlur) nor things like transform-origin (which is another issue but hey...). So it would be great if an element like a Rect, Circle, Path and so on... could have a drop shadow with the ability to set and x y offset, drop shadow color, drop shadow opacity, drop shadow radius and so on... and ideally have the feGaussianBlur integration too in order to blur the entire svg Polypath. @chengyin - I would love to, but then please suggest a more efficient methodology to getting solutions/responses quicker ;) Cheers all! |
|
@julesmoretti While we find it EXTREMELY cool that a company like Frog Design would want to use this project... please keep in mind that we contributors help maintain this project for free. Typically features are added when someone needs it that has the ability to add the feature and they then submit a pull request, not just on-demand when users ask. |
|
Work on filters tracked here: #150 |
# 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)
Hello Everyone:
Having a drop shadows and blurs would be really really appreciated :)
@brentvatne @chengyin @MoOx @mattapperson @gorangajic
Thank you.
Jules
The text was updated successfully, but these errors were encountered: