-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Filters progress #2362
Labels
Comments
github-actions
bot
added
the
Missing info
The user didn't precise the problem enough
label
Jul 23, 2024
github-actions
bot
added
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 23, 2024
jakex7
removed
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 23, 2024
github-actions
bot
added
the
Missing repro
This issue need minimum repro scenario
label
Jul 23, 2024
github-actions
bot
added
the
Missing repro
This issue need minimum repro scenario
label
Jul 23, 2024
github-actions
bot
added
the
Missing repro
This issue need minimum repro scenario
label
Jul 23, 2024
This comment was marked as off-topic.
This comment was marked as off-topic.
github-actions
bot
added
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 25, 2024
jakex7
removed
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 25, 2024
github-actions
bot
added
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 26, 2024
This comment was marked as off-topic.
This comment was marked as off-topic.
3 tasks
jakex7
added
Maintainer issue
and removed
Missing repro
This issue need minimum repro scenario
Missing info
The user didn't precise the problem enough
labels
Jul 26, 2024
jakex7
added a commit
that referenced
this issue
Jul 31, 2024
# Summary As mentioned in #2362 Introduce new filters: * `FeMerge` * `FeMergeNode` ## Example usage ```tsx <Svg width="200" height="200"> <Filter id="mergeWithOffset" width="180" height="180"> <FeOffset dx="50" dy="50" result="test" /> <FeOffset dx="100" dy="100" in="SourceGraphic" /> <FeMerge> <FeMergeNode in="SourceGraphic" /> <FeMergeNode in="test" /> <FeMergeNode /> </FeMerge> </Filter> <Rect x="0" y="0" width="100" height="100" stroke="black" fill="red" filter="url(#mergeWithOffset)" /> </Svg> ``` <img width="207" alt="image" src="https://github.com/user-attachments/assets/9cb3ded6-f939-4b2b-8ece-df54e64fe898"> ## Test Plan `Example` app -> `Filters` -> `FeMerge` ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [x] I have tested this on a device and a simulator - [x] I added documentation in `README.md` - [x] I updated the typed files (typescript)
Merged
jakex7
added a commit
that referenced
this issue
Oct 15, 2024
# Summary Continuation of #2362 implementing `FeFlood` filter https://www.w3.org/TR/SVG11/filters.html#feFloodElement ## Test Plan Example app → Filters → `FeFlood` ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | macOS | ✅ _*_ | | Android | ✅ | | Web | ✅ | _* `canvasWidth/canvasHeight` is incorrect on macOS, so there might be some problems_
Merged
jakex7
added a commit
that referenced
this issue
Oct 16, 2024
# Summary Continuation of #2362 implementing `FeBlend` filter https://www.w3.org/TR/SVG11/filters.html#feBlendElement ## Test Plan Example app → Filters → `FeBlend` ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | macOS | ✅ _*_ | | Android | ✅ | | Web | ✅ |
Merged
jakex7
added a commit
that referenced
this issue
Oct 28, 2024
# 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 | ✅ |
jakex7
added a commit
that referenced
this issue
Nov 4, 2024
@jakex7 Any way I can help you on this? Looks like you're near the finish line... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi everyone!
We've been working on implementing filters in
react-native-svg
for a while now. This update is intended to inform you about our progress and facilitate discussion on implementation and future plans.Progress
Here is a list of the filters along with annotations on their current status:
Filter component
Filter
component feat: filters support FeColorMatrix and FilterImage #2316 [released]x, y, width, height, filterUnits, primitiveUnits
[todo]FilterPrimitive
feat: filters support FeColorMatrix and FilterImage #2316 [released]filter
prop on renderable elements feat: filters support FeColorMatrix and FilterImage #2316 [released]Filters
FeColorMatrix
feat: filters support FeColorMatrix and FilterImage #2316 [released]FeGaussianBlur
feat: addFeGaussianBlur
filter #2352 [released]FeOffset
feat: addFeOffset
filter #2361 [released]FeMerge
,FeMergeNode
feat: addFeMerge
andFeMergeNode
filters #2369 [released]FeFlood
feat: FeFlood #2487 [released]FeBlend
feat: FeBlend #2489 [released]FeComposite
feat: FeComposite filter #2433 [released]FeDropShadow
feat: FeDropShadow #2514 [released]FeComponentTransfer
[work in progress]FeFuncR
FeFuncG
FeFuncB
FeFuncA
Example usage
This issue is the successor to #150 and address the #176 #635 #883 #1216
The text was updated successfully, but these errors were encountered: