[React] Add button to invert waves upside down
anup-a opened this issue · comments
- Add Button to invert svg waves upside down.
- Wave should remain down initially, but should swap to top of container and invert on button press.
- something similar which to getwaves.io
I would like to work on this, if that's okay with you.
@nbrown0000 sure go ahead
Can I take this up if there's no activity here?
@ansh-saini I think we should wait till he responds.
@nbrown0000 are you working on this ?
PS- there's no hurry take your time?
@anup-a Yes I am working on it. I'm still fairly new to open source so bear with me. I think I'm getting close. PS - 8 month old daughter dictates when I can code haha.
@nbrown0000 Haha ... take your time No worries
Need some help. As far as I can tell the most straightforward ways to invert the waves would be to
- map the SVG paths to add in transform attributes, but tells me svg.props.children[0].props.map is not a function.
- set the transform attribute directly onto the SVG object, but tells me svg.setAttribute is not a function.
Not sure what to do, keep thinking this should be simple enough. Any suggestions would be welcome.
Haven't thought much but... we should be able to conditionally add transform attribute to path like...
<path transform={rotate ? : ( something ) : null }
https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-center-in-svg
This should work transform="rotate(-180 ${w} ${h})" ... w=720 (1440/2) h=(viewbox height/2) dynamic add this for every path
Ex- in case of 2 waves height should be 500 so, this should work transform="rotate(-180 720 250)"
Well, it's February 2021 and this feature is not added yet
@Rademenes16 I guess he (@nbrown0000) isn't working on it anymore.
Maybe in a week or so, I'll look it myself.
OK I found the solution which is very simple
Add this line of code to CSS file:
svg {
transform: rotate(180deg);
}
It will rotate the SVG by 180 degrees
If you want to rotate the colors too, then add: linearGradient next to svg
@anup-a I know it's not in React but KISS rule fits here perfectly.
Ha yes . That would do. I will definitely use this one if transform attribute didn't work.
Initially, I thought it would be much better to add to svg element itself rather than css.
Apologies @anup-a, for some reason I have not been getting notifications on comments here. I did ask a question on my pull request but never heard a response so wasn't sure if anyone was still active on this at all.
I'm still happy to work on this project, with some guidance. Let me know if that works for you or not.
@nbrown0000 no worries 😉. GO FOR IT !!